vue入门以及语法实例

最新推荐文章于 2024-10-15 19:50:46 发布
最新推荐文章于 2024-10-15 19:50:46 发布
阅读量208 收藏 1
点赞数
分类专栏： 大聖的JavaWorld 文章标签： vue 入门 语法 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenchen818/article/details/103238377
版权

MVVM模式

  • M：即Model，模型，包括数据和一些基本操作
  • V：即View，视图，页面渲染结果
  • VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉，由框架来完成）

Vue概念

一套用于构建用户界面的渐进式框架，Vue被设计为自底向上逐层应用，Vue的核心库只关注视图层。不仅易于上手，还便于与第三方库或既有项目整合，另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动
官网：https://cn.vuejs.org/
参考：https://cn.vuejs.org/v2/guide

Node和NPM

npm是Node提供的模块管理工具，就像maven工具，可以非常方便的下载安装很多前端框架，包括Jquery，AngularJS，Vuejs都有

1. 下载安装

1.1 下载Node.js

下载地址：https://nodejs.org/en/

1.2 npm改淘宝镜像
  1. npm install nrm -g 下载nrm
  2. npm下载不了就直接 npm config set registry https://registry.npm.taobao.org 然后执行最后一步
  3. nrm ls 查看所有镜像
  4. nrm use taobao 改为淘宝镜像
  5. npm config get registry 验证一哈

2. 使用npm搞一个最简单的vue工程

  1. 在工程根目录，终端输入npm init -y
  2. 同样目录 npm install vue --save
  3. 在页面引入vue <script src="./node_modules/vue/dist/vue.js"></script>
<html lang="en">
<head>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>大家好，我{{name}}</h1>
</div>
</body>
<script>
    const app = new Vue({   //初始化一个vue实例
        el: "#app", //element 选择器
        data: {     //定义数据模型
            name: "zhangsan"
        }
    })
</script>
</html>

3. Vue基础语法入门

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将被重新渲染，这就是“响应式”系统

3.1 {{}} 插值表达式

可以写js语法也可以写js内置函数和自定义函数，但是要有返回值

<h1>大家好，我{{name}}</h1>

3.2 v-text和v-html单向绑定 替代{{}}

插值表达式会有插值闪烁的问题，用这两个可以用默认值的方式来解决

<h1>大家好我是 <span v-text="name">张学友</span></h1>

<h1>大家好我是 <span v-html="name">张学友</span></h1>

3.3 v-model 双向绑定数据(表单元素)

<input type="text" v-model="name">

<!-- 复杂情况 -->
<div id="app">
<input type="checkbox" value="ios" v-model="language">ios<br>
<input type="checkbox" value="java" v-model="language">java<br>
<input type="checkbox" value="php" v-model="language">php<br>
您选择了{{language.join(",")}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            language: []
        }
    })
</script>

3.4 v-on:事件名(简写 @事件名) 事件绑定

可以直接绑定js代码也可以绑定方法，方法中用this就可以操作数据

<input type="button" value="点我呢哇" v-on:click="num++">

<input type="button" value="点我呢哇" @click="incr()">

3.5 事件修饰符

  • .stop 阻止事件冒泡到父元素
  • .prevent 阻止默认事件发生
  • .capture 使用事件补货模式
  • .self 只有元素自身触发事件才执行
  • .once 只执行一次
    <input type="button" value="禁用默认事件" @contextMenu.prevent="incr()">

3.6 按键事件

  • .enter .tab .delete .esc .space .up .down .left .right
  • .13也是回车 .65是A键，以此类推A~Z
    <input type="text" v-model="num" @keyup.enter="submit()">

3.7 组合按键

<input type="text" v-model="num" @keyup.alt.67="submit()">

3.8 v-for遍历数组/对象

<ul>
    <li v-for="(user,index) in users" :key="index">{{index}} - {{user.name}} - {{user.age}}</li>
    <li v-for="(val,key,index) in user" :key="index">{{index}} - {{key}} - {{val}}</li>
</ul>

3.9 v-if和v-show

当所得到的的结果为true时，所在的元素才会被渲染，区别就是v-show会被渲染，但是加了style="display:none"，v-if不会被渲染，效率更好

<input type="button" value="点我看" @click="show=!show">
<span v-if="show">我if出来了</span>
<span v-show="show">我show出来了</span>
<!-- else-if和else必须紧跟if或者else-if -->
<input type="button" value="点我随机数" @click="random=Math.random()">{{random}}
<span v-if="random > 0.75">我大于0.75</span>
<span v-else-if="random > 0.5">我大于0.5</span>
<span v-else>我啥也不是</span>

3.10 v-bind (简写 : ) html属性不能用{{}}绑定，只能用v-bind

<input type="text" v-model="store">
<input type="button" value="变颜变色" v-bind:class="{active : store>0}">

3.11 computed 计算属性

const app = new Vue({
    el: "#app",
    data: {},
    methods: {
        birth(){
            return this.birth1;
        }
    },
    computed: {
        birth1(){
            const date = new Date(this.birthday);
            return date.getFullYear()+ "年" + date.getMonth() + "月" + date.getDay()  +"日"
        }
    }
})

3.12 watch监听

watch: {
    search(val1,val2){  //search 监听哪个变量就叫啥
        console.log(val1,val2) //val1新值 val2旧值
    }
},

4. Vue生命周期钩子

Vue实例在被创建的时都要经过一系列初始化过程：创建实例，装载模板，渲染模板等。Vue为每个状态都设置了钩子函数(监听函数)，每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D53vIvsY-1574665742940)(./images/lifecycle.png)]

  • beforeCreate
  • created 可以在这个时候发送ajax到后台请求数据
  • beforeMounte
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
const app = new Vue({
    el: "#app",
    data: {
        name: "zhangsan"
    },
    methods: {},
    created(){
        this.num = 10000;
    },
    monted(){}
})

5. 组件化

在vue里，所有的vue实例都是组件

5.1 全局组件

<body>
    <div id="app">
        <counter></counter>
    </div>
</body>
<script>
    Vue.component("counter", {
        template: "<button @click='num++'>点我加1 {{num}}</button>",
        data() {    //组件数据是函数，保证组件的复用
            return {
                num: 0
            }
        },
    })

    const app = new Vue({
        el: "#app"
    })
</script>

5.2 局部组件

<body>
    <div id="app">
       <hello1></hello1>
    </div>
</body>
<script>
    const hello = {
        template: "<div>打个招呼: 我思{{name}}</div>",
        data() {
            return {
                name: "张三"
            }
        },
    }

    const app = new Vue({
        el: "#app",
        components: {
            hello1 : hello // 组件名 ： 组件对象
        }
    })

</script>

5.3 组件间通信(父向子，子向父)

  • 父组件使用子组件时，自定义属性(属性名任意，属性值为要传递的数据)
  • 子组件通过props接收父组件数据，通过自定义属性的属性名
<body>
    <div id="app">
        <!-- 通过自定义属性名传递给子组件 -->
        <counter :num1="num"></counter>
    </div>
</body>
<script>
    Vue.component("counter", {
        template: "<button @click='num1++'>点我加1 {{num1}}</button>",
        props:["num1"] //子组件接收，num1可以正常使用
        /*props:{   //高级应用，添加约束 做验证
            num1: {
                type:Number, //String Boolean Array Object
                default: 0
            }
        }*/
    })

    const app = new Vue({
        el: "#app",
        data: {
            num: 0
        }
    })
</script>
  • 子向父没法直接传，所以传一个父的方法，可以改父的数据模型
<body>
    <div id="app">
        <!-- 自定义事件名 incr1 -->
        <counter @incr1="incr()"></counter>
    </div>
</body>
<script>
    Vue.component("counter", {
        template: "<button @click='subIncr'>点我加1</button>",
        methods: {
            subIncr(){
                this.$emit("incr1");
            }
        },
    })

    const app = new Vue({
        el: "#app",
        methods: {
            incr(){
                this.num ++;
            }
        },
    })
</script>

6. 路由 vue-router 实现多组件的跳转

  1. 引入vue-router组件
  2. 实例化vue-router
  3. 引入到vue实例中，通过router
  4. 放置锚点
  • 显示页面
<!-- 导入js vue.js vue-router.js login.js register.js -->
<body>
    <div id="app"> 
        <span><router-link to="/login">登录页</router-link></span>
        <span><router-link to="/register">注册页</router-link></span>
        <hr>
        <router-view></router-view>
    </div>
</body>
<script>
    const router = new VueRouter({
        routes: [
            {
                path: "/login", // 路由路径，必须以“/”开头
                component: loginForm
            },
            {
                path: "/register",
                component: registerForm
            }
        ]
    })

    const app = new Vue({
        el: "#app",
        router
    })
</script>
  • 例： 登录组件(.js)
const loginForm = { //&emsp; 一个汉字 &nbsp; 一个空格 &ensp; 半个汉字
    template: `
        <div>
            <h1>登录页</h1>
            用户名：<input type="text"><br>
            密&emsp;码：<input type="password"><br>
            <input type="button" value="登陆">
        </div>
    `
}
vue.js（实例/模板语法）
吴小花的博客
02-14 417
1.数据与方法 / 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // 获得这个实例上的属性 // 返回源数据中对应的字段 vm.a == data.a // =&gt; true // 设置属性也会影响到原始数据 vm.a = 2 data.a // =&gt; 2...
vue基本语法及案例（一）
JiangHu_Java的博客
08-18 408
vue基本语法（一）前言插值指令动态参数v-on与v-bind的简写 前言 上篇博客介绍了vue的简介、安装步骤、生命周期，这篇博客主要讲述vue的一些基本语法！ 插值 文本插值 其实就是我上篇博客所举的简单例子，使用{{}}来显示字符串： html插值 将html代码存入一个vue的v-html指令中，利用div将其显示出来； 属性赋值 使用v-bind指令绑定属性并将其赋值； 表达式 使用v-bind指令与{{}}配合函数符号啥的变成一个表达式。 测试代码： <!DOCTYPE html>
Vue实例
a9794666的博客
08-21 139
1 创建实例 var vm = new Vue({ // 选项 }) 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。 2 数据与方法 2.1 数据 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 ...
Vue.js系列之二Vue实例
weixin_34408717的博客
11-02 112
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下: var vm=new Vue({}); {}是创建Vue应用时的参数对象   1、Vue实例的data属性 当一个Vue对象被创建时,它向Vue的响应式系统中加入了其参数对象的data属性中所有的属性,当data属性中的属性发生改变时,视图会随之产生改变,根据新的属性值更新视图.代码如下: &lt;body&gt; &l...
Vue基础（二）——Vue基础语法案例
雨的印记的博客
11-19 334
案例——图书管理 大致界面如下图所示： 用户可以在表单输入框中输入编号、图书名称，点击提交后就可以实现图书的添加功能，在图书展示列表中每一行都有修改、删除按钮，点击可以实现相应的修改以及删除功能。 补充知识 实现步骤： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &
Vue详细入门（语法【一】）
最新发布
上官花雨滴博客！！！
10-15 1178
‌‌  Vue.js是一个用于构建用户界面的‌JavaScript框架‌，它基于标准的‌HTML、‌CSS和‌JavaScript，提供了一种声明式的、基于组件的编程模型，帮助开发者高效地开发用户界面，无论是简单还是复杂的界面。‌一、基本定义Vue.js基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue.js都能够胜任。二、主要特性。
vue入门实例 js html css vue模板
08-19
在"vue入门实例"中，你可能会看到如何设置一个新的Vue实例，如何在HTML中使用Vue指令，以及如何组织组件结构。文件名列表中的"share"可能包含的是共享资源，如代码示例、配置文件或教程文档。 为了开始学习Vue，...
Vue入门1：基础语法
echola_mendes的博客
07-19 785
个人喜欢将复杂概念简化，不做过多概念点的赘述，通过案例来理解和巩固知识点，由浅入深……：需要HTML、CSS和JavaScript前端基础Node和一个Vue编译器（VS Code /Sublime Text）Vue (发音为 /vjuː/，类似) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
Easter_Vue_ABC:基于Vue官网提供的文档写的一些vue语法入门实例
05-18
在“Easter_Vue_ABC”项目中，我们看到作者基于Vue官网的文档，构建了一些Vue语法的入门实例，旨在帮助初学者快速掌握Vue的基础功能。以下是关于Vue.js的一些关键知识点和学习指南： 1. **安装与设置**：Vue可以...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
数据驱动意味着应用程序的状态管理集中在Vue实例的数据对象上，当数据变化时，视图会自动更新以反映这些变化，这一过程称为双向数据绑定。Vue通过Observer系统监听数据变化，而Watcher系统负责在数据变化时执行相应...
Vue--vue实例、模板语法
@微你
07-17 201
Just do it… ????：文章是供自己平时学习时用，相当于学习笔记，如有错误，欢迎指正，若有侵权，请联系我~~ 参考博文连接：https://blog.csdn.net/weixin_34021089/article/details/91871486?utm_source=app Vue–vue实例、模板语法（插值、指令、缩写） 一、vue实例化 var vm = new Vue({ //vm表示Vue实例 //属性和方法 }) 例如： var vm = new Vue({ //实例
Vue 实例
蓝墨の学习笔记
08-25 136
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的： 根实例 └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics 所有的 Vue 组件都是 Vue 实
vue实例
多多学习
09-16 369
vue小案例 通过构建函数vue就可以创建一个vue实例，并且启动vue应用 var app = new Vue( { //选项 })挂在 变量app就代表了这个vue实例，事实上，几乎所有的代码都是一个对象，写入vue的实例中 首先不可缺少el el用于指定一个页面已经存在的dom元素来挂载vue实例 data里面放数据，放上面声明的数据，通过{{}}文本插值的形式的将data里的数据实时显示出来，如果不想让显示出来，可以用v-pre跳过编译过程 得强调一下计算属性，因为他依赖缓存，所以得以函数的形式
（一）Vue 实例
Luckyzhoufangbing的博客
10-27 656
（一）抛出问题 （1）vue 实例的创建和作用 （2）vue实例的属性 （3）vue实例的方法 （二）解决问题 （1）创建vue 实例，创建实例，一定会需要 new 关键字 import Vue from 'vue' import App from './App' new Vue({ el: '#app', components: { App }, template: '<App/>' }) 向 new Vue 中传入一个参数，该参数是一个对象.
Vue入门实战教程（二）—— Vue 实例
jcyka的专栏
04-16 420
1. 每个 Vue 应用都是通过用Vue函数创建一个新的Vue 实例开始的 这个Vue函数指的就是Vue类。所以： Vue实例: Vue类的实例 Vue应用通过创建一个新的Vue实例开始（下面会讲到，这个开始的Vue实例称为根实例） var vue_app = new Vue(); 2.当创建一个 Vue 实例时，你可以传入一个选项对象。 选项对象：包括选项的对象： ...
Vue基础知识运用实例（一）
跟着信仰走
07-24 346
1、Vue第一个实例：Hello Vue.js!  el指向html元素   &lt;！DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset =“utf-8”&gt; &lt;title&gt; Hello Vue.js!&lt;/ title&gt; &lt;script src =“https://cdn.boot...
Vue基础入门与实例演示教程
Vue.js是一套构建用户界面的渐进式...创建一个新的Vue应用，我们需要在HTML文件中包含Vue库，并创建一个根元素，然后创建一个Vue实例，指定该实例挂载的DOM元素，以及定义数据对象和方法。 ```html {{ message }} ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值