1.Vue实例的选项
el
作用:当前Vue实例所管理的html视图值:通常是id选择器(或者是一个 HTMLElement 实例)不要让el所管理的视图是html或者body!data
Vue 实例的数据对象，是响应式数据(数据驱动视图)可以通过 vm.$data 访问原始数据对象Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a视图中绑定的数据必须显式的初始化到 data 中methods
其值为可以一个对象可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined代码演示
<div id="a"> {{msgA}} -- {{fn1()}} </div> <script src="./vue.js"></script> <script> const vm = new Vue({ // el作用:指定当前Vue实例所管理的视图,值通常是id选择器 // 1. el的值可以是css选择器,通常是id选择器 // 2. el的值不能是html标签和body标签 el: '#a', // data作用:指定当前Vue实例的数据对象 // 1. data中的数据是响应式数据 // 2. 值可以是一个对象 {属性: 值} // 3. 所有数据部分写在data中 // 4. 在当前Vue实例所管理的视图中通过属性名使用data中的数据 // 5. 可以通过vm.$data.属性 访问数据 // 6. 可以通过vm.属性 访问数据(更简单) data: { msgA: '第一个Vue实例对象' }, // methods作用:指定当前Vue实例中的方法 // 1. 可以直接通过vm实例访问这些方法， // 2. 方法中的 this 自动绑定为 Vue 实例。 // 3. 不推荐使用箭头函数 methods: { fn1: function() { console.log(this.msgA); console.log('vm实例中的methods里的fn1方法被调用'); }, fn2: function() { this.fn1(); console.log('fn2方法被调用--'); }, fn3: () => { console.log(this); } } }); // 调用fn2方法 vm.fn2(); // 调用fn3方法 vm.fn3(); </script>除了以上常用的三个Vue实例选项, 还有很多选项,后续课程会陆续讲解
2.术语解释
插值表达式
作用:会将绑定的数据实时的显示出来:
通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
{{js表达式、三目运算符、方法调用等}}
不能写 var a = 10; 分支语句 循环语句
<div id="app"> <!-- 在插值表达式中可以访问vm实例中data里面的属性 --> {{message}} <p>{{message}}</p> <p>{{message+'啦啦啦'}}</p> <p>{{age>18?'成年':'未成年'}}</p> <p>{{message.split("")}}</p> <!-- 在插值表达式中不能写js语句 --> <p>{{var a = 10}}</p> </div> <!-- 引入vue.js --> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { message: '我是data中的message属性的值', age: 20 } }); </script>插值表达式中不能写js语句, 如var a = 10;
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。
指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
Vue框架提供的语法
扩展了HTML的能力
减少DOM操作
<div id="app"> <p> {{message}}</p> <!-- v-on就是vue给标签元素提供的扩展-指令 v-on指令就是给标签绑定事件,这里是click, 当事件处于点击状态时,出发methods中的changeMsg方法 --> <button v-on:click="changeMsg">按钮</button> </div> <!-- 引入vue.js --> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { message: '我是data中的message属性的值', age: 20 }, methods: { changeMsg: function() { this.message += "啦"; } } }); </script>