认识vue---语法、双向绑定、Vue组件通信、插槽slot

vue语法

八个生命周期函数是在Vue实例在某个时间点自动执行的函数，不需要手动执行，八个钩子函数； beforecreate/Created/ beforemounte/Mounted/： beforeupdate/Updated/ beforedestroy/Destroyed： vm.$destroy()方法调用后会断开实例的双向绑定。

创建一个Vue实例时，会加入一个data对象，data对象中的属性的改变会引起视图的更新渲染；但是如果在创建实例时data中没有某个属性值例如属性b，是后期添加的，那么该新增的属性b的改变不会引起视图的变化。

var data = {a:1};var vm = new Vue({data: data; 

});//访问属性data，可以使用$美元符，以与自定义属性区别开vm.$data===data; //true//新增一个属性值 
vm.b=2;

那么怎样处理才能使其后增加的属性也会引起视图的变化呢？

当确定后期需要某个属性时，可以先提前设置该属性值为空或者null。

Vue数据绑定语法

使用{}}}双花括号将文本括起来：{{message}}插值表达式

1、v-bind: 绑定属性 < a v-bind:href=“url”>…</ a> 绑定href属性 缩写为 :href

2、v-on：监听DOM事件 < a v-on:click=“方法名dosomething”>…</ a> 缩写 @click 方法可传参数或不传参数。

事件修饰符：.stop .prevent .capture .self .once .passive

eg: v-on:click.stop v-on:click.once

按键修饰符：.enter .tab .up .space .up .down .left

eg: v-on:keyup.enter

系统修饰符： .ctrl .alt .shift .meta

eg: v-on:keyup.shift

3、v-if/v-else: 条件性的渲染一块内容，在指令表达式返回truthy值时被渲染。会动态向DOM数添加或者删除元素。当值为false时，会将该元素从DOM树销毁；当为truthy时会编译渲染；频繁的切换会降低性能。 eg: < h1 v-if=‘colorsome’>some</ h1>

4、v-show: true或者false，表明是否显示元素，无论是否显示该元素都会被渲染并保留在DOM中。类似控制元素的display属性为none来控制隐藏。

5、计算属性computed 可用于较为复杂的逻辑运算，如字符串的翻转处理、根据姓和名得到姓名fullname。

<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例, 将复杂的处理置于computed属性中。return this.message.split('').reverse().join('')}} 

})

6、监听属性watch

监听某个属性是否发生改变，若发生改变，则可进行相应的操作。

当需要在数据变化时执行异步或开销较大的操作时，监听属性比计算属性适用。

7、列表渲染v-for 迭代数组元素或者对象属性。不要在同一级同时使用v-if和v-for，若一起使用v-for优先级更高。即每次v-for循环时v-if在跟着运行 <ul id="example-1"><li v-for="item in items"> <--!items为data中的属性-->{{ item.message }}</li></ul>

8、数组的更新检测：push、pop、shift、UNshift、splice、sort、reverse会引起视图变化；但是，修改数组长度不会引起视图变化eg：vm.items.length = 2 ，以及利用数组索引设置值时也不会引起视图的变化，eg： vm.items[1] = ‘x’ 。

替代方法为： 1）数组索引改变：vm.$set( vm.items数组, indexOfItem属性索引, newValue新值) 或者 Vue.set(…) 2）数组索引长度：vm.items.splice(indexOfItem, 1, newValue) vm.items.splice(newLength) 注：对象属性的增加删除不会引起视图变化，但是可利用vm.$ set(),以及Object.assigh()

Vue双向绑定

v-model创建双向数据绑定，可用于<input>,<textarea> <select>等表单元素。eg：< input v-model=“textmsg”>{{textmsg}}

v-model会忽略所有表单元素的value、checked、selected特性的初始值，并将Vue实例的数据作为数据来源，所以如果要显示初始值，较好在data选项中进行声明初始值。

双向绑定原理： 1-视图变化使得数据变化：利用了监听机制利用observer监听所有属性，当发生变化通过订阅者watcher是否要进行更新。 2-数据变化使得视图变化：利用了object.defineProperty(对象名obj, ‘要修改的属性名’, ‘要被修改的属性描述符set/get’)方法来重新定义对象的属性值get和set设置属性值。defineproperty用于数据劫持。

Vue组件通信

创建全局组件： Vue.component(‘组件名A’, {data: function{…}}) 创建局部组件：较好命名用kebab-case小写加横杠。要在Vue实例中用components属性声明，如下：

var todoitem = {template: '<li>item</item>'} //局部组件名，需要进行注册，即在Vue实例components中注册//若局部组件不在一个.vue中，那么需要加入import//import 组件文件名 from './包名/文件名.vue'new Vue({el: '#root',components: {'todo-item局部组件标签': todoitem //利用局部组件标签名来使用该组件}, 

})

实际项目中，较好将组件放于components目录里，表示这是组件包。

组件挂载在Vue实例上： new Vue({el: ‘组件名A’})

组件中的data必须是一个函数，即 data: function() {…/…}

组件通信

父向子间通信： props: 用于接收从外部传到组件/模板里的参数。单向的数据流只能从父级向子级传输参数。当在父级组件中发生更改，子组件/模板的prop会刷新显示较新的值。父组件需要使用bind进行属性绑定，子组件利用props: [‘xxx’,‘xxx’]接收。 注：对于对象和数组在JS里通过引用传入，所以在子组件中更改值值会导致父组件的变化。子向父$emit：子组件/模板使用$emit父组件可以监听到子组件/模板的变化，组件template使用$event使得？？？。 eg：this.$emit(‘监听事件’, 子组件需要传递的参数)

<div id="app"> <children> <span>我是魔鬼</span> <!--上面这行不会显示--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { template: `<h1>我是子组件</h1><slot></slot><!--slot占位，HTML页自定义组件的标签会显示在slot占位的地方-->` } } }); </script> 参考：https://blog.csdn.net/qq_38128179/article/details/85273522 使用< slot>相当于为HTML父组件的DOM元素占了个位子，使得较后会显示出添加的DOM元素。 var vm = new Vue({ el: '#app', components: { children: { template: `<slot name="header"></slot><!--slot占位，HTML页自定义组件的标签会显示在slot占位的地方--><h1>我是子组件</h1><slot name="footer"></slot>` } } }); </script> Vue.component('child', {data: function() {return {list: [1,2,3,4]}},template: `<div><ul><slotv-for="item of list":item=item></slot></ul></div>`})var vm = new Vue({el: '#root'})</script> 注意：在v2.6版本中，具名插槽和作用域插槽统一用v-slot来表示，v-slot结合了slot和slot-scope的特性。 当slot没有名字时，可在< template>中添加 v-slot:default 即为默认插槽< template v-slot:default >，当只有默认插槽时可以将v-slot:default用在组件标签上，注意：这时不可以有具名插槽或者作用域插槽！！ 若插槽有名字，则为< template v-slot:插槽名字xx >或者可用 #插槽名字 来代替v-slot: 在< template>元素中的所有内容都会被传入相应的插槽中。另外，任何没有被包裹在带有v-slot的< template>中的内容都会被视为默认插槽的内容

//父组件中使用template 
<!--默认插槽的规范使用--><template v-slot:default><div></div></template><!--具名插槽，header为插槽名字--><template v-slot:header><div></div></template><template #header><div></div></template> 
<!--动态插槽--><template v-slot:[dynamicSlotname]><div></div></template> 
<!--作用域插槽--><template v-slot[:插槽名字]="props"><div>{{props.name}}</div></template>

参考1： https://**.jianshu.com/p/af7b8c4b77b2 参考2：https://**.w3cplus.com/vue/vue/vue-v-slot.html