MVVMM(data)–Model V(dom)–View VM–ViewModel VUE中VM就是Vue,从M取出数据通过Vue内部把数据渲染到View(每一个dom)Vue的生命周期Vue的基本语法插值操作mustache语法:双大括号语法,用于把data渲染到de...
MVVM
M(data)–>Model V(dom)–>View VM–>ViewModel
VUE中VM就是Vue,从M取出数据通过Vue内部把数据渲染到View(每一个dom)
Vue的生命周期
Vue的基本语法
插值操作
- mustache语法:双大括号语法,用于把data渲染到demo。
- v-once:原本不加v-once时,数据是响应式的。加了v-once数据渲染过一次就不会再改变了。
- v-html:该指令后面往往跟上一个String类型,将String类型的html解析出来并进行渲染。(url)
- v-text:不使用mustache语法时,用v-text将数据进行绑定。但是他会将原本的文本覆盖掉。
- v-pre:不对文本进行解析,直接原封不动的显示出来。
<h2 v-pre>{{messege}}</h2>
//直接显示{{messege}}
- v-cloak:vue解析之前,div有一个v-cloak属性,结合style使用。当解析完成后v-cloak无效。
动态绑定
- v-bond:在属性前面加上v-bond,相当于把后面的内容换成变量。
v-bond:src="aW1n" //img就是一个变量,不是实际意义。 语法糖 :src="aW1n"
- 动态绑定class的对象语法
:class="{className1:boolean,className2:boolean}"
- 动态绑定class的数组语法
:class="[className1,'claaaName2']" className1是变量,className2直接是字符。
- v-for:循环遍历data中的数据。
- computed计算属性:多次调用有缓存,只会调用一次。methods每次调用都会再调用一次,没有缓存。
- v-model:双向绑定。实质就是v-bond和v-on:input结合。
v-model的修饰符
- lazy:v-model.lazy表示在输入框中不用对用户输入的值进行实时绑定,那样更新频率太高没必要。而是当用户输入回车键或者输入框失去焦点时才进行双向绑定的更新。
- number:v-model在用户输入时默认获取到的值类型为string类型,如果输入数值时需要获取用户输入值类型为数值型可以用v-model.number
- trim:如果用户输入的内容首尾有很多空格,可以用v-model.trim过滤掉两边空格。
变量与常量
- let var与const的区别:
- let:定义变量,但是有块级作用域。
- var:定义变量,没有块级作用域。
- const:定义常量,定义后不能改变值。
事件
- 需要传入事件时,用$event获取事件。
元素的展示
- v-if:当取值为true时显示,为false时元素直接不存在。
- v-show:当取值为true时显示,当为false时元素样式增加一个属性display:none。
数组中的响应式函数
-
.push()在数组最后加入元素。
-
.pop()删除数组最后一个元素。
-
.shift()删除数组第一个元素。
-
.unshift()在数组开始处新增元素.
-
.splice():
- splice(1,2)从下标为1删除2个元素。
- splice(1)删除从1开始的所有元素。
- splice(1,0,‘x’,‘y’)从下表为1开始插入元素(删除0个元素)x、y。
- splice(1,3,‘x’,‘y’,‘z’)从下表为1开始插入3个元素x、y、z。
-
array[i]='x’不是响应式的。
-
.toFixed(n)保留n位小数。
高阶函数的使用
- map()函数
map()函数遍历整个数组,并返回每个元素乘2的值再转存到newarray数组。 newarray = array.map(function(n){
return n *2
})
- filter()函数
- filter()函数遍历整个数组,返回布尔类型的值,返回值为true则转存,为false则忽略。
newarray = array.filter(function(n){ return n > 100 })
- reduce()函数
- reduce()函数对数组中所有元素进行汇总(累乘、累加等)
- 下面的例子中初始值为0(通常为0)。
第一次previousValue=0,n则为第一个元素;
第二次previousValue=previousValue + n,n为第二个元素。以此类推…
newarray = array.reduce(function(previousValue,n){
return previousValue + n},0)
沃梦达教程
本文标题为:Vue.js基础知识
猜你喜欢
- layui数据表格以及传数据方式 2022-12-13
- vue keep-alive 2023-10-08
- ajax实现输入提示效果 2023-02-14
- jsPlumb+vue创建字段映射关系 2023-10-08
- 基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15
- JS实现左侧菜单工具栏 2022-08-31
- 1 Vue - 简介 2023-10-08
- 关于 html:如何从 css 表中删除边距和填充 2022-09-21
- javascript 判断当前浏览器版本并判断ie版本 2023-08-08