02-Vue.js语法规范、转移和非转移输出、类名绑定、样式绑定、条件渲染、列表渲染、事件处理器、表单控件绑定

1、语法规范

• 双大括号语法中，可以写{{this.__data.msg}}、{{this.$data.msg}}、{{this.msg}}、{{msg}}
• _ _和$都是内部私有属性的一种标识，不希望外用

---

2、模板语法：

• mustache语法的大括号内支持写js

• null和undefined不会显示，其他数据类型都可以正常显示

• 挂载在window对象上的全局属性，如console、alert，都不能显示

• {{ }}中不写流程控制语句，如for、while等

• {{ }}支持三目运算、短路逻辑、运算符

• 在标签的属性前使用v-指令，就能实现属性的属性值可以直接写js语法，并且属性值中的数据相当于全局变量

• 数据想要操控DOM，就需要依赖指令，因为指令是直接绑定在dom上的

• v-text 非转移输出，无法解析xml数据

• v-html 转移输出，可以解析xml

• v-bind 将数据和属性进行单向数据绑定（类名绑定、样式绑定），将vue中数据赋给属性值

• 示例：
  <img v-bind:src = "src" />
<div v-bind:class = ""></div>
<div v-bind:style = ""></div>

• 简写：
  <img :src="src" alt=""/>

---

3、类名绑定

new Vue({
    el: '#app',
    data: {
      classA: 'size',
      classB: 'bg'
    }
  })

• 对象形式

      <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、样式绑定

new Vue({
    el: '#app',
    data: {
      styleObj: {
        width: '100px',
        height: '100px',
        background: 'purple'
      },
      size: {
        width: '200px',
        height: '200px'
      },
      bg: {
        background: 'blue'
      }
    }
  })

• 对象形式

      <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>
  

---

5、条件渲染

 new Vue({
    el: '#app',
    data: {
      flag: true,
      type: '美食',
      showFlag: true
    }
  })

• 单路分支 v-if

  <p v-if = "flag"> A </p>
  

• 双路分支 v-else

      <p v-if = "flag"> A </p>
      <p v-else > B </p>
  

• 多路分支 v-else-if

  	<p v-if = "type === '美食'"> 美食 </p>
      <p v-else-if = " type === '游戏' "> 游戏 </p>
      <p v-else> 睡觉 </p>
  

• 条件展示 v-show

  	<p v-show = " showFlag "> 条件展示 </p>
  

• 总结v-show和v-if

  • 效果一样
  • v-if控制的是元素是否存在，v-show控制的是元素的display属性
  • 当初始条件为假时，v-show的性能损耗较高
  • 项目中，如果切换频繁，使用v-show，否则使用v-if

---

6、列表渲染

• v-for指令

 new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        id: 1,
        name: 'aaaa'
      },
      json: [
        {
          id: 1,
          shop_name: '商品一',
          price: 1000000000
        },
        {
          id: 2,
          shop_name: '商品二',
          price: 200000000000000
        }
      ],
      lists: [
        {
          id: 1,
          shop_name: '手机',
          type: [
            {
              id: 1,
              maker: '小米'
            },
            {
              id: 2,
              maker: '华为'
            }
          ]
        },
        {
          id: 2,
          shop_name: '笔记本电脑',
          type: [
            {
              id: 1,
              maker: '雷蛇'
            },
            {
              id: 2,
              maker: '苹果'
            },
            {
              id: 3,
              maker: '联想 ThinkPad'
            }
          ]
        }
      ]
    }
  })

• 数组形式

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

• 对象形式

  <ul>
      <li v-for = "(item,key,index) of obj" :key = "index">
          {{ item }} -- {{ key }} -- {{ index }}
      </li>
  </ul>
  
  <ul>
      <li v-for = "item in json" :key = "item.id">
          <span> 商品名称： {{ item.shop_name }} </span>
          <span> 商品价格： {{ item.price }} </span>
      </li>
  </ul>
  

• 循环嵌套

  <ul>
      <li v-for = "item in lists" :key = "item.id">
          <h3>  商品类型： {{ item.shop_name }} </h3>
          <ul>
              <li v-for = "item in item.type" :key = "item.id">
                  <p> 制造商： {{ item.maker }} </p>
              </li>
              <!-- <li v-for = "ele in item.type" :key = "ele.id">
  					<p> 制造商： {{ ele.maker }} </p>
  				</li> -->
          </ul>
      </li>
  </ul>
  
  <h3> 循环number / string  </h3>
  
  <p v-for = "item in 10"> {{ item }} </p>
  <p v-for = "item in 'abc'"> {{ item }} </p>
  

• 总结：

  • 列表渲染参数最多可写三个 item key index
  • 列表渲染要在渲染元素属性里加一个key，作为整个元素唯一标识，最好不用index，因为删除一个元素后，index会发生改变，index不唯一
  • 循环嵌套时，参数名可以相同
  • in和of都可以使用

---

7、事件处理器

• v-on指令

new Vue({
   el: '#app',
   data: {
     a: 10,
     b: 20
   },
   methods: {
     // methods里面存储是事件处理程序
     fn () {
       alert('事件')
     },
     eventHandler ( e ) {
       console.log( e )
     },
     argumentHandler ( a,b,e ) {
       console.log( e )
       console.log( a + b )
     }
   }
 })

<div id="app">
    <button v-on:click = 'fn'> 点击 </button>
    <button @click = 'fn'> 点击 </button>
    <button @click = "eventHandler"> 事件对象 </button>
    <button @click = "argumentHandler( a,b,$event )"> 事件参数 </button>
</div>

• 事件修饰符

  • 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是常见的需求。好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
  • 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
  • 常见事件修饰符
    • .stop
    • .prevent
    • .capture
    • .self
    • .once
    • .passive
    • 自定义按键修饰符
      • Vue.config.keyCodes.f1=112
  • 示例：

   <div class="middle" @click.stop = "middleHandler">
       <div class="small" @click.stop = "smallHandler"></div>
   </div>
   <input type="text" @keyUp.13 = "getValue">
   <input type="text" @keyUp.enter = "getValue">
  

• 总结：

  • 当一个事件处理程序中有多个参数 且其中一个参数是事件对象时，那么调用这个方法时要添加一个实参$event与之对应

---

8、表单控件绑定

• v-model指令
  • 双向数据绑定
  • 只适用于表单，因为v-model默认绑定value属性

   new Vue({
      el: '#app',
      data: {
        msg: 'hello Vue.js'
      }
    })
  

  <div id="app">
      <input type="text" v-model = "msg">
      <p> {{ msg }} </p>
    </div>