vue指令总结，指令详解,v-text,{{}},插值表达式,v-html,v-bind,v-on,v-model,v-if,v-show,v-for

vue中有很多指令，那么，何为指令？指令：模板语法，用于辅助开发者渲染页面基本结构

vue中根据不同用途可将指令分为六大类：

目录

1 内容渲染指令

        1 v-text

        2 插值表达式{{}} 

        3 v-html

2 属性绑定指令 v-bind

3 事件绑定指令 v-on

4 双向绑定指令v-model

5 条件渲染指令

        1 v-if

        2 v-show

6 列表渲染指令

---

1 内容渲染指令

作用：用来辅助开发者渲染 DOM 元素的文本内容，常见的有三种

ps:下面的vue实例代码是下面v-text，{{}}，v-html三个代码示例对应的vue示例，为了防止重复，就写在这了

 const vm = new Vue({
      el: '#app',
      data: {
        username: 'zhangsan',
        gender: '女',
        info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习 vue.js</h4>'
      }
    })

        1 v-text

将对应的值（v-text里面的是变量名）渲染到对应标签里，具有覆盖性，即会覆盖元素内默认的值

代码示例：

<div id="app">
    <!--username，gender是变量名 -->
    <p v-text="username"></p>
    <!-- v-text对应的gender的值会覆盖掉文本“性别”-->
    <p v-text="gender">性别</p>
</div>

        2 插值表达式{{}} 

使用插值表达式，会将对用的值渲染到元素的内容结点中，并且不会覆盖元素内默认的值

代码示例：

<div id="app">
    <!--该用法开发中最常用 -->
    <p>姓名：{{ username }}</p>
    <p>性别：{{ gender }}</p>
  </div>

        3 v-html

以上两种指令只能渲染纯文本内容。v-html会把包含 HTML 标签的字符串渲染为页面的 HTML 元素, 而非简单的字符串

代码示例：

<div id="app">
    <div>{{ info }}</div>
</div>

---

2 属性绑定指令 v-bind

插值表达式只能在内容区域用（<>这里<>），如果在属性里用就不行了（如：<input type”text” placeholder=”{{dataa}}”>,这种用法不会生效）

为了在属性里也能使用data里的数据，我们可以使用v-bind：

代码示例：

<input type”text” v-bind:placeholder=”dataa”>

 const vm = new Vue({
      el: '#app',
      data: {
        dataa:"这是一个placeholder"
      }
    })

意味给placeholder属性动态绑定数据（此种情况就用v-bind）

Ps:  v-bind:可简写为:

<input type”text” :placeholder=”dataa”>

---

3 事件绑定指令 v-on

  v-on事件绑定指令：用来辅助程序员为DOM元素绑定事件监听
语法格式：v-on:事件名称="事件处理函数的名称"

代码示例：

<button v-on:click="addCount">+1</button>

 const vm = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      // methods 的作用，就是定义事件的处理函数
      methods: {
        //addcount:function(){}这种写法也行
        addCount{
          // 在 methods 处理函数中，this 就是 new 出来的 vm 实例对象
          console.log(vm)
          vm.count += 1
        }
      }
    })

Ps: v-on: 可简写为@:

@事件名称="事件处理函数的名称"

---

4 双向绑定指令v-model

用来辅助开发者在不操作dom的前提下，快速获取表单数据，为双向绑定

v-bind是单向绑定
只有表单元素使用v-model才有意义：1 input输入框 2 textarea 3 select

例子：

<!--username为data里的数据 -->
<input type="text” v-model="username"/>

---

5 条件渲染指令

用来辅助开发者按需控制 DOM 的显示与隐藏

有两个：1 v-if 2 v-show

区别： v-if（用的更多）:直接移出元素；

            v-show（频繁切换元素显示状态时性能更好）:改属性值display:none

        1 v-if

代码示例：

 <div id="app">
    <p v-if="flag">这是被 v-if 控制的元素</p>
 
 </div>

 const vm = new Vue({
      el: '#app',
      data: {
        // 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素
        flag: false
      }
    })

        2 v-show

代码示例：

 <div id="app">
    <p v-show="flag">这是被 v-show 控制的元素</p>
  </div>

 const vm = new Vue({
      el: '#app',
      data: {
        // 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素
        flag: false
      }
    })

---

6 列表渲染指令

v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

用法：

v-for 指令需要使 用 item in items 形式的语法，其中： items 是待循环的数组  item 是被循环的每一项

代码示例：

<li v-for="item in list">姓名是：{{item.name}}</li>

 const vm = new Vue({
      el: '#app',
      data: {

        list:[
	        {id: 1,name:'haha'},
	        {id: 2,name:'nana'},
            ]
      }
    })