指令
v-pre:一些静态的内容不需要编辑添加这个指令可以加快编辑,跳过这个元素和它的子元素的编译过程
<span v-pre>{{hello world}}</span>
// 显示的就是{{hello world}}
v-cloak:解决屏幕闪动,当某些时候网络比较慢的时候,导致Vue来不及渲染,这时候页面就会显示vue的源代码,使得用户体验不友好,这时候在标签上添加这个指令就可以解决
v-once:只渲染元素和组件一次,后期如果绑定的值有改变也不会再次渲染,可以优化更新性能,<span v-once>{{静态内容}}</span>
自定义指令
Vue.directive('robin', (el, binding, vnode) => {
// el,代表dom元素
// binding,对象,获取到传递进来的信息
// vnode,虚拟节点
el.style = `color:${binding.value}`
})
// 使用
<div v-robin='red'></div>
// 自定义指令也有自己的生命周期函数
1. bind,指令第一次绑定到元素上时,做一些初始化操作
2. update
3. inserted,被绑定的元素插入到父节点时调用
4. componentUpdated
5. unbind,只调用一次,解绑时调用
自定义标签
自定义无参标签
- 和自定义组件很像,但是不需要传递任何参数,只是一个静态标签
- 扩展实例构造器
var myExtend = Vue.extend({
template:"<p><a :href='url'>{{userName}}</a></p>",
data:function(){
return{
userName:'zhangsan',
url:'http://www.xxx.com'
}
}
});
new myExtend().$mount('myspan'); // 需要挂载才生效
// 使用
<myspan></myspan>
通过id或class挂载到普通的html
- Vue.extend()和上面一样
- new myExtend().$mount(’#myspan’); // 采用id或者class来生成扩展实例构造器
- 使用:
Vue.set
由于javascript的限制,Vue不能检测以下变动的数组:
- 当你想利用索引直接修改数组某一项的时候,Vue不会为我们自动更新
- 当修改数组的长度时,Vue不会为我们自动更新
template 制作模板
- 直接在template写标签,
new Vue({el: '#app', template: '<h1></h1>'})
- template指定id名称,在body中写template标签,通过id关联
- 写在script标签里面,官方推荐,script添加属性type=‘x-template’,script通过id
与new Vue中的template的id相关联,script标签里面写正常html标签
定义的组件的几种方式
- 定义一个.vue文件,导出,引入,注入
- 在
components: {show: {template: '<h1></h1>'}}
,使用:<show></show>
,这种是私有组件 - 通过
Vue.component('test', {template: '#temp'})
,<template id='temp'>html标签</template>
,使用:<test></test>
,这种是全局组件
propsData传递数据
var myExtend = Vue.extend({
template:"<p><a :href='url'>{{userName}}</a></p><p>{{msg}}</p>",
data:function(){
return{
userName:'zhangsan',
url:'http://www.xxx.com'
}
},
props: ['msg']
});
new myExtend({propsData: {msg: 'message'}}).$mount('myspan'); // 需要挂载才生效
// 使用
<myspan></myspan>
Mixins混入
- 构造器写好后,如果需要在增加方法或者临时增加额外的方法,这时用混入可以减少源代码污染
- 很多地方都会用到公共方法,抽取出来,使用混入
export default {
var test = {
created() {
console.log('这是混入的created方法')
}
}
mixins: [test],
data() {
return {}
}
}
</script>
- 执行顺序,都是混入的先执行,然后构造器里的在执行,需要注意的是,这并不是方法的覆盖,而是被执行了两遍,当混入的方法和构造器里的方法重名时,混入的方法不起作用
- 全局混入
Vue.mixin({
updated:function(){
console.log('我是全局混入');
}
})
- 全局混入的执行顺序 > 普通混入 > 构造器里面的方法
extends,通过外部增加对象的形式,对构造器进行扩展
<script type="text/javascript">
var bbb={
created:function(){
console.log("我是被扩展出来的");
},
methods:{
add:function(){
console.log('我是被扩展出来的方法!');
}
}
};
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
methods:{
add:function(){
console.log('我是原生方法');
}
},
extends:bbb
})
</script>
delimiters
- 更改默认插值的 {{}} 形式
delimiters: ['${','}']
//改为了${}
$mount
- 用来挂载我们的扩展的
- 比如使用Vue.extend时候,用$mount()方法把扩展挂载到dom上
$destroy
- 销毁分为内部销毁和外部销毁
- // 这种属于外部销毁,可以销毁dom结构
- 使用$destroy()为内部销毁,只能销毁组件,但是组件的dom结构仍然保留
$forceUpdate
- 调用此方法会强制更新视图和数据,会触发updated方法
$nextTick
- 在修改数据之后,使用这个方法,获取更新后的dom
- 需要在视图更新之后,基于新的视图进行操作
- 在created和mounted阶段,如果需要操作渲染后的视图,也要使用$nextTick
$on
- 配合$emit使用
$once
1. <button @click="handleClick"></button>
2. function handleClick() { this.$emit('handleClick') }
3. this.$once('handleClick', () => { console.log('这个方法只会触发一次') })
$off
1. 关闭实例事件
2. <button @click="handleOff"></button>
3. function handleOff() {this.$off('handleClick')} // 不会在执行handleClick方法
4. this.$on('handleClick', () => {})