指令
本质就是自定义属性
Vue中指定都是以 v- 开头
v-cloak
防止网络卡时页面加载时出现闪烁出{}问题
1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏
<style type="text/css">
[v-cloak]{
/* 元素隐藏 */
display: none; }</style>
<!-- 2、 让带有插值 语法: {{msg}} 的 添加 v-cloak 属性 在 数据渲染完场之后，v-cloak 属性会被自动去除，
v-cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签 也就是对应的标签会变为可见 -->
<body>
<div id="app">
<div v-cloak >{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app', // el 指定元素 id 是 app 的元素
data: { msg: 'Hello Vue' } // data 里面存储的是数据
}); </script> </body> </html>
v-text
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题,如果数据中有HTML标签会将html标签一并输出,即原生innerText。
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
注意:在指令中不要写插值语法 直接写对应的变量名称 在 v-text 中 赋值
的时候不要在写插值语法，一般属性中不加 {{}} ，直接写 对应 的数据名
<p v-text="msg"></p>
Vue 中只有在标签之间,即要显示的内容中 才可以用插值语法
<p>{{msg}} </p>
v-html
用法和v-text 相似 但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html ，不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
<p v-html="html"></p>
输出：html标签在渲染的时候被解析,html为js块中data值
v-pre
显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{{msg}}</span>
即使data里面定义了msg这里浏览器中仍然是显示的{{msg}}
v-once
执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
<span v-once>{{ msg}}</span>
即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js
双向数据绑定 v-model
当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化
v-model是一个指令，限制在
<input>、<select>、<textarea>、components 中使用
<div id="app">
<div>{{msg}}</div> <div>
//当输入框中内容改变的时候， 页面上的msg 会自动更新
<input type="text" v-model='msg'> </div> </div>
v-on
用来绑定事件的
形式如：v-on:click 缩写为 @click;
v-on事件函数中传入参数
<body>
<div id="app"> <div>{{num}}</div> <div>
<!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数-->
<button v-on:click='handle1'>点击1</button>
<!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
并且事件对象的名称必须是$event -->
<button v-on:click='handle2(123, 456, $event)'>点击2</button> </div> </div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: { num: 0 },
methods: {
handle1: function(event) {
console.log(event.target.innerHTML) },
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++; }
} }); </script>
事件修饰符
.once也是时间修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 阻止默认行为和阻止冒泡是非常常见的需求。
Vue 不推荐我们操作DOM， 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符，修饰符是由点开头的指令后缀来表示的
阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>
提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
修饰符可以串联 即阻止冒泡也阻止默认事件
<a v-on:click.stop.prevent="doThat"></a>
只当在 event.target 是当前元素自身时触发处理函数
即事件不是从内部元素触发的
<div v-on:click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
因为先点击默认的才会触发self，如果prevent在前，就不会有任何请求，self也不会执行。
按键修饰符
在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--当点击enter或者space时 时调用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
<script> var vm = new Vue({
el:"#app",
methods: {
submit:function(){},
alertMe:function(){}, } }) </script>
常用的按键修饰符
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
自定义按键修饰符别名
在Vue中可以通过 config.keyCodes 自定义按键修饰符别名，要对应键的ascall码
预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发vue中自己设置的prompt方法
<input type="text" v-on:keydown.f5="prompt()"> </div>
<script> Vue.config.keyCodes.f5 = 116;<script>
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
