vue常用指令劫介绍

vue指令

我们都知道，vue是一个非常好用的框架，他给我们封装了很多好用的指令，自我体验是非常不错的，我们只要写少量代码，就能实现很理想的功能，这是因为vue在背后偷偷的帮我们做了很多操作

一、插值表达式

1、Mustache

<span> Message: {{ msg }}</span>

标签内容将被替代为数据对象上 msg属性的值，当msg属性发生改变时，插值处的内容会更新
双大括号里可以写简单的js表达式，如：

{{ 1 + 1}}
{{ num + 2}}
{{ num === 1 ? 'yes' : 'no'}}
......

2、v-html

<p v-html="rawHtml"></p>

双大括号会将数据解释为普通文本，v-html就是将数据解释为html

<p v-html="msg"> {{ msg1 }}</p>

当 v-html 和 {{}} 冲突时，会显示 v-html 里面的内容

3、v-text

v-text和双大括号一样，都是解析成普通文本，但是他的写法和v-html一样，当v-html和v-text冲突时，谁写的靠后解析谁

二、v-for – 列表渲染

列表渲染就是遍历数据，可以是数组，对象，字符串，数字（特殊），其中使用for in 或者for of 效果都是一样的，可以根据个人习惯

需要特别注意一点，如果需要跟踪每个节点的身份，需要绑定一个属性key，理想的key值是每项都有唯一的id

1、遍历数组

index是索引值，可以省略

    <ul>
      <li v-for="(data, index) in arr" :key="index">{{index}}: {{data}}</li>
      <!-- 在这里我们使用indx来作为key值 -->
    </ul>

2、遍历对象

value是值，key是键，index是索引，key和index可省

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

3、遍历字符串

<ul>
  <li v-for="(char, index) in str">{{index}}: {{char}}</li>
</ul>

4、遍历数字（特殊）

    <ul>
      <li v-for="n in 20">{{n}}</li>
    </ul>

js代码实例：

new Vue({
    ...
    data: {
        arr: [1,2,3,4,4,5,5],
        obj: {
            x: 1,
            y: 2,
            z: 4
        },
        str: 'hello vue'
    }
})

三、v-if和v-show – 条件渲染

他们都能实现元素的显示和隐藏，v-if是通过条件判断是否渲染元素，而v-show是通过display属性来决定显示的,如果要频繁切换元素显示，v-show比较合适

有v-if，肯定会有v-else-if，v-else。他们必须是相邻的兄弟元素

<!-- v-if -->
    <p v-if="num > 0">num大于零</p>
    <p v-else-if="num < 0">num小于零</p>
    <p v-else>num等于零</p>
    
<!-- v-show -->
    <p v-show="isShow > 0">v-show案例</p>

js代码示例：

new Vue({
    ...
    data: {
        num: 0,
        isShow: true
    }
})

四、v-on – 事件处理

v-on可以简写成（@）

    <button v-on:click="isShow = !isShow">显示/隐藏弹框</button>
    <button @click="handleBtnClick">显示/隐藏弹框</button>
    <button @click="handleBtnClick2($event, 123)">显示/隐藏弹框</button>
    <p v-show="isShow">这是一个弹窗</p>

如果绑定事件的时候不加小括号，那么函数只能接受一个形参(事件对象)，如果加了小括号，要想的到事件对象，则必须传一个参数($event)，这个事件对象和原生的基本一致
js代码示例：

new Vue({
	...
    data: {
        isShow: false,
        data: 'sajkhfajsbf'
    },
    methods: {
        handleBtnClick (e) {
            console.log(e)
               
            this.isShow = !this.isShow
        },
        handleBtnClick2 (e, num) {
            console.log(e)
            console.log(num)
        }
    }
})

五、v-bind – 绑定属性

v-bind 可以用来绑定任意属性，包括自定义属性

v-bind可以简写成（:）

    <div v-bind:style="width: divWidth">box1</div>
    <!-- 样式绑定一个对象，也可以和原生样式一起使用，最终会渲染结果会合并 -->
    <div :style="styleObj" style="color: #fff">box2</div>
    
    <!-- 可以直接把data党组class使用 -->
    <div :class="className"></div>
    <!-- 三木运算表达式绑定class -->
    <div :class="active ? 'ac' : ''"></div>
    <!-- 可以绑定数组或对象,还可以数组里面嵌套对象 -->
    <div :class="{active: active}"></div>
    <div :class="[className, className2, {ac: active}]"></div>

js代码示例：

new Vue({
    ...
    data: {
        divWidth: '200px',
        styleObj: {
          height: '300px',
          width: '300px',
          backgroundColor: 'red'
        },
        active: false,
        className: 'current',
        className2: 'current2'
    }
})

六、v-model – 双向绑定表单数据

表单中不需要手动输入值的元素，v-model是双向绑定表单元素的value值，所以务必填写value值，像text框可以手动输入的元素，可以不写value值

<p>
     <input type="text" v-model="username">
     {{username}}
</p>
<p>
    <select v-model="likes">
        <option value="唱">唱</option>
        <option value="跳">跳</option>
        <option value="rap">rap</option>
        <option value="篮球">篮球</option>
    </select>
    {{like}}
</p>
<p>
    <label><input v-model="likes2" type="checkbox" value="唱">唱</label>
    <label><input v-model="likes2" type="checkbox" value="跳">跳</label>
    <label><input v-model="likes2" type="checkbox" value="rap">rap</label>
    <label><input v-model="likes2" type="checkbox" value="篮球">篮球</label>
     {likes}}
</p>
<p>
    <label><input type="radio" v-model="sex" value="男">男</label>
    <label><input type="radio" v-model="sex" value="女">女</label>
</p>

js代码示例：

new Vue({
    ...
    data: {
        username: '',
        likes: [],
        likes2: [],
        sex: ''
    }
})

这里呢，之介绍了最常用的指令，有不懂的可以留言也可以去vue官网查证哟！！
vue网址参考：https://cn.vuejs.org/v2/guide/