Vue的模板语法及指令的用法

模板语法 {{}}

即 {{}}
作用：在视图中渲染数据
注意：
 - 模板中是js环境（必须放表达式或值），不会去放语句。
 - 模板中的变量和函数必须是实例中的属性或者方法
 - 对于js全局函数，有些可以使用，有些不可以，即（白名单）：
 对于全局window下的方法Vue设置了白名单，只有在白名单下的方法，模板才可以使用。
 `白名单`：
 'Infinity,undefined,NaN,isFinite,isNaN,'+'parseFloat,parseInt,decodeURI,decodeURIComponent
 ,encodeURI,encodeURIComponent,'+'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,
 Set,JSON,Intl,' +'require'（摘自官网）
 - if结构不能用，if-else也不能
 if可以用逻辑运算符代替，即（&& 和 ||），这里涉及到短路运算（不懂的小伙伴可以私聊哦）
 if-else可以用三目运算符，即	a>b?c:d

指令

作用：扩展了普通html属性的功能（其用法跟自定义属性相同）
语法：v-指令名="值"

具体常用的Vue指令有：
+ v-model
将表单控件的value属性与Vue中的数据进行`双向绑定`
+ v-text
将元素的文本内容与一个Vue的数据进行绑定
这里需要注意的是：{{}}模板引擎和v-text都不会渲染富文本数据
+ v-html
同v-text，但v-html会渲染富文本数据
+ v-bind
将一个普通的任意标签的属性（可以是自定义属性）的值与Vue的一个数据进行绑定，可以简写成 :属性
+ v-on
将Vue元素的事件与Vue的方法进行绑定，可以简写成 @事件
绑定方法为：

<button @click="fn">按钮</button>
new Vue({
  methods:{
    fn(e){
      // 这种绑定方式 fn就是事件函数，第一个参数就是事件对象
    }
  }
})
<button @click="fn()">按钮</button>
// 需要传参的时候
new Vue({
  methods:{
    fn(){
      // 这种绑定方式 fn是普通调用，不再是事件函数，如果需要事件对象则手动传入$event,
      // $event是Vue给我们提供的,就是时间对象,$event 挂载到Vue.prototype上的
    }
  }
})
方法中改变数据
this.数据 = 值
eg:
 {
   data:{
     isShow:true
   },
   methods:{
     fn(){
       this.isShow = !this.isShow
     }
   }
 }
 另外，Vue还给我们提供了事件修饰符：
 .stop	阻止事件冒泡
 .prevent	阻止默认事件
 .capture	事件捕获阶段提前触发
 .self	只能自己触发，其后代元素无法触发
 .once	事件只触发一次

总结

以上就是常见指令，即
<元素 v-指令=“xxx”>
指令的值需要写在引号中，且：
1.为js环境
2.里面可以写表达式，不能用语句
3.全局函数中只能使用白名单中的
即相当于模板中的语法，但v-model有点特殊，小伙伴们可以摸索一下。