VUE入门到实战--Vue实例和模板语法

1、Vue实例

1、每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：比如我们在下面这个例子中如果使用浏览器打开，我们在控制台输入vm.$data、vm.$el都能打印出响应的内容。在一个Vue实例中，像el，data，methods....还有很多，都叫做Vue的实例属性。这些实例属性都能通过 { 实例名.$实例属性名 }这种方式得到。

2、实际上每个组件都是一个Vue的实例，或者说一个Vue的项目都是由一个个的Vue的实例模块组成。

    
    
    
    
    


    

        

            {{message}}
        
        
    
    

2、Vue的生命周期和生命周期钩子

1、什么是生命周期函数：Vue实例在某一个时间点会自动执行的函数。

2、当我们创建一个Vue的实例的时候，也就是使用new Vue的时候，Vue会自动的去初始化事件和生命周期。在这个时间段会执行的生命周期函数是beforeCreate。

3、接着会进行一些外部注入和双向绑定的一些操作后，基本Vue实例的初始化都完成了，这个时间点上会有个生命周期函数会自动执行 created。

4、接着会询问一个条件说：有没有el这个选项，然后再问你有没有template这个选项。如果没有的话：Complie el‘s outerHTML  as template（把el外层的html作为模板：什么意思？就是说从el中找到那个Vue接管的DOM，把那部分内部或者整体作为当前模板,下面这个例子中就找到id为app的div，将

hello world

整个作为模板来进行渲染。所以说：现在就可以稍微理解一下为什么是由一个个Vue的组件构成，写的DOM也不过是把Vue中的模板属性拿到了外面而已）。总结一下：有template就渲染template，没有就渲染外部监管的DOM。

hello world
...

var app=new Vue({
    el:'#app',
})
与下面是等价的：

...

var app=new Vue({
    el:'#app',
    template:"
hello world
"
})

5、在页面渲染之前，也就是数据和模板想结合即将挂载在页面的之前的一瞬间，会自动执行一个生命周期函数 beforeMount。

6、在beforeMount执行后，数据和模板结合生成的Vue实例中的DOM元素就会挂载到页面上，在下面的例子中就是hello world被显示在页面上面后，又会自动执行一个生命周期函数 mounted。你能在下面的例子中看到在beforeMount执行的时候，id为app的DOM元素还什么都没有，执行mounted的之后，hello world已经出来了。

7、而数据更新和销毁的4个生命周期函数必须在数据更新和执行销毁函数xx.destroy()才会执行。我们下面的例子中有测试用例。 

8、另外除了我们将的8个生命周期函数外，还有3个生命周期函数，我们在后面会讲到。

3、模板语法

1、首先要明确的就是我们在指令后面跟的不是字符串，虽然是用引号包裹的，但指令后面跟着的是个JS表达式。

2、插值表达式、v-text、v-html之间的区别：插值表达式和v-text其实一样，对内容都是进行转义，显示原本的字符串内容，而v-html是对内容进行解析，如果内容是html表达式，按照html的方法展示。

3、对于插值表达式和v-text都是一个JS表达式，所以可以写成下面这样。而v-html就要分情况，如果是内容是html表达式，就不能再v-html后面的引号中写成JS表达式了，写了也没有效果，如下例子：

    
    
    
    
    


    
    
        {{name + 'Lee'}}
        

        

    
    

可以在浏览器中看到效果：分别是插值，v-text，v-html：