指令
vue实例简单介绍
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app', //el表示要控制的元素区域
data: { //data表示要绑定的数据
flag: true
},
methods: {} //存放事件处理函数
});
</script>
v-cloak
不需要表达式,这个指令保持在元素上直到关联实例结束编译。
和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
示例:
加载时不会显示,直到加载完成后才显示
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
解决问题:
可以解决插值表达式闪烁的问题
v-text
更新元素的 内容。如果要更新部分的内容，需要使用 {{ Mustache }} 插值表达式。
示例:
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
<!--
两种方式的区别
1插值表达式会有闪烁问题,而v-text没有;
2差值表达式更新部分内容(当前自己的占位符),而v-text更新元素内所有内容;
3如果内容时html语句,两者都不会解析,只会当普通文本输出
-->
v-html
更新元素的 innerHTML 。
注意：
内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局
示例:
<body>
<div id="box">
<span v-html="msg"></span>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg: '<p>123546</p>'
}
});
</script>
</body>
v-bind
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
三种用法;
- 直接使用指令
v-bind - 使用简化指令
: - 在绑定的时候，拼接绑定内容：
:title="btnTitle + ', 这是追加的内容'"
示例:
<body>
<div id="box">
<!--普通写法-->
<a v-bind:href="msg">有问题 找百度--->普通写法</a>
<!--简写写法--> <br />
<a :href="msg">有问题 找百度 -->简写</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg: 'http://www.baidu.com'
}
});
</script>
</body>
v-on (注意:this指向)
1.缩写 @
2.事件修饰符
-
.stop- 调用event.stopPropagation()。 -
.prevent- 调用event.preventDefault()。 -
.capture- 添加事件侦听器时使用 capture 模式。 -
.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。 -
.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。 -
.native- 监听组件根元素的原生事件。 -
.once- 只触发一次回调。 -
.left- (2.2.0) 只当点击鼠标左键时触发。 -
.right- (2.2.0) 只当点击鼠标右键时触发。 -
.middle- (2.2.0) 只当点击鼠标中键时触发。 -
.passive- (2.3.0) 以{ passive: true }模式添加侦听器用法
-
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
-
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
注意:
在开发时 ,注意this指向问题;
function函数会改变this的指向;如果要使用 ,需要在函数外面接收一下,然后在函数中使用;
es6的箭头函数就可以解决this指向问题,在箭头函数外部的this,在函数内使用时指向不会被改变
示例
<body>
<div id="box">
<input type="button" value="on事件绑定one" v-on:click="click_one" /> <!--普通书写方式-->
<input type="button" value="on事件绑定two" @click="click_two" /> <!--简写方式-->
<input type="button" value="on事件绑定three" @click="click_three()" /> <!--方法名带括号可以传递参数,不带括号也不会报错,也可以正常运行-->
<input type="button" value="on事件绑定four" @click="click_four" />
<a href="http://www.baidu.com" @click.prevent.once="click_five">on事件绑定five</a>
<!--on的事件修饰符可以链式使用比如@click.prevent.once="click_five"-->
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {},
methods:{
//注意:vue不提倡使用dom操作;当然如果作为开发者想用谁也管不了
//vue绑定的事件处理函数都要书写在methods这个对象中;当执行时自动回到vm实例的methods中寻找,找不到就会抛出异常
click_one:function(){alert('one')},
click_two:function(){alert('two')},
click_three:function(){alert('three')},
click_four(){alert('four')},
//这里的方法可以使用键值对的方式写;也可以像click_four函数这样简写
click_five(){alert('five')}
}
});
</script>
</body>
v-model (表单数据双向绑定)
修饰符:
- .lazy - 取代 input 监听 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
v-model作用:在表单控件或者组件上创建双向绑定,实现数据的双向绑定
示例
<body>
<div id="box">
<input type="text" value="" v-model.trim="msg"/>
<!-- 当文本框中的值改变时,vm实例中data的数据也会改变,如果安装了工具将会清楚的看到,我这里将data的数据在span标签里面绑定了一次,演示效果不会差太多-->
<span>这里相当于data中的数据 ----> <span v-text="msg"></span></span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg:'数据双向绑定'
},
methods:{}
});
</script>
</body>
v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
<!--item是给被遍历的对象起立一个别名-->
<!--list时给被遍历的对象-->
<p v-for="(item,index) in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}----{{ index }}
</p>
<!--index是索引-->
<!--注意:list可以是数组,对象,数组对象,数字-->
<body>
<div id="app">
<div>
<label>Id:<input type="text" v-model="id"></label>
<label>Name:<input type="text" v-model="name"></label>
<input type="button" value="添加" @click="add">
</div>
<!-- 注意： v-for 循环的时候，key 属性只能使用 number或者string -->
<!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
<!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
<!--不绑定key会出现的问题:当添加时,如果前面的复选框是选中的,数据添加后,复选框选中的数据可能就不会是原来的数据,
就会导致很多问题,当在使用v-for的时候建议绑定kek-->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
id: 1,
name: '李斯'
},
{
id: 2,
name: '嬴政'
},
{
id: 3,
name: '赵高'
},
{
id: 4,
name: '韩非'
},
{
id: 5,
name: '荀子'
}
]
},
methods: {
add() { // 添加方法
this.list.unshift({
id: this.id,
name: this.name
})
}
}
});
</script>
</body>
v-show
根据表达式之真假值，切换元素的 display CSS 属性。
当v-show="true" 时显示当前元素
当v-show="false" 时隐藏当前元素
v-if
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块
v-show与v-if区别
<body>
<div id="app">
<!-- <input type="button" value="toggle" @click="toggle"> -->
<input type="button" value="toggle" @click="flag=!flag">
<!-- v-if 的特点：每次都会重新删除或创建元素 -->
<!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->
<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
/* toggle() {
this.flag = !this.flag
} */
}
});
</script>
</body>
自定义全局指令
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。如:样式inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。如:绑定focusupdate：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数
指令钩子函数会被传入以下参数：
-
el：指令所绑定的元素，可以用来直接操作 DOM 。 -
binding：一个对象，包含以下属性：
name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
-
vnode：Vue 编译生成的虚拟节点。移步 VNode API来了解更多详情。 -
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：
Vue.directive('focus', { //focus表示自定义指令的名称定义时不用加v-;但是使用时必须要加
inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
el.focus();
}
});
自定义私有指令
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
},
'font-weight': function(el) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数
el.style.fontWeight = 300;
}
}
});
</script>
扫一扫
1308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
