VUE基础

目录

VUE概述

设计模型mvvm

VUE的使用前提

vue的使用

com对象属性

案例 

注意：

vue指令

v-html与v-text

案例 

结论：

v-show

v-on

案例 

v-if

v-model双向绑定

案例 

v-bind

案例 

v-for

案例 

VUE概述

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

特点：数据驱动mvvm组件化

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

设计模型mvvm

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

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中用到的方法集对象

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

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

案例 

    
    

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

        {{20+30}}
    

注意：

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

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}}