插值绑定{{message}}或者<span v-bind:title="message">“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致                     ”v-on 指令:事件监听器.字符串反转:reverseMessage: function(){  this.message = this.message.split('').reverse().join('')  }

1.数据与方法                                                                                                                                                                                                             property要设置初始值否则不会响应式修改。比如data:{ a:'' , b:'' }                                                                                                                                 唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。                                                                 实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。                                                                                                     $watch 是一个实例方法 vm.$watch('a', function(newValue, oldValue){   // 这个回调将在 `vm.a` 改变后调用 })

2.生命周期，函数 :fuction(){ //this需要，所以不能是使用箭头函数,this 会作为变量一直向上级词法作用域查找，直至找到为止}

3.插值{{ //v-once一次性插值 }} 。           <span v-html="lizi"></span> //v-html只能对绝对信任的可用，用来输出真正的html，需要复合组件使用。       给html标签添加属性: v-bind:属性="标签的值",对于布尔型，如果值不是true,<button v-bind:disabled="isButtonDisabled"> 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。可以使用js表达式，例如{{ ok ? 'YES' : 'NO' }}；{{ message.split(' //拆分 ').reverse( //反序 ).join(' //结合 ') }}

4.指令，缩写，v-bind: v-on@

5.计算属性会有缓存，方法不会，但响应速度不如计算属性。但计算属性不是响应式依赖就无法进行更新。

计算属性：computed: { // 计算属性的 getter    reversedMessage: function(){ // `this` 指向 vm 实例    return this.message.split('').reverse().join('')  } }   方法：methods: { reversedMessage: function(){ return this.message.split('').reverse().join('')  }  }   

计算属性默认只有getter，get:function()，也可以给一个setter

6.class与style绑定

对象语法：<div class=""  v-bind:class="{ active : isactive }"></div> 取决于isactive是true还是false，可以与普通的class共存。可以用三元表达式数组语法[ isactive ? activeclass:' ' , noclass:' '] ，数组语法中也可以使用对象语法 [ {isactive : activeclass} noclass:' '] 。 也可以用在组件上。当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

内联样式 v-binds:style(:style)="{ color : color ; fontSize : fontSize + 'px'}",三元表达式和数组语法都可以。

7.条件渲染 v-if v-show 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。注意，v-show 不支持 <template> 元素，也不支持 v-else。v-if可以和template使用条件渲染分组。    v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

8.列表渲染 v-for xx in xxs  。 数组更新检测变更方法会触发视图更新。push() pop() shift() unshift() splice() sort() reverse() 。 替换数组会更新原数组，但是filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。在计算属性computed不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法。

在组件上使用 v-for 时，key 现在是必须的。任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop。