Vue---指令篇~~

v-bind绑定属性之类的，不介绍了，

v-once 指令

在第一次 DOM 渲染完成后，数据将被视为静态内容，当数据改变时，插值处的
内容不会更新。数据在传递过程中，受到不同场景的影响可能会发生改变，采用 v-once 指令可以避免此类情
况的发生。无论页面如何，这个值都不会改变

<div id="app">
<p v-once> 第一次绑定的值：{{message}}</p>
<input type="text" v-model="message">
</div>

var vm = new Vue({
el: '#app',
data: {
message:' 格莱科技 ',
}
})

上述代码中，添加 v-once 指令后，文本框中输入的结果不会直接反映到插值处。

v-cloak 指令

v-cloak 指令是在 Vue.js 渲染完指定的整个 DOM 后才进行显示，它必须和 CSS 样式一起使用，一般用
于页面在渲染数据加载过程中导致插值双大括号暴露在页面中，此时可以通过 v-cloak 指令来解决。
css代码

[v-cloak] {
display: none;
}

html代码

<p v-cloak>{{ message }}</p>

注：v-cloak 指令并不是在每个需要渲染数据的标签都添加这个指令，只需在 Vue 实例挂载的标签上添加即可 ,
以上示例修改后的代码如下。

[v-cloak] {
display: none !important; // 避免其他样式权重覆盖此样式
}

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

v-on 事件监听

第一，可以监听dom事件来执行一些js代码

<button v-on:click="count += 1"> 点击了 {{count}} 次 </button>

data: {
count:0
}

二、v-on 指令可以调用已经定义的方法来进行事件监听

<button v-on:click="myClick"> 点击了 {{count}} 次 </button>

data: {
count:0
},
methods:{
myClick:function(){
this.count++
}
}

*v-on 指令还有一种简单的写法，就是用 @ 代替，即： v-on:click=“myClick” ==== @click=“myClick”*
除了直接绑定到一个方法，v-on 指令也可以绑定内联 JavaScript 语句。

<button @click="say(' 你好')"> 我说 </button>
<button @click="say(' 你好呀~~')"> 你说 </button>

methods:{
say:function(msg){
alert(msg)
}
}

事件修饰符
Vue.js 为 v-on 指令提供了事件修饰符来处理 DOM 事件细节，如在事件调用时取消事件的默认动作或阻
止事件冒泡等。虽然可以在 methods 对象中轻松实现这些功能，但是 methods 对象只能处理纯粹的数据逻辑，
而无法处理 DOM 事件的细节。为了解决这个问题，Vue.js 为 v-on 指令提供了事件修饰符。通过由“.”表示
的指令后缀来调用修饰符。

例如

<button @click.once="say(' 格莱科技 ')"> 我说 </button>

事件修饰符可以串联书写，如： v-on:click.stop.prevent=“doThat”。
按键修饰符
在监听事件的同时，经常需要对键盘按键进行监测。 Vue.js 允许为 v-on 指令在监听键盘事件时添加按键
修饰符。

<input type="text" placeholder=" 可按 Enter 键发送 " v-model="msg" @keyup.enter="send" />
<div v-html="showMsg"></div>

data:{
msg:'',
showMsg:''
},
methods:{
send:function(){
this.showMsg += '<p>'+this.msg+'</p>'
this.msg=''
}
}
//组合键的书写形式，如 <input type="text" @keyup.enter.ctrl="send" />，可以使用 Ctrl+Enter 键。