Vue 基础精讲

Vue 官方文档：

---

 VUE 实例

　　每个组件都是一个 vue 的实例。

　　一个 vue 项目是由实例组成的。

　　vue 实例上有很多的实例属性和方法。

1  2  3  4  5     
      6     
      7     
      8      9     
     10     11 12 13 14     
     
      15         
      16         
      
        {
   {message}}
      
17         
      18     
     
19 20 21     44 45 46 47 

　　

利用浏览器控制台展示实例内容

　　

　　“$” 符号开始的变量都是vue实例属性或者方法。

 Vue 实例的生命周期钩子

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

生命周期图示

　　

使用生命周期函数

　　

beforeUpdate & updated 生命周期

1  2  3  4  5     
       6     
       7     
       8      9     
      10     11 12 13 14     15     
      
16 17     55 56 57 58 

 

　　

　　生命周期函数并不放在 methods 函数中。

Vue 的模板语法

    
         
         
                 
     
        
              
              
      
       {
    {name+' 同志'}}
      
        
              
      
        
              
      
    
     
    

　　

计算属性,方法和侦听器

计算属性  computed

1  2  3  4  5     
      6     
      7     
      8      9     10 11 12 13 14     
     
      15 16         {
     {fullName}}17         {
    {age}}18     
     
19 20     41 42 43 44 

　　

计算方法  methods

    
         
         
                 
     
        
              
              
              {
     { fullName() }}        {
    {age}}    
     
    

 　　

侦听器  watch

    
         
         
                 
     
        
              
              
              
              {
    { fullName }}        {
    {age}}    
     
    

 　　

计算属性的setter和getter 

    
         
         
                 
     
              {
    {fullName}}    
     
    

　　

Vue中的样式绑定

　　点击标签（div），实现标签内数据颜色变红，再次点击变回原色。

方式一  class的对象绑定

    
         
         
                     
     
        
      
               hello world        
      
    
     
    

　　

　　

方法二  

    
         
         
                     
     
        
              
              
      
                   hello world        
      
    
     
    

 　　

　　

方式三

    
         
         
                 
         
     
        
              
              
                      
      
                       hello world        
      
    
     
    

　　

Vue 中的条件渲染

    
         
         
                 
     
        
              
              
              
              
              
              
              
              
      
            
                   用户名：
               
      
         
      
                   邮箱名：
               
      
     
     
    

 

Vue中的列表渲染

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

　　

每一个循环项上，带一个唯一的 key 值，用来提高性能。

    
         
         
                 
     
        
      
                   {
     {item.name}} ------ {
     {index}}        
      
    
     
    

 　　

对数组的操作函数

　　

push　　:　　向数组中添加一条数据

　　

pop　　：　　删除数组最后一条数据

　　

shift　　：　　数组的第一项删除掉

　　

unshift　　：　　向数组的第一项加点内容

　　

splice　　：　　数组截取

　　

sort　　：　　对数组进行排序

　　

reverse　　：　　对数组进行取反

vue中的set方法 

1  2  3  4     
      5     
      6     
      7      8      9 10 11     
     
      12         
      
       13             {
    {item}} -- {
    {key}}  --  {
    {index}}14         
      
15     
     
16 17     30 31 32 

　　

　　

    
         
         
                 
     
        
      
                   {
    {item}}         
      
    
     
    

　　

 

项目代码已整理打包进GitHub

 

腰都直不起来了，有点辛苦，不过挺充实的！