认识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: {
   
    // 计算属性的 getter
    reversedMessage: function () {
   
      // `this` 指向 vm 实例, 将复杂的处理置于computed属性中。