1. 概念
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。能够为复杂的单页应用提供驱动。
2. 用法
2.1 声明式渲染
2.1.1 改变文本 {{ message }} 打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{ message }} </div> <script src="vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
扩展：
模板渲染方式：
生成的dom 替换了容器内容 #app 又称为挂载点
同名数据访问优先级：data - methods - computed
2.1.2 绑定元素特性（属性） v-bind:title="message"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> <script src="vue.js"></script> <script> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } }) </script> </body> </html>
2.2 条件与循环
2.2.1 条件 v-if="seen" Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> <script src="vue.js"></script> <script> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) </script> </body> </html>
2.2.2 循环 v-for="todo in todos" {{ todo.text }}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script src="vue.js"></script> <script> var app4 = new Vue({ el: '#app-4', data: { todos: [{ text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) </script> </body> </html>
2.3 处理用户输入
2.3.1 处理组件内部数据 v-on:click="reverseMessage"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button> </div> <script src="vue.js"></script> <script> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script> </body> </html>
2.3.2 双向绑定 v-model="message"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> <script src="vue.js"></script> <script> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) </script> </body> </html>
扩展：
input 的自定义双向绑定： ：value @input="fn" （等价于 v-model ：语法糖，定义动态数据，然后监听数据变化，fn 实现 当前 target.value = this.value）
2.4 组件
2.4.1 静态数据 Vue.component('todo-item', { template: '<li>这是个待办项</li>' }) <todo-item></todo-item>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app-7"> <ol> <todo-item></todo-item> </ol> </div> <script src="vue.js"></script> <script> Vue.component('todo-item', { template: '<li>这是个待办项</li>' }) var app7 = new Vue({ el: '#app-7' }) </script> </body> </html>
2.4.2 动态数据 从父作用域将数据传到子组件 prop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的。 我们也需要为每个组件提供一个“key”，稍后再 作详细解释。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ol> </div> <script src="vue.js"></script> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [{ id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其它什么人吃的东西' } ] } }) </script> </body> </html>
more1:
props 可配置校验规则：
props:{
name:{ type:String,require:true,default:'your name' },
age:{ type:Number,validator(val){ return val > 0 } }
}
more2:
复杂数据：打包处理
父组件数据结构：mes:{name:'ww',age:'11'} , 子组件传递属性使用 v-bind = "mes" 替代 :name="mes.name" ...
2.4.2.1 实际应用 组件呈现形态
<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>
2.5 数组的变异方法： 动态改变 arr 数据 （不能通过改变长度及末尾添加赋值等操作来改变数组）
pop、push、shift、unshift、splice、sort、reverse （vue 内部重写了数组的这几个方法，执行时会添加渲染执行函数）
对象的改变方式：vm.$set ( vm.$set(obj,name,val) )
2.6 扩展：
vue dom的渲染是异步的，渲染完成函数 vm.$nextTick()
ref = 'idName' - this.$refs['idName'] ( ele ) vue 实例
3. 相关文章