vue指令

s指令

指令： ( 是绑定在dom属性上 )

v-show

    可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）
     <h3> v-show </h3>
     <p v-show = "showFlag"> v-show指令 </p>

      var vm = new Vue({
   el: '#app',//给跟实例一个模板（ 挂载 ）
   data: { 
     showFlag: true，
   }
 })

v-html

    v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了  innerHTML ）)

v-text

    v-text：可以将一个数据展示在一个dom的内容中（ 相当于使用了  innerHTML ）
    条件渲染的指令

v-if

可以控制一个dom的存在与否（ 创建 和 销毁 
    v-if  vs  v-show 区别
    - v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
          - v-show 操作的是dom元素的display属性
          - v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
          - v-show 只能写一个单路形式

     实用： 项目中 如何选择这两个使用
          一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
          因此，如果需要非常频繁地切换，则使用 v-show 较好；
          如果在运行时条件很少改变，则使用 v-if 较好。

v-if 举例

    <div id="app">
    <h3> v-if - 单路分支 </h3>
      <p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
    <h3> v-if - 双路分支 </h3>
      <p v-if = "ifFlag">  双路分支 成立  </p>
      <p v-else> 双路分支不成立 </p>
    <h3> v-if - 多路分支 </h3>
    <p v-if = " type === 'A'"> A </p>
    <p v-else-if = " type === 'B'"> B </p>
    <p v-else> C </p>
    </div>


   var vm = new Vue({
    el: '#app',//给跟实例一个模板（ 挂载 ）
    data: { 
      ifFlag: false,
      type: 'A'
    }
  })

v-for

​ 列表渲染（ 循环 ）

  1. 数组  v-for = " (item,index) in arr "       item是arr中每一个元素
  2. 对象  v-for = "(item,key,index) in obj "        item是obj的属性值
  3. json类型数据
  4. 嵌套类型数据

v-for 举例

    <div id="app">
    <h3> 数组 </h3>
    <ul>
      <li v-for = " (item,index) in arr ">
        <p> item :{{ item }} --  index: {{ index }}</p>
      </li>
    </ul>
    <hr>
    <h3> 对象 </h3>
    <ul>
      <li v-for = "(item,key,index) in obj"> 
        <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> json </h3>
    <ul>
      <li v-for = "(item,index) of json">
        <p> id: {{ item.id }} </p>
        <p> task: {{ item.task }} </p>
        <p> {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> 嵌套 </h3>
    <ul>
      <li v-for = " item in lists ">
        <p> id: {{ item.id }} </p>
        <ul>
          <li v-for = "todo in item.todos">
            todos中的数据 -- {{ todo }}
          </li>
        </ul>
      </li>
    </ul>
    </div>


    new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        id: 1,
        name: '骏哥',
        sex: 'man',
        age: 18
      },
      json: [
        {
          id: 1,
          task: '敲代码1'
        },
        {
          id: 2, 
          task: '敲代码2'
        }
      ],
      lists: [
        {
          id: 1,
          todos: {
            id: 1,
            name: '连城'
          }
        },
        {
          id: 2,
          todos: {
            id: 2,
            name: '文武'
          }
        }
      ]
    }
  })

key

给每一个循环的列表添加一个唯一的标识
通过v-bind来绑定
如果有id，那么我们就使用id，如果没有，我们才会选择index
v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上

          <div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>
   简写： <div v-for = " (item,index) in lists" :key = " item.id "></div>

vue中给dom添加类名

1 直接在dom上绑定类名

2 通过对象的形式绑定类名：
  格式： v-bind:class = "{ 属性： boolean }"
  格式： v-bind:class = "{ [data]： boolean }"
  v-bind:可简写为 :
  例：
   <style>
    .size{
      width: 100px;
      height: 100px;
    }
    .bg_color{
      background: red;
    }
  </style>

<div id="app">  
  <p :class = "{ size: true, bg_color: true }"></p>或者
  <p :class = "{ [size]:true, [bg_color]:true }"></p>
</div>

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

3:通过数组的形式绑定类名：
  格式： v-bind:class = "[ 数据 ]" 
  例：<p :class = "['size','bg_color']"></p>
  注：类名绑定不会覆盖原先的类名

vue中给dom绑定样式

v-bind: style = “”

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

  1. 对象的形式
  <div id="app">
      <p :style = "{ width: size.width,height: size.height,background: 'red'}"></p> 
  </div>  

  2. 数组的形式
   <div id="app">
     <p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>
   </div>  

vue 中添加事件

v-on 简写：@

  格式：v-on:eventType = " handlerName "
  直接在标签中绑定： <div v-on:click = "事件名称"></div>

  附： 事件对象也可以正常使用

      在事件处理程序中， 写e就可以了

      问题： 如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现

      分析： 我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined

      解决： 在函数执行时，传入一个实际参数 $event 来代表事件对象

vue中修改数据

 <div id="app">
    <button @click = "add"> + </button>
    <button @click = "remove"> - </button>
    <button @click = "indexHandler"> 修改第二条数据 </button>
    <ul>
      <li v-for =" item in lists " :key = "item.id">
        {{ item.task }}
      </li>
    </ul>
    <hr>
    <button @click = "arrChange"> 修改第二条数据 </button>
    <ul>
      <li v-for = " (item,index ) in arr " :key = "index">
        {{ item }}
      </li>
    </ul>
  </div>

  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3],
      lists: [
        {
          id: 1,
          task: '锻炼1'
        },
        {
          id: 2,
          task: '敲代码'
        }
      ]
    },
    methods: {
      add () {
        // console.log( this )
        this.lists.push({
          id: this.lists.length + 1,
          task: '打篮球'
        })
      },
      remove () {
        this.lists.pop()
      },
      indexHandler () {
        //将列表中的第二个数据中的task任务修改为 撸猫
          this.lists[1] = {
            id: 2,
            task: '骏哥'
          }
        
          // 将整个列表清空
          // this.lists.length = 0

          // this.lists.splice( 0 )
      },
      arrChange () {
        // this.arr[ 1 ] = '骏哥'  不可以检测到的

        // this.$set( this.arr,'1','骏哥' )
        Vue.set( this.arr,'1','骏哥')
      }
    }
  })

注：问题： 我们直接修改一个数组下的一个数据时，发现下标不能检测变动了

    解决方法： 使用 Vue.set / this.$set