Vue.js 基础特性

Vue 的实例 var vm = new Vue({})
在实例化的时候，我们可以传入一个选项对象，包含数据、模板、挂载元素、方法、生命周期钩子等选项

模块

选项中主要影响模板或 DOM 的选项有 el 和 template, render。

<div id="app">
  <p>123</p>
</div>
<script id="tpl" type="x-template">   <div class='tpl'>
   <p>This is a tpl from script tag</p>   </div>
</script>
<script type="text/javascript">
  var vm = new Vue({    el : '#app',
   template : '#tpl'   });
</script>

每一个 Vue.js 实例需要有一个根元素

数据

var MyComponent = Vue.component('my-component', {   props : ['title', 'content'],
  data : function() {
   return {
    desc : '123'
   }
 },
  template : '<div>     
      <h1>{{title}}</h1>     
      <p>{{content}}</p>     
</div>'
})

方法

可以通过选项属性 methods 对象来定义方法，并且使用 v-on 指令来监听 DOM 事件

生命周期

Vue.js 实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑

var vm = new Vue({
        el : '#app',
        beforeCreate: function(){
            console.log('beforeCreate: 1,实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用');
        },
        created: function() {
           console.log('created: 2,在实例创建之后调用。此时已完成数据绑定、事件方法，但尚未开始 DOM 编 译，即未挂载到document中');
        },
        beforeMount: function(){
            console.log('beforeMount: 3,在挂载开始之前被调用：相关的 render 函数首次被调用')
        }, 
        mounted: function() {
           console.log('mounted: 4,el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内');
        },
        beforeUpdate: function(){
            console.log('beforeUpdate: 5,数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。')
        },
        updated: function(){
            console.log('updated: 6,由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。')
        },
        activated: function(){
            console.log('activated: 7,keep-alive 组件激活时调用。')
        },
        deactivated: function(){
            console.log('deactivated: 8,keep-alive 组件停用时调用')
        },
        beforeDestroy: function() {    
            console.log('beforeDestroy: 9,实例销毁之前调用。在这一步，实例仍然完全可用。');  
        },
        destroyed: function() {
           console.log('destroyed: 10,Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。');  
        }
    });

数据绑定

Vue.js 的核心是一个响应式的数据绑定系统，建立绑定后，DOM 将和数据保持同步，这样就无需手动维护 DOM，使代码能够更加简洁易懂、提升效率。
Vue.js 的数据绑定语法

文本插值

<span>Hello {{ name }}</span>
<span v-once=”name”>{{name}}</span>

表单控件
v-model 的指令对表单元素进行双向数据绑定

条件渲染

Vue.js 提供 v-if，v-show，v-else，v-for 这几个指令来说明模板和数据间的逻辑关系，这基本就构成了模板引擎的主要部分。

组件通信

Parent(父组件) –Pass/Props–> Child(子组件)
Child(子组件) –Emit／Events–> Parent(父组件)

在父组件中，载入子组件

import slideShow from '../components/slideShow'  //通过`import`载入子组件
export default{   //设置导出模板
    components: {
      slideShow
   },
}

在<template>中使用, <com-a></com-a>规则：所有的大写必须全部转成小写
通过is引入模板  好处, 可以在那个位置渲染动态的组件

<p :is="comTorender"></p>
data(){
   return{
    comToRender:'com-b'//这里comToRender变为了一个动态的属性
    }   
}

父与子组件进行通信

比如子组件向父组件传递信息：Event:Emit触发或on监听
比如父组件向子组件传递信息:Props：Pass

在父组件中，
在子组件中，props：['number'],并且在子组件中可以进行number的渲染
也可以通过this.number获取到从父组件传来的值

注意：属性也是大小写不敏感的，需用-进行区分；
此时在父组件中number是一个字符串的形式
在子组件中指定类型时，也应该为String，或‘number’：[Number,String]

子组件向外传递数据

首先在子组件里面设置一个点击methods

this.$emit('my-event',this.hello)  //表示我们使父组件触发一个事件，名字叫做my-event，并且向这个方法传递一个参数,即子组件的hello属性

2 . 其次在父组件中监听被触发的事件my-event，当这个事件被触发时使其触发父组件的另一个方法getMyevent(hello)在这个方法中接收一个从子组件传来的参数hello，在这里就可以打印子组件的属性hello的值

父组件向子组件传递一个模板元素:插槽

首先在父组件中

<com-a>
<p slot="header">123</p>  //这里插入一个模板
</com-a>

2 . 在子组件中加入标签 <slot name="header">no slot</slot>
//为插槽设置默认值no slot,设置name方便子组件使用时定位

模块

数据

方法