vue-指令、标签、模板、组件、混入

指令

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，只调用一次，解绑时调用

自定义标签

自定义无参标签

1. 和自定义组件很像，但是不需要传递任何参数，只是一个静态标签
2. 扩展实例构造器

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

1. Vue.extend()和上面一样
2. new myExtend().$mount(’#myspan’); // 采用id或者class来生成扩展实例构造器
3. 使用：

Vue.set

由于javascript的限制，Vue不能检测以下变动的数组：

1. 当你想利用索引直接修改数组某一项的时候，Vue不会为我们自动更新
2. 当修改数组的长度时，Vue不会为我们自动更新

template 制作模板

1. 直接在template写标签，new Vue({el: '#app', template: '<h1></h1>'})
2. template指定id名称，在body中写template标签，通过id关联
3. 写在script标签里面，官方推荐，script添加属性type=‘x-template’，script通过id
   与new Vue中的template的id相关联，script标签里面写正常html标签

定义的组件的几种方式

1. 定义一个.vue文件，导出，引入，注入
2. 在components: {show: {template: '<h1></h1>'}}，使用：<show></show>，这种是私有组件
3. 通过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混入

1. 构造器写好后，如果需要在增加方法或者临时增加额外的方法，这时用混入可以减少源代码污染
2. 很多地方都会用到公共方法，抽取出来，使用混入

export default {
	var test = {
		created() {
			console.log('这是混入的created方法')
		}
	}
	mixins: [test],
	data() {
		return {}
	}
}
</script>

3. 执行顺序，都是混入的先执行，然后构造器里的在执行，需要注意的是，这并不是方法的覆盖，而是被执行了两遍，当混入的方法和构造器里的方法重名时，混入的方法不起作用
4. 全局混入

Vue.mixin({
    updated:function(){
        console.log('我是全局混入');
    }
})

5. 全局混入的执行顺序 > 普通混入 > 构造器里面的方法

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

1. 更改默认插值的 {{}} 形式
2. delimiters: ['${','}'] //改为了${}

$mount

1. 用来挂载我们的扩展的
2. 比如使用Vue.extend时候，用$mount()方法把扩展挂载到dom上

$destroy

1. 销毁分为内部销毁和外部销毁
2. // 这种属于外部销毁，可以销毁dom结构
3. 使用$destroy()为内部销毁，只能销毁组件，但是组件的dom结构仍然保留

$forceUpdate

1. 调用此方法会强制更新视图和数据，会触发updated方法

$nextTick

1. 在修改数据之后，使用这个方法，获取更新后的dom
2. 需要在视图更新之后，基于新的视图进行操作
3. 在created和mounted阶段，如果需要操作渲染后的视图，也要使用$nextTick

$on

1. 配合$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', () => {})