Vue实战项目开发--vue基础精讲

项目的源代码在GitHub上：点击查看

Vue实例

vue的每一个组件都是一个实例，该实例对应着很多属性和方法。

	
	
	


	

		

			{{message}}
		
	

	

Vue实例的生命周期钩子

生命周期函数就是vue实例在某一个时间点自动执行的函数

Vue的模板语法

插值：

文本： {{}}    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

原始HTML：v-html    双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

操作纯文本：v-text    它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。

注意：这些模板语法v-XXX后面的内容都是js表达式

具体查看vue官方文档：模板语法

    
    
    


    

        
{{name}}
        

        

    

    

计算属性，方法和侦听器

可以通过三种方法实现属性的运算：计算属性、方法和侦听器，如果一个功能可以通过计算属性和watch实现，选用计算属性是最简单的。

    
    
    


    

       {{ fullName }} {{ age }}
    

    

计算属性的setter和getter

当改变了firstName和lastName时，set起作用，同时会重新计算fullName的值，页面中的fullName也会发生变化

    
    
    


    

        {{fullName}}
    

    

Vue中的样式绑定

• class对象绑定
• calss数组方式绑定
• style内联绑定
• style数组方式绑定

    
    
    
    


    
    

        

            Hello world
        
    

    

这里只上传了一个绑定样式，另外三种可以在我的GitHub上看到

Vue中的条件渲染

v-if与v-show的区别：

• 手段： 
  v-if是动态的向DOM树内添加或者删除DOM元素； 
  v-show是通过设置DOM元素的display样式属性控制显隐； 
• 编译过程： 
  v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； 
  v-show只是简单的基于css切换； 
• 编译条件： 
  v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); 
  v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留； 
• 性能消耗： 
  v-if有更高的切换消耗； 
  v-show有更高的初始渲染消耗； 
• 使用场景： 
  v-if适合运营条件不大可能改变； 
  v-show适合频繁切换。
  

    
    
    


    

        
{{message}}
        
Bye World
        
{{message}}
    

    

Vue中的列表渲染

不能通过数组的下标来改变对应的内容，页面不会发生对应的改变，只能通过push pop shift unshift splice sort reverse这7个方法来操作。(还可以直接操作数组的引用来改变内容)

    
    
    


    

        

            {{index}}------{{item.text}}
        
    

    

遍历对象

不能直接动态的添加新的属性（vm.userInfo.address = "beijing",这样添加新的属性，数据发生变化了，页面却不会变化），只能修改引用，重新改变整个对象

    
    
    


    

        

            {{item}} --- {{key}} ---{{index}}
        
    

    

Vue中的set方法

    
    
    


    

        

            {{item}} --- {{key}} ---{{index}}
        
    

    

• Vue全局方法set来添加对象userInfo新的属性     Vue.set(vm.userInfo, "address","beijing")
• 通过实例的实例方法$set来添加对象userInfo新的属性    vm.$set( vm.userInfo, "address", "beijing")

 如果是数组动态添加数据，也是可以用push pop shift unshift splice sort reverse这七种变异方法和引用新的数组来实现，同时也可以使用set方法来完成，也是可以通过Vue全局方法set和实例vm的$set方法来改变。(这里就不多赘述了)