Vue.js学习总结

一、什么是Vue.js

1. vue是一种数据驱动的前端框架

this.msg="我爱你"，通过改变数据，然后自动渲染到绑定的DOM节点上

2. jQuery就是一种结构驱动的前端框架

$(#app).text('你真好'),先获取结构，然后在修改数据来更新结构

二、搭建环境

首先保证你的电脑上有node和npm，版本越新越好

1. npm install -g vue-cli
   全局安装脚手架工具，安装的时候可以指定版本
2. vue init webpack myProject
   用webpack工具初始化vue项目，myProject是项目名称，可以自己命名
3. cd myProject
   进入创建的vue项目目录
4. npm install
   安装项目所需要的依赖，也就是安装一些必要的插件
5. npm run dev
   开始运行项目

三、Vue核心知识点

1. Vue实例

1.1

vue实例被创建时，它会自动的将data中的属性，methods中的方法绑定到Vue实例对象上,也就是Vue实例代理了data对象上的所有属性
调用时： vm.msg = "hello world"

1.2

data中存在的属性才是响应式的，新添加的不算
比如在浏览器端添加： vm.b = 1,那么b的变化不会对页面进行渲染

1.3

Object.freeze(),会阻止修改现有的属性，响应系统无法再追踪变化
var data = {msg: 1} ; Object.freeze(data)

1.4

Vue实例还暴露了一些有用的实例属性和方法，有前缀el vm.$data vm.$props……

3. Vue模板语法

2.1 动态参数

如果data中有一个属性attrName值为 href,那么这个绑定v-bind:href = 'url'
v-on:[eventName] = 'doSomething'>
同样，在data中有eventName的值为focus函数时，v-on:focus = 'doSomething'

注意：
2.1.1. 动态参数值是字符串类型，值为null，用于解除绑定，其他任何非字符串类型的值都会触发一个警告
2.1.2
无效,要使用没有空格和引号的表达式，或者用计算属性代替

2.2 修饰符

.prevent告诉v-on指令对于触发的事件调用event.preventDefault()

3. 计算属性、方法和侦听器

3.1 计算属性

计算属性有缓存，依赖改变才会重新计算

    
       {{fullName}}
        {{age}}
 
            

3.1.1 计算属性中的 getter和setter

      computed: {
                fullName: {
                    //自动执行，获取 fullName 的值
                    //并且 get 依赖的变量发生改变时，get就会重新进行计算
                    get () {
                        return this.firstName + " " + this.lastName 
                    },
                    //当重新设置fullName的值的时候，set函数就会执行 vm.fullName = 'Mike Wang'
                    //value就是 vm.fullName = 'Mike Wang'
                    //set函数里，重新设置 fullName 改变了firstName lastName，触发了get 进行计算
                    set (value) {
                        var arr = value.split(' ')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }

3.2 方法

            methods: {
                //没有缓存，只要页面上有内容变动，就会执行
                fullName () {
                    console.log('打印了一次')
                    return this.firstName + ' ' + this.lastName 
                }
            },

3.3 侦听器

            watch: {
                //有缓存，只有监听的属性变量发生改变，才会执行函数内的内容
                firstName () {
                    console.log('打印了一次')
                    return this.fullName =  this.firstName + ' ' + this.lastName 
                },
                lastName () {
                    console.log('打印了一次')
                    return this.fullName =  this.firstName + ' ' + this.lastName
                }
            },

注意： 计算属性和侦听器

• 计算属性的键名是计算出来的，所以键名是一个新的名称，在data和props中都是不存在的,计算属性一般可以监听多个值的变化
• watch侦听器就是已有值发生变化的时候执行的操作，所以侦听器的键名是data或者props中已经存在的

4.class与style的绑定

4.1 class的绑定

        绑定class对象语法：对象键是类名，值是布尔值 

        意思就是isActive是true，那么就绑定类名为divStyle的这个类
        
1223454
        哈哈，快点我
        绑定class数组语法：数组中的成员直接对应类名
        意思是绑定的类由 activeClass 这个变量来决定，若为空，就绑定空，若是active，就绑定类名为active的这个类
        
hhhhhh
    
    

4.2 style的绑定

    绑定内联样式：键代表的是style的属性（color,size属性等），值就是属性值啦
    切记： 在vue中，只要是大写字母，就会转变为  -小写
    fontSize ----> font-size
    

        
你丫真傻啊
    
    
    

5. 条件渲染

5.1 v-if

v-if绑定的变量若为true，则该元素就会出现在DOM中，并且在页面中渲染出来；若为false，则将该元素从DOM中移除

5.1.1 v-if使用

       
{{msg}}
    
   

5.1.2 v-if v-else-if v-else的使用

       v-if v-else-if v-else一定要连在一起写，中间不能有其他标签分隔开
       
this is A
       
this is B
       
this is others
    
   

5.1.3 key值的使用

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，所以如果是完全一样的文本框，vue会完全借用上一个文本框，如果不想复用，可用不同的key值区分。

注意：元素复用并不局限与文本框，其他元素都会复用的，这会极大的提高Vue的渲染效率

        

            用户名：
        
        

            lalala:  //会复用
            密码名： //不会复用
        

    
   

5.2 v-show

v-show绑定的变量无论是true还是false，它只是控制这个DOM元素的display：'none'这个style属性而已，这个元素一直在DOM中

6.列表渲染

6.1数组渲染

这种是工作中常用的循环，要加上key值，可以提高vue的性能，理想的 key 值是每项都有的唯一 id。key不建议使用index

注意：

• Vue有一组观察数组的变异方法，所以他们也会触发视图更新

方法如下：

1. push()----在数组末尾加上一项 vm.list.push({id:'004',text:'啦啦啦'})
2. pop()----将数组的最后一个元素移除
3. shift()----删除数组的第一个元素
4. unshift()----在数组的第一个元素位置添加一个元素
5. splice()----可以添加或者删除数组中的一个或多个元素—返回删除的元素

三个参数：

1. 表示开始操作的位置
2. 要操作的长度，为0，就是不删除
3. 为可选参数，可以把要添加的元素或者数组对象写在这里
   arr.splice(4,1,{ll:true})

6. sort()----排序
7. reverse()----数组反转

• 当我们想要修改数组中的元素的时候，不能通过下标的方式进行改变，只能通过Vue提供的几个数组变异方法来实现。
  比如想要在数组添加一项内容：
  vm.list[4]={id: '005',text:'hello world'}其实list数组中已经添加上了这一项，只是无法在页面中渲染出来
  比如在数组第二项后面添加一项内容：
  vm.list.splice(1,0,{id:'001',text:'第三项'})

• 当我们想要修改数组中的元素的时候，还可以通过改变数组的引用，就是对数组进行重新赋值

• 当我们想要修改数组中的元素的时候，还可以通过set语法
  Vue.set(vm.list,1,{id:'007',text: '你真傻'})或者vm.$set(vm.list,1,{id:'007',text: '你真傻'}),中间数字为操作元素的index值

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

    

如果我们想要通过一个list循环两项，比如div和span

两个循环完全独立，不符合预期

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

外面包一层div,效果可以，但我们并不想要包裹的div出现在DOM中

        

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

满足预期，且在DOM中不会出现template标签

        
    

6.2 对象渲染

参数顺序：拿到value key index 的写法   v---k---i  外开

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

    

注意：
对象里面要想添加某一项，用点语法是行不通的
比如：vm.userInfo.address = 'ZhengZhou',在页面中渲染不出来

• 通过改变对象引用，就是为对象重新赋值的方式来改变对象内容
• 通过set语法 Vue.set(vm.userInfo,'address', 'beijing')或者vm.$set(vm.userInfo,'adress','beijing')

7.组件使用中的一些细节

7.1 table中的问题

正常情况下如此

        

            

                
1
                
2
                
3
            
        
    

每一行都引入一个组件，但是渲染的时候发现渲染出来的 row 并不在 tbody 标签里面
因为 tbody 标签里面只能写 tr,其他标签他识别不了

        
    
    

使用is属性可以解决这个问题

比如：这几种情况最好也不要直接写组件，用is属性来实现
 

      

 
  

      

  
  

      
  

7.2 组件中的data

组件都是可以复用的，所以组件中data也得是一个独立的对象，那么组件之间的data才不会相互干扰

7.3 ref的使用

ref在dom标签上使用，指向的是这个dom节点

        

        hello world
    
    
    

ref在一个组件上使用，实际上是对这个组件的一个引用

        
        
        
{{sum}}
    
    

8. 父子组件间数据传递

8.1 父组件向子组件传递数据

注意：

1. 父组件向子组件传值时，传值参数前最好加上v-bind，以下面为例：
   count="1"就是传递的字符串1
   :count="1"就是数字1，
   不加：，那么传递参数就是参数后的那个值
   加：，那么传递参数就是引号里面的js表达式
2. 子组件接收到父组件传过来的值，是不能修改的，不要在子组件中修改props中的值，vue中有单向数据流的概念，即父组件向子组件传值时，父组件中可以随意修改所要传递地数据，子组件不能反过来修改父组件传递来的数据

如果你在子组件中修改了props：

1. 如果传过来的是基本类型，那么会有警告，但在页面中正常渲染
2. 如果是引用类型（对象，数组），vue会检测不到变化，页面中也不会渲染

如何修改传递过来的值？

• 把传递过来的值赋值给子组件data的一个属性里，就可以修改啦

    
    
   
   

//正确写法
var counter = { //局部组件，需要在父组件中注册
           props: ['count'],
           data () {
            return {
                number: this.count
            }
           },
           template: '
{{number}}
',
           methods: {
               handleClick () {
                this.number ++
               }
           }
       }
      

8.2 子组件向父组件传递数据

    
    
    
{{total}}
   
   

8.3 组件参数校验与非props特性

以下是props的参数校验的几种写法，以及参数意思

props特性和非props特性

1. props特性就是父组件传递过去，子组件有接收，接收后这个特性就不会出现在DOM结构中
2. 非props特性就是父组件传递过去，子组件没有接收，会在DOM结构中出现（了解）

8.3 自定义事件和原生事件

1. 自定义事件：子组件在父组件中使用时，直接绑定在子组件上的事件就是自定义事件，必须经过子组件的触发才能执行
2. 原生事件：直接在子组件里的模板上绑定的事件，子组件引入后是可以直接使用的
3. 怎么在父组件的子组件里直接绑定原生事件，不用子组件的再次触发呢？

直接在绑定的自定义事件后加上修饰符.native

 

         //在这里绑定的是自定义事件，必须经过子组件的触发才能执行
    
    

9. 非父子组件之间的传值

bus/总线/发布订阅模式/观察者模式
步骤：

1. 建立总线 Vue.prototype.bus = new Vue()
2. 在子组件中触发 this.bus.$emit('change',this.selfContent)
3. 在子组件mounted生命周期钩子函数中监听 this.bus.$on('change',(value)=>{})value就是传过来的值，可以进行操作

10. 插槽

10.1 没有插槽前的传值方式

父组件向子组件传值，采用props传值，可以传少量的值，但如果数值较多的话，代码可读性会很低

插槽

 

        
            
Dell
        
    
    

具名插槽，可以在父组件中插入多个模块的内容

        
            
header
            
footer
        
    
    

作用域插槽

• 执行逻辑：

1. 父组件调用子组件时，向子组件传递了一个插槽
2. 子组件通过slot向父组件传递数据，比如: :item = item
3. 插槽是作用域插槽，插槽必须写在template里面，同时声明从子组件接收的数据都放在props里面
4. 在template里面写上模板的信息，以什么方式进行展示

• 什么时候用作用域插槽？
  子组件做循环或者有一部分的DOM结构要由外部传过来的时候

作用域插槽改写

11. 动态组件和v-once指令

1. 动态组件

动态组件中is属性根据绑定的组件名的不同会动态的切换组件

2. v-once 使用

子组件中加上v-once，也就是第一次执行的时候就把子组件放入内存，下次直接复用即可，所以如果子组件内容不变的话，加上v-once会提高vue性能

        
        
        
        change
    
    

12.Vue动画

12.1 css过渡动画

过渡动画原理：

1. 在需要过渡的元素外面包裹上transition标签，那么vue执行代码的时候就会对被包裹的元素进行解析
2. 以缓动出现为例：

• 动画开始前，vue刚开始解析代码，就会给transition包裹的标签（div）加上v-enter , v-enter-active两个类（注意可以给transition加name，那么v就换成name名称）
• 动画开始时，去掉fade-enter这个类，添加fade-enter-to这个类
• 动画结束时，所有的类都去掉

3. 我们可以根据这些类的添加和删除为这些类添加一些样式，来做出动画效果

缓慢出现类名图示.png

缓慢离开类名图示.png

代码如下：

    

        
            
hello world
        
        切换
    
    

12.2 在Vue中使用animate.css库

Vue中使用keyframes

v-enter-active, v-leave-active在动画整个过程都是存在的，所以可以在这里面写效果

vue提供的原生类名太长，想换类名怎么办？

可以在transition里面自己设置类名 比如：enter-active-class='enter' leave-active-class='leave'，那么这两个类就可以这样简写啦

    

        
            
hello world
        
        切换
    
    

使用animate.css库
如何使页面出现以及刷新的时候也出现动画呢？

在transition中加入属性appear,类appear-active-class='animated swing'

        
            
hello world
        
        切换
    
    

12.3 在vue中同时使用animate.css库和transition

注意： animate.css动画默认时间是1s,所以如果transition和animate时间不一致？
怎么办？

1. 加type="transition"用来指定以谁的时间为准
2. 自定义时间:duration="5000"

    

        
            
hello world
        
        切换
    

12.4 js 动画

js动画钩子：

1. before-enter: 动画开始执行前就执行啦
2. enter: 动画开始的时候执行
3. after-enter: 动画结束时执行
   离开动画与进入动画一样before-leave,leave,after-leave

        
            
hello world
        
        切换
    
    

12.5 Velocity动画库的使用

 

        
            
hello world
        
        切换
    
    

12.6 Vue中多个元素或组件的过渡

• 多个元素的过渡

注意：多个元素的过渡，每个元素要加一个key,如果不加vue中会进行dom复用，就没有动画效果啦

    

        
            
hello world
            
bye world
        
        切换
    
    

• 多个组件的过渡

    

        
            
            
        
        切换
    
    

多个组件可以转化为动态组件

    

        
            
        
        切换
    
    

12.7 vue中的列表过渡

原理：

          
{{item.title}}

把循环的每一项都变成了

          
{{item.title}}

在进行渲染

    

        
            
{{item.title}}
        
        addOne
    
    

12.8 vue动画封装

        
            
hello world
        

        
            
I love you
        

        切换