Vue指令(一)

指令格式

以v-开始（比如v-cloak）

1、v-cloak指令

解决插值表达式存在的‘闪动’问题，原理为先隐藏，替换好之后再显示最终的值,如果不加这个指令，可能会先显示{{}},数据加载完成后再替换成最终值

html

<div id="app">
        <div v-cloak>{{msg}}</div>
</div>

css

[v-cloak] {
    display: none;
}

js

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello World!'
    }
});

2、v-text 填充纯文本

相比插值表达式更加简洁，且不会出现闪动问题

html

<div v-text='msg'></div>   //输出为Hello World!

3、v-html 填充HTML片段

存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以用

html

<div id="app">
    <div v-html='msg1'></div>
</div>

js

var vm = new Vue({
    el: '#app',
    data: {
        msg1: '<h1>HTML</h1>'
    }
});

4、v-pre填充原始信息

显示原始信息，跳过编译过程

html

    <div id="app">
        <div v-pre>{{msg}}</div>   //输出结果为{{msg}}
    </div>

js

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello World!',
    }
});

5、v-once 只编译一次

显示内容之后不再具有响应式（数据的变化导致页面内容的变化）功能
v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能

6、v-model 双向数据绑定

html

        <div>
            <input type="text" v-model="msg">
        </div>

7、事件绑定

1、vue如何处理事件
v-on指令用法：

<button v-on:click='num++'>点击</button>

v-on简写形式：

<button @click='num++'>点击1</button>

2、事件函数的调用方式
直接绑定函数名称

 <button @click='handle'>点击2</button>

调用函数

<button @click='handle()'>点击3</button>

3、事件参数传递

 <button @click='handle2(123,456,$event)'>点击4</button>

总结：如果事件直接绑定函数名称，那么会默认传递事件对象作为事件函数的第一个参数；如果事件绑定函数使用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

最终html代码：

    <div id="app">
        <div>{{num}}</div>
        <div>
            <button v-on:click='num++'>点击</button>
            <button @click='num++'>点击1</button>
            <button @click='handle1'>点击2</button>   //不需要传参时用
            <button @click='handle3()'>点击3</button>  //需要传参时用
             <button @click='handle2(123,456,$event)'>点击4</button>  //传参
        </div>
    </div>

最终js代码：

var vm = new Vue({
    el: '#app',
    data: {
        num: '0'
    },
    methods: {
        handle3: function() {
            //这里的this是vue的实例对象，即为vm
            this.num++;
        },
        handle2: function(p, p1, event) {
            console.log(this == vm)               //输出为true
            console.log(p, p1)                    //输出为123 456
            console.log(event.target.innerHTML)   //输出为点击4
            this.num++;
        },
        handle1: function(event) {
            console.log(event.target.innerHTML)  //输出为点击2
        }
    }
});

4、事件修饰符
阻止冒泡：

 <a @click.stop='click02'>点击1</a>

阻止默认行为：

<a @click.prevent='click02'>点击1</a>     //比如让a链接不跳转

5、按键修饰符
enter回车键：

<input type="text" v-on:keyup.enter='submit' v-model='pwd'>   //键盘按enter键执行submit方法

delete删除键：

<input type="text" v-on:keyup.delete='submit' v-model='pwd'>   //键盘按delete键执行submit方法

8、属性绑定

1、vue动态处理属性
v-bind指令用法：

<a v-bind:href='url'>百度</a>

缩写形式：

<a :href='url'>百度1</a>

js代码：

data: {
        url: 'http://www.baidu.com'
    },

2、v-model底层原理实现
底层实际上是v-bind和v-on分别做属性的绑定和事件的绑定

 <input type="text" v-bind:value='msg' v-on:input='handle02'>
 <input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>
 <input type="text" v-model='msg'>

 handle02: function(event) {
      this.msg = event.target.value;
  }

9、样式绑定

一、class样式处理

• 对象语法

<div v-bind:class='{active:isActive}'>测试样式</div>
<button v-on:click='handle03'>切换</button>   //点击切换按钮，控制active显示隐藏

.active {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.error {
    background-color: pink;
}

data: {
    isActive: true
 },
 methods: {
	  handle03: function() {
	      //控制active的值在true和false之间切换
	      this.isActive = !this.isActive;
	 }
 }

• 数组语法

<div v-bind:class='[activeClass,errorClass]'>测试样式</div>

data: {
        activeClass: 'active',
        errorClass: 'error'
  },

样式绑定相关语法细节：

• 对象绑定和数组绑定可以结合使用
• 1、

<div v-bind:class='arrClasses'></div>

data: {
        arrClasses: ['active', 'error']
 },

2、

<div v-bind:class='objClasses'></div>

data: {
        objClasses: {
            active: true,
            error: true
        }
  },

3、

<div class="base" v-bind:class='objClasses'></div>    //默认的base样式会保留

二、style样式处理

<div v-bind:style="objStyle"></div>

data: {
        objStyle: {
            border: '1px solid green',
            width: '200px',
            height: '100px'
        }
    },

遍历：