Vue指令

一、模板的用法

用法

属性前加 v （指令【 借鉴angular 】）

js的支持性

1. null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的
2. 挂载在window身上的全局属性，我们都不能用的： 比如; console alert
3. mustache语法中 不写流程控制
   for
   if
   while
   do…while
4. mustache(模板 {{ }} )语法中支持三元表达式，同样也支持运算符
   短路原则也是支持的。

 <p> {{ 5 > 3 ? '真':'假' }} </p>
 <p> {{ 5 > 3 && '真'||'假' }} </p>

指令

---

指令的目的是做什么： 操作DOM （解释 : MVVM vm -> v 数据驱动）

1. v-html：转义输出，也就是可以解析 xml 数据
2. v-text：非转义输出，也就是无法解析 xml 类型数据
3. v-bind：将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值

• img 图片的src

<img v-bind:src="src" alt="">
<img :src="src" alt="">

• class 类名绑定

  • 对象形式用法

   <p :class = "{ bg: true,size: true }"></p>
   <p :class = "{ bg: true,size: false }"></p>
   <p :class = "{ [classA]: true,[classB]: true }"></p>
  

  • 数组形式用法

     <p :class = "[ 'size','bg' ]"></p>
     <p :class = "[ classA,classB ]"></p>
     <p :class = "[ classA,classB,5>3?'a':'b']">  </p>

4. style 样式绑定

• 对象形式用法

    <p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
    <p :style = "styleObj"></p>

• 数组形式用法

    <p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
    <p :style = "[size,bg]"></p>

条件渲染

---

1. v-if （添加或移除） — 频繁切换的时候使用
2. v-else-if
3. v-else

    <div>
	  <input type="text" v-model = "type">
      <p v-if = " type == 'A' "> A </p>
      <p v-else-if = " type == 'B' "> B </p>
      <p v-else> C </p>
     </div>
<script>
  new Vue({
    el: '#app',
    data: {
      info: 'NBA事件',
      xml: '<font style = "color: red;"> xml数据 <font>',
      f: true,
      type: 'A'
    }
  })
</script>

4. v-show 条件展示 （操作 display：none ）— 不怎么频繁使用

<p v-show = "f"> 昨天很累 </p> 
<script>
  new Vue({
    el: '#app',
    data: {
      info: 'NBA事件',
      xml: '<font style = "color: red;"> xml数据 <font>',
      f: true,
      type: 'A'
    }
  })
</script>

列表渲染

---

v-for 指令

//for-of
<ul>
    <li v-for = "(item,index) of arr" :key = "index">
       {{ item }} -- {{ index }}
    </li>
</ul>

//for-in
<ul>
  <li v-for = " item in 10" > {{ item }} </li>
</ul>
//for-in遍历对象的item key index
<ul>
  <li v-for = "(item,key,index ) in obj" :key = "item.card">
    <p> item -- {{ item }} --  key -- {{ key }} -- index -- {{ index }}</p>
  </li>
</ul>

//一般用for-in遍历

其中的 key 的重要性：

给列表渲染的每一层Vdom添加一个唯一标识，以便diff算法进行同层级比较

表单控件绑定

---

v-model 指令

双向数据绑定
VM 改变 V随之改变
V改变， VM也随之改变

v-model只用于表单

理由： v-model默认绑定value属性
 技巧： 看到表单直接 v-model

事件处理器

---

v-on 指令
一个完整的事件： 事件源、事件类型、事件处理程序
事件的使用流程：
先写事件处理程序(在methods中)，在去绑定dom

事件处理程序我们都放在了methods选项中
v-on:click = "方法名称"  
简写为  @click = "方法名称"   //于是大胆猜测，简写是不是因为@   action

<button v-on:click = "incremnt"> 点击 </button>
<button @click = "incremnt"> 点击 </button>

当一个事件有事件对象，又有普通参数时，那么在调用方法时，需要传入$event

eg: getNum(n,$event)

其他指令

---

v-pre
原样输出，不解析vue模板，跳过编译过程

<p v-pre>
      {{ info }}
</p>

v-cloak
解决了 v-text 中花括号闪现问题

<style>
    [v-cloak] {
      display: none;
    }
</style>

<p v-cloak> {{ info }} </p>

v-once
只渲染一次，只保留第一次元素和组件的渲染

<p v-once> {{ num }} </p>