常用的vue指令

1：v-text和v-HTML

作用： 给元素设置内容

v-text='data中的数据',给元素设置内容 相当于innerText，它是渲染字符串，会覆盖原先的字符串

v-html="data中的数据" 给元素设置内容 支持标签 相当于innerHTML，是渲染为html

例如：

<div id="app">
      <div>{{ msg }}</div>
      <div v-text="msg">123</div>
      <div v-html="msg"></div>
      <div v-html="foo"></div>
      <div v-text="foo"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello world',
          foo: '<p>我是一个段落<p>',
        },
      })
    </script>

 2：v-show与v-if 、v-else 、v-else-if

作用：控制元素的显示和隐藏

v-show控制元素显示与隐藏 通过css display属性来设置显示或隐藏

v-if控制元素显示与隐藏 通过js dom元素创建和移

注意！：频繁切换的话使用v-show减少渲染带来的开销

v-if、v-else-if都是接受一个条件或布尔值，v-else不需要参数。类似if else-if

例如：

<div id="app">
      <div v-show="isShow">已登陆</div>
      <div v-if="isShow">已登陆</div>
      <p v-if="age>=18">成年人</p>
      <p v-else>未成年</p>
      <div v-if="age<=12">儿童</div>
      <div v-else-if="age<=30">青年</div>
      <div v-else-if="age<=60">中年</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          isShow: true,
          age: 40,
        },
      })
    </script>

3：v-on

作用：绑定事件

语法: v-on:事件类型="函数名"

简写：@事件类型=“函数名”

注意：是把 v-on： 这里个整体简写成@

例如：

<div id="app">
      <button @click="fn">点我</button>
      <button v-on:click="count++">+1</button>
      <span>{{ count }}</span>
      <button v-on:click="count--">-1</button>
      <button v-on:click="fn2">-1</button>
      <button v-on:click="fn3(10,$event)">传参数</button>
      <button v-on:click="fn4">传参数</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello world',
          count: 0,
        },
        // 定义方法
        methods: {
          // fn: function() {}
          fn() {
            alert(123)
          },
          fn2() {
            console.log(this) // this指向vue实例
            this.count--
          },
          // 函数调用时候假如 有其他参数  我们需要$event才可以拿到事件对象
          fn3(num, e) {
            console.log(num)
            console.log(e)
          },
          // 不传参 e拿到事件对象
          fn4(e) {
            console.log(e)
          },
        },
      })
    </script>

4：v-bind  

可以将标签内的属性值解析成js代码

如果给属性值设置为一个变量，那么可以使用v-bind，可以缩写成 :属性名=“变量”

例如：

<div id="app">
      <img v-bind:src="imgSrc" alt="" />
      <img :src="imgSrc" alt="" />
      <div :class="className"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          className: 'demo test',
          imgSrc: 'https://img03.sogoucdn.com/app/a/201025/b57f8208c4a3274b63d6a9108bc33573'
        },
      })
    </script>

5：v-for

v-for可用来遍历数组、对象、字符串。

语法： “（item，index）in list”：key="index"

给每个元素添加唯一的key，key一般取数据id,假如没有id那么可以用index

可用于数据中有多少就遍历多少个dom元素出来

 <div id="app">
      <ul>
        <!-- v-for指令 给每个元素添加唯一的key  key一般取数据id 假如没有id 可以用index-->
        <li v-for="(item, index) in list" :key="index">{{index}}-{{ item }}</li>
      </ul>
      <ul>
        <li v-for="(item, key) in zs">{{ key }}-{{ item }}</li>
      </ul>
      <p v-for="item in 10">{{ item }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          list: ['西游记', '水浒传', '红楼梦', '三国演义'],
          zs: {
            name: 'zhangsan',
            age: 20,
            sex: '男',
          },
        },
      })
    </script>

6:v-model

双向数据绑定 

顾名思义，双向数据绑定就是表单里面的内容和数据实现绑定，可以通过改数据来改变表单里面的内容，也可以通过更改表单里面的内容来改变数据

 <div id="app">
      <input type="text" v-model="username" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          username: 'lily',
        },
        methods: {
          fn(e) {
            console.log(e.target.value)
            this.username = e.target.value
          },
        },
      })
    </script>