手把手教你Vue框架从入门到实战项目（二）

第二章 Vue基础精讲

Vue实例

在Vue中，所有的组件都可以理解为Vue实例。一个Vue应用通过new Vue创建的根Vue实例。

<!-- 文本插值{
   {message}} -->
<div id="app">{
  {message}}</div>

//全局组件
Vue.component('item',{
   
    template:'<div>你好</div>'
})
//实例化一个Vue
var vm = new Vue({
   
    el: "#app",
    data:{
   
        message:"hello world"
    }
})

当一个Vue实例被创建时，Vue实例中的el属性（element）就是获取视图中的元素，相当于document.getElementById('app')的作用。另外它将data对象中的所有属性加入到Vue的响应式系统中。也就是说当属性的值发生改变时，视图中也会改变。反知，当视图中的元素值改变时，data中的属性相应的值也会改变。

当然如果你想阻止修改现有的属性，可以使用Object.freeze()方法来达到响应系统无法再追踪到变化。

<div id="app">
    <p>{
  {content}}</p>
    <button v-on:click="changebtn">修改</button>
</div>

var obj={
   
    content:'asdas'
}

Object.freeze(obj);
let app=new Vue({
   
    el: '#app',
    data:obj,
    methods:{
   
        changebtn:function(){
   
            this.content='1111'
        }
    }
})

除了数据属性，Vue实例还暴露了一些有用的实例属性与方法。它们都有$前缀，以便与用户定义的属性区分开来。

//实例化一个Vue
var vm = new Vue({
   
    el: "#app",
    data:{
   
        message:"hello world"
    }
})

vm.$el === document.getElementById('app');//true
console.log(vm.$data.message);//"hello world"

//$watch是一个实例方法 直译：观察
//第一个参数表示要观察的属性，第二个是个回调函数，函数的有两个参数，分别是new，old的值
vm.$watch('message',function(newVal,oldVal){
   
    console.log(newVal,oldVal);//newVal hello world
})
vm.$data.message='newVal';

实例生命周期钩子

什么是生命周期函数（钩子）？生命周期函数就是Vue实例在某一个时间点会自动执行的函数。

生命周期函数，并不是写在methods对象属性中。

注意：不要在选项属性或回调上使用箭头函数，比如created:() => console.log("...")或vm.$watch('a',newVal => this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致Uncaught TypeError: Cannot read property of undefined或 Uncaught TypeError: this.myMethod is not a function之类的错误。

生命周期示意图

var vm = new Vue({
   
    el:'#app',//执行完created函数后，会检查是否定义el属性，如果是否，当调用vm.$mount('#app')又会进行下一步
    template:"<p>{
   {message}}</p>",//如果没有定义template属性，vue会将html中的元素作为渲染模板
    data:{
   
        message:'你好'
    },
    beforeCreate:function(){
   
    	console.log('beforeCreate');//beforeCreate
	},
    created:function(){
   
        console.log('created');//created
    },
    beforeMount:function(){
   
        console.log('beforeMount');//beforeMount
        console.log(this.$el);//<div id="app"></div>  没有渲染之前什么都没有
    },
    mounted:function(){
   
        console.log('mounted');//mounted
        console.log(this.$el);//<div>hello world</div>
    },
    beforeUpdate:function(){
   
        console.log('beforeUpdate');//beforeUpdate
        console.log(this.message);//更改后的值
    },
    updated:function(){
   
        console.log('Updated');//Updated
        console.log(this.message);//更改后的值
    },
    //当调用vm.$destroy()时，下面的就会执行
    beforeDestroy:function(){
   
        console.log('beforeDestory');
    },
    destroyed:function(){
   
        console.log('destroyed');
    }
})

模板语法

文本插值

常用的数据绑定形式是使用“Mustache”语法 (双大括号) 的文本插值。

<span>{
  {message}}</span>

也可以使用v-text指令进行文本插值。

<span v-text="message"></span>

这里再介绍一个v-once指令，使用这个指令后，插值处的内容不会因为data数据的改变而改变。

<span v-once>{
  {message}}</span>

如果我们要实现像原生JS中innerHTML一样的功能，要怎么实现呢？这里我们使用的是v-html指令。

<span v-html="myhtml" id="app"></span>

new Vue({
   
    el:'#app',
    data:{
   
        myhtml:'<span style="color:red">我是红色</span>'
    }
})

值得一提的是，在“Mustache”语法、v-text、v-html中的内容不止可以使用变量，同样也可以使用JS表达式。

<span>{
  {message + 'vue'}}