VUE基础知识

目录

VUE概述

设计模型mvvm

VUE的七大属性

VUE的使用前提

vue的使用

com对象属性

案例 

注意：

计算属性

注意

vue指令

v-html与v-text

案例 

结论：

v-show

v-on

案例 

v-if

v-model双向绑定

案例 

v-bind

案例 

v-for

案例 

v-clock 

案例 

vue的生命周期函数

注意：

生命周期函数种类

1.初始化阶段

2.vue对象的修改

3.对象的销毁

代码展示 

VUE概述

vue框架是一个轻量级，渐进式的前端框架

特点：数据驱动mvvm组件化

好处：封装了DOM操作元素的API

设计模型mvvm

• m：model代表数据代表vue中data数据
• v：view视图层代表用户看到的页面展现的效果
• vm：view model：视图模型层，在内部进行计算，在页面进行展现

VUE的七大属性

el属性：用于指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符

data属性：用来组织view中抽离出来的属性，可以说将视图的数据抽象出来存放入data对象中

template属性：用来设置模板，替换页面元素，包括占位符

methods属性：放置页面中的业务逻辑，js方法一般都存放入methods

render属性：创建真正的virtual Dom

computed属性：一个能将计算结果缓存起来的属性

watch属性：

1. watch:funyoution(new,old){}
2. 监听data中的数据变化
3. 两个参数，一个返回新值，一个返回旧值

VUE的使用前提

引入vue.js文件：

vue原则：无侵入html，除非自己愿意——除非自己在对应的块上设置id，将来对对应块上的dom专门做vue的初始化工作

vue的使用

1. 导入vue.js文件
2. 写好一段模块代码，定义好id属性
3. 在创建一个vue对象并将该块的id属性挂载在vue对象中，然后就可以在此块中实现vue操作

语法：var vm=new Vue(com)

com对象属性

• el：挂载对应块的id选择器
• data：数据挂载对象，其写法也可以将data看作一个函数来返回一个对象进行书写
• methods：Vue中用到的方法集对象
• computed：Vue中的属性集对象
• components：Vue中的组件集对象
• router：路由对象

methods中函数的写法save函数为例（见前面）

• save:function(参数名){方法体}
• save(参数名){方法体}

案例 

    
    

        
        {{10+20}}
        {{myname}}
        点击修改
    
    
    

        {{20+30}}
    

注意：

• {{a}} 为插值表达式，是vue语法之一，其中a为一个表达式
• data里面的数据都挂到vm里面了，可以用vm.属性名来访问data里面的属性，当然，也可以通过this.属性名来访问

计算属性

计算属性的特点突出在属性两个字上，首先他是个属性，其次这个属性有计算的能力，这里的计算就是个函数，简单来说，他就是一个能将计算结果缓存起来的属性（将行为转化为静态属性），仅此而已，可以想象为缓存

computed：后面接一个对象，里面写属性集

    

        
方法：{{currentTime1()}}
        
属性：{{currentTime2}}
        
        点击对比
    

注意

• computed和methods内部的方法名不能重名，重名之后会直接调用methods
• methods：定义方法，调用方法使用方法名（）形式，需要带括号
• computed：定义属性，调用属性使用属性值形式，不需要带括号
• 如果属性值的方法中有值发生变化，则缓存就会刷新

理解：调用方法时每次都需要进行计算，既然有计算过，则必定产生系统开销，如果此结果不会经常发生变化，那么就可以考虑把这个结果缓存起来。计算属性的特性就是将不经常变化的计算结果缓存起来，以节约系统开销

vue指令

指令是带有v-前缀的特殊属性以代表他们是vue提供的特殊属性

v-html与v-text

案例 

​

    

        
        {{mytext}}
        

        

    



​

结论：

• v-html/v-text后面的属性会被当做一个变量
• v-html会解析这个变量内容，进而将他转变为特定格式
• v-text不会解析这个变量内容
• v-html/v-text块之间不能有内容，有内容则会被覆盖

v-show

作用：控制此块的展现与消失

v-show后面接一个表达式，如果表达式的值为true则展示此块内容，否则不展示

原理：css层面将此块的display设置为none 

v-on

• v-on:事件名=“函数”
• @事件名=“函数”

作用：此事件触发时立刻执行后面的函数 

案例 

    

        
{{word}}
        点击显示
        点击消失
    

v-if

作用：满足条件的块展示否则不展示

• v-if：后面接一个表达式，如果表达式的值为true则展示此块内容，否则不展示
• v-else-if：和v-if用法一致，如果v-if的表达式不满足条件就会直接走v-else-if
• v-else：如果v-else-if也不满足条件则会走v-else 

注意：3者按照从上到下顺序执行，三者是一个整体，如果v-if和v-else-if都满足则会只显示v-if块 

v-if和v-show的区别：v-if中如果不满足田间的块直接不存在，而v-show中不满足条件的块也存在只是不显示而已 

v-model双向绑定

通过v-model指令实现双向绑定，修改一方的同时修改相同的另一方，达到数据的同时更新，输入框等表单控件用的比较多

v-model=“vue中的数据属性” 

案例 

    

        
        
中年人
        
青年人
        
小屁孩儿
    

v-bind

当属性的值是变量而不是字符串时就可以通过v-bind标识，vue会自动处理

语法

• v-bind：属性名=“属性值”
• ：属性名=“属性值”

作用：标识属性名所对应的属性值是一个变量

案例 

    

        
        
我是一条狗狗
        换颜色
    

v-for

语法：v-for="(data,index) in datalist"

属性 

• datalist：为挂载在vue的data里面数据集合
• data：为datalist里面的单个数据
• index：为数据所在的下标索引，从0开始，其可以省略不写，不是必写项

案例 

    

    

        
{{data}}
    
    

v-clock 

语法：直接在未渲染完成的可能出现插值表达式等的地方加v-clock属性，然后通过属性选择器将v-clock的display属性设置为none

案例 

    

         {{msg}}
    

理解：页面未渲染完成时会先显示出标签，进而出现闪烁问题，通过以上方法，可以使未渲染完成时先隐藏标签，渲染完成之后再显示，这样就解决了闪烁问题

vue的生命周期函数

含义：vue实例在某一个时间点会自动执行的这些函数。我们通常也称其为钩子

注意：

1. 生命周期函数是vue针对用户提供的扩展的功能，如果编辑了生命周期函数，则vue对象会自动执行无需手动调用
2. 生命周期钩子函数不可以写成箭头函数
3. 在vue生命周期的不同时刻会执行不同的生命周期函数
4. vue生命周期函数写的位置与methods属性同级别

生命周期函数种类

1.初始化阶段

• beforeCreate：对象创建前
• created：对象创建后
• beforeMount：对象挂载前
• mounted：对象挂载后

2.vue对象的修改

• beforeUpdate：对象修改前
• updated：对象修改后

3.对象的销毁

• beforeDestroy：对象销毁前
• destroyed：对象销毁后

代码展示 

    

        
        
{{msg}}
        点击销毁
    
    
    

测试：进行修改和删除操作，并注视控制台的改变