Vue的基础语法学习和总结

声明式渲染

1. 数据绑定的形式：Mustache语法（双大括号）的文本插值；

<template>
   {{message}}
</template>

<script>
var app = new Vue({
    el:"#app",
    data:{
      message:'Hello Vue'
    }
});


</script>

2.

Vue生命周期钩子：

  beforeCreate

  created

  beforeMount

  mounted

  beforeUpdate

  updated

  beforeDestroy

  destroyed

3. v-指令：表示Vue提供的特殊属性Attribute；

1. v-bind 绑定值，v-bind:title 缩写:title，表示一个js表达式而不是字符串；
2. v-for 循环，绑定数组的数据，渲染一个项目列表，v-for的优先级高于v-if；
3. v-on 事件监听，v-on:click缩写@click
4. v-model 双向数据绑定，本质上是v-on:input 和v-bind 的语法糖；
5. v-once 执行一次性地插值，当数据改变时，插值内容不会更新
6. v-html 
7. v-if  条件渲染，切换开销更大；
8. v-show 条件展示，不同于v-if，v-show始终被渲染，只是切换元素的display属性，初始渲染开销更大；

4. 修饰符(modifier)  .  

     用于指出一个指令应该以特殊方式绑定 ；

1.  .prevent修饰符： 对于触发的事件调用event.preventDefault();
2.  .stop ：阻止单击事件继续传播;
3.  .capture ：添加事件监听器时使用事件捕获模式;
4.  .self ：只有当event.target是当前元素自身时才触发处理函数;

5. .native ：根元素上监听一个原生事件;

6. .sync ：带有.sync修饰符的v-bind不能和 表达式 一起使用，只能提供想要绑定的property名，例如 ： v-bind:title.sync ='doc.title' ;