Vue基础语法、生命周期

秒速五厘米 2023-06-25 10:24 26阅读 0赞

# 一、在官网上下载Vue.js #

1.  官网：https://cn.vuejs.org/ 学习 | 教程 | 安装。
2.  使用官网提供的CDN（内容分发网络）。

# 二、创建Vue实例 #

var vm = new Vue({ 
    	el:'表示挂载点的选择器',
    	data:{ 
    		//数据区
    	},
    	methods:{ 
    		//方法区
    	}
    })

# 三、需要掌握的术语 #

#### 1、Vue实例： ####

利用new根据构造函数Vue()创建的vm实例就是Vue实例。

#### 2、Vue实例的选项： ####

1.  **el**：通过选择器将Vue实例与DOM节点挂载起来。
2.  **data**：为Vue实例设置所需要用到的数据，即“数据区”。
3.  **methods**：为Vue实例设置操作挂载点节点的方法，即“方法区”。

#### 3. Vue实例的属性： ####

1.  $ el：返回Vue实例挂载点所对应的DOM节点。`vm.$el===document.querySelsctor("#app");`
2.  $ data：返回Vue实例数据区中的所有数据。`vm.$data.w === vm.w //返回true`

#### 4. 挂载点： ####

Vue实例与之挂载的DOM节点就被称为“**挂载点**”。

# 四、如何为挂载点对象绑定事件 #

1.  利用Vue指令 v-on为挂载点对象绑定事件。

1.  将事件代码书写在Vue实例的方法区。

methods:{ 
    	btnClick:function(){ }
    }

1.  在Vue实例方法区中的函数内部如何引用Vue实例数据区中的数据
    
     *  `vm.$data.todayData`
     *  `vm.todayData`
     *  `this.todayData`
2.  **重点记忆**：在Vue方法区中的函数内部，关键字this永远指向Vue实例vm。

# 五、文本插值的使用 #

1.  **Mustache语法**：\{ \{\}\}
2.  **文本插值的特点**：  
    A. 只能使用数据区内部的数据，不能使用数据区以外的数据。  
    B. HTML标记的属性取值不能使用文本插值的方法。  
    `<a href='http://www.baidu.com' title='{ {title}}'>百度百科</a> `  
    C .若文本插值的内容包含HTML代码，则无法被浏览器解释。  
    D .数据区中的数据对于页面来说是双向绑定的。  
    E .文本插值内部不能出现流程语句。  
    F .文本插值内部可以出现表达式。
3.  数据区可以定义在Vue实例以外：  
    A .利用字面量的方式创建数据区对象：`var data_1={a:10,b:20};`  
    B .利用构造函数来创建数据区对象：

var data_2=new Object();
      data_2.a=10;
      data_2.b=20;

1.  **关于文本插值的指令**：

v-text：功能与{ { }}文本插值相同。<p v-text="title"></p>
    v-html：功能与{ { }}文本插值相同，同时也可以解释HTML代码。<p v-html="title"></p>
    v-once：不再支持双向绑定。<p v-text="title" v-once></p>
    v-pre：忽略文本插值的功能。<p v-pre>{ { title}}</p>

# 六、Vue实例的生命周期 #

Vue实例从创建之初，一直到被销毁的全过程被称为Vue实例的生命周期（Life Cycle）

/*有关Vue实例生命周期的内容*/
    var vm = new Vue({ 
    	el:'#vm',
    	data:{ 
    		
    	},
    	methods:{ 
    
    	},
    	/*Vue实例创建阶段*/
    	beforeCreate(){ 
    		console.log("Vue实例创建之前执行,Vue实例尚不存在")
    		console.log(this.$el);
    		console.log(this.$data);
    	},
    	created(){ 
    		console.log("Vue实例创建成功后执行,完成了数据的初始化")
    		console.log(this.$el);
    		console.log(this.$data);
    	},
    	/*Vue实例的挂载阶段*/
    	beforeMount(){ 
    		console.log("完成了挂载点的初始化")
    		console.log(this.$el);
    		console.log(this.$data);
    	},
    	mounted(){ 
    		console.log("完成了挂载点与Vue实例的挂载过程")
    		console.log(this.$el);
    		console.log(this.$data);
    	},
    	/*Vue实例的更新阶段： 当对数据区中的数据进行修改时发生更新阶段的钩子函数的执行。*/
    	beforeUpdate(){ 
    		console.log("更新前")
    		console.log(this.$el);
    		console.log(this.$data);
    	},
    	updated(){ 
    		console.log("更新后");
    		console.log(this.$el);
    		console.log(this.$data);
    	},
    	beforeDestroy(){ 
    		console.log("销毁前")
    		console.log(this.$el);
    		console.log(this.$data);
    	},
    	destroyed(){ 
    		console.log("销毁后")
    		console.log(this.$el);
    		console.log(this.$data);
    	}
    })