本文共 2379 字，大约阅读时间需要 7 分钟。

目录

一、创建Vue实例

步骤总结：

1. 页面中引入vue文件
2. new一个新的Vue对象 （可将对象进行赋值）
3. 在new对象中添加相关选项内容

	
    
		
     
title111
		
     
v-bind
	
    
    

二、el ：vue实例的挂载

步骤总结：

1. 在vue新对象内进行key：‘value’ 形式的挂载 例如：el：‘.test’
2. value形式必须为CSS选择器语法 例如：el:‘.test’  、el:'#test'
   （强烈建议使用id进行绑定，有且只有一个）

	
    
		
     
test
	
    
	
    
	
    
    

三、data：含有零个或多个的 key/value 对，进行数据传递

总结：

• vue 对象内的 data：{} 形式创建data选项
• data 内存在零个或多个 key：value 对；
  key 以字符串形式存在，可适当省略合法变量名的引号；
  value 可以为任意属性。
• Html结构内，使用 插值表达式 {
  {}} (即，双大括号) 插入data内的数据，例如：{
  { msg }}
  注意：差值表达式内可以进行运算
• JS结构内的到相应变量的方式：

1. 直接获取vue实例对象， 例如 ： console.log(app)
2. 使用$，获取vue实例对象内的data对象，例如： console.log(app.$data)
3. 获取data下的相应变量名，例如： console.log(app.$data.msg)
4. 直接通过vue对象获取data下的变量，例如： console.log(app.msg)

	
    
		
     		{
   { msg }}		{
   { num }}		
     		{
   { 1 + 2 + 3 * 4 }}	
    

三、methods：可以通过实例及表达式，进行调用的方法。

总结：

• 在vue对象内的创建 methods：{} ，存放方法
• methods内方法以 方法名：function(参数){} 的形式存放。
• methods内的方法，可以直接在JS结构体内进行调用，例如：vue对象名.方法名()
• methods内方法绑定v-on事件，启用事件触发函数。

	
    			
    
		
     		
     
{
   { test1 }}
		
     
{
   { test2 }}
		
     
action 11111
	
    

四、computed：进行方法内的计算（实现一个变量依赖多个变量）

总结：

• 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
    注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
• vue对象内建立 computed：{}
• computed内以 方法名：function（参数）{}，

 

1- 纯粹进行计算相关的操作

 

2- 实现一个变量依赖于多个变量

	
    		
    
		
     
			
      			
      姓:
      		
     
		
     
			
      名:
      		
     
		
     
			
      			
      
       姓名: {
   { fisrt_name + " " + last_name }} 
      
			
      			
      
       姓名: {
   { full_name }} 
      
			
      			
      
       姓名: {
   { full_name_bac() }} 
      
		
     
	
    

五、watch：监听变量，变量修改是触发方法（实现多个变量依赖于一个变量）

总结：

• vue内 watch：{} 创建
• 变量的值修改触发监听方法，有多种调用方式

1- 调用修改变量值的多种方式

2- 实现多个变量依赖于一个变量（监听唯一的变量）

	
    		
    
		
     
			
      姓名:			
      		
     
		
     
姓: {
   { first_name }} 
		
     
名: {
   { last_name }} 
	
    

六、delimiters：改变插值表达式符号（{

{}}）

	
    		
    
     		{
   { msg }} 		
     
		${ msg }	
    

七、生命周期钩子：实例的各个时期调用的方法

• beforeCreate：初始化实例后，调用前触发。
• created：实例穿件完成后触发。
• beforeMount：挂在开始前被调用。
• mounted：el被请创建的vm.$el替换，并且挂载到实例上去后调用。
• beforeUpdate：数据更新时调用，发生在虚拟DOM补丁之前。
• updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，之后调用。
• activated：keep-alive 组件激活时调用
• deactived：keep-alive 组件停用时调用
• beforeDestory：实例销毁之前调用
• destroyed：Vue 实例销毁后调用。
  调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
• errorCaptured：当捕获一个来自子孙组件的错误时被调用

	
    		
    
     		{
   { msg }}	
    

 

转载地址：http://bmlvn.baihongyu.com/