一、自定义指令
1、全局自定义指令
<body> <div id="container"> <div v-bill="prop">{{msg}}div> div> <script src="./vue.js">script> <script> //每个钩子的参数都是 ( el、binding、vnode 和 oldVnode),名称是bill但是使用的时候需要用v-bill进行使用,如果是驼峰命名法,那么就用-进行连接 Vue.directive('bill', { bind(){ //全局绑定元素时调用,只调用一次,如果没有调整的话,会一直保存 console.log('bind', arguments); }, inserted() { //被绑定元素插入父节点时调用 console.log('inserted', arguments); }, update() { //所在组件的 VNode 更新时调用 console.log('update', arguments); }, componentUpdated() { //所在组件的 VNode 更新时调用 console.log('componentUpdate', arguments); }, unbind() { //解绑时调用,vue实例销毁时也会被调用即app.$destroy()的时候会调用 console.log('unbind', arguments); } }); let app = new Vue({ el: '#container', data: { msg: 'this is test', prop: 'red' } }) script>
2、局部指令
<body> <div id="container"> <div v-bill="prop">{{msg}}div> div> <script src="./vue.js">script> <script> let bill = { bind() { console.log('bind', arguments); }, inserted() { console.log('inserted', arguments); }, update() { console.log('update', arguments); }, componentUpdated() { console.log('componentUpdated', arguments); }, unbind() { console.log('unbind', arguments); } }; let app = new Vue({ el: '#container', data: { msg: 'this is test', prop: 'red' }, directives: { bill } }) script> body>
二、Vue.extend的使用
<body> <div id="container"> <div @click="check">{{msg}}div> <bill>bill> div> <script src="./vue.js">script> <script> let Bill = Vue.extend({ template: '', data: function() { return { url: 'javascript:;', extend: 'this is extend', count: 0 } } }); new Bill().$mount('bill'); //实现数据绑定 // new Bill().$mount('#bill'); => //可以用id进行绑定,也可用class进行绑定 let app = new Vue({ el: '#container', data: { msg: 'this is test', prop: 'red' }, methods: { check() { console.log(arguments); } } }) script> body>{{count}}
三、Vue.set 与 Vue.delete
在实例的内部调用是this.$set(target, key, value)或者是this.$delete(target, key)进行调用,如果是在外部调用也可以用Vue.set(target, key, value), Vue.delete(target, key)进行调用
<body> <div id="container"> <ul> <li v-for="(v, k) in list">{{v}}li> ul> <input type="button" value="change" @click="change"> <input type="button" value="delete" @click="del"> div> <script src="./vue.js">script> <script> let app = new Vue({ el: '#container', data: { list: ['aaa', 'bbb', 'ccc', 'ddd', 'eee'] }, methods: { change() { let index = this.list.findIndex(value => value === 'ccc'); // this.list[index] = 'are you ok???'; //这种方法是没有效果的,不能实现界面的变化 this.$set(this.list, index, 'are you ok????'); }, del() { let index = this.list.findIndex(value => value==='bbb'); index > 0 && this.$delete(this.$data.list, index); } } }) script> body>
四、template的几种写法
a、写法一:直接书写在构造器中
<body> <div id="container"> <div>{{msg}}div> div> <script src="./vue.js">script> <script> let app = new Vue({ el: '#container', data: { msg: 'msg' }, template: 'this is test
' }) script> body>
注意:这种写法主要针对模板的代码比较少的情况下,并且会所全部的的el的内容改成模板的内容
b、利用template标签进行模板的定义与书写
<body> <div id="container"> <div>{{msg}}---maindiv> <template id="tp"> <div> <span>{{msg}}span> <span>{{msg}}span> <span>{{msg}}span> div> template> div> <script src="./vue.js">script> <script> let app = new Vue({ el: '#container', data: { msg: 'msg' }, template: '#tp' }) script> body>
c、利用script标签进行模板定义与书写
<body> <script type="x-template" id="tp"> <div> <span>{{msg}}</span> </div> script> <div id="container"> div> <script src="./vue.js">script> <script> let app = new Vue({ el: '#container', data: { msg: 'msg' }, template: '#tp' }) script>
五、component 组件
a、父组件传值给子组件
<body> <script type="x-template" id="bill"> <div> <h1>{{getMsg}}</h1> <h2>{{title}}</h2> <ul> <li v-for="(v,k) of list">{{v}}---{{k}}</li> </ul> <input type="button" value="btn" @click="check"> </div> script> <div id="container"> <bill :msg="msg" title='this is title'>bill> div> <script src="./vue.js">script> <script> Vue.component('bill', { template: '#bill', props: ['msg', 'title'], //接收从外部传入的属性值 data: function() { //内部定义data应该要用函数的形式进行定义 return { list: ['aaa', 'bbb', 'ccc', 'ddd'] } }, computed: { getMsg: function() { return `are you ok??? ${this.msg}`; } }, methods: { check() { console.log(arguments, this); //this 是指向当前的component组件 } } }); let app = new Vue({ el: '#container', data: { msg: 'this is msg' } }) script> body>
b、子组件传值给父组件
test