什么是 Vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
MVVM 模式的实现者 —— 双向数据绑定模式Model：模型层，在这里表示 JavaScript 对象
View：视图层，在这里表示 DOM(HTML 操作的元素)
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者
Hello World
VueDemo{{message}}
new Vue({
el: ".app",
data: {
message: "hello vue"
}
});
插值表达式
插值表达式的作用是在View中获得Model中的内容
{{message}}
{{[1,2,3,4][0]}}
{{ {name: "chan", age: 18}.name }}
{{say()}}
new Vue({
el: ".app",
data: {
message: "hello vue"
},
methods: {
say: function () {
alert("hi vue");
}
}
});
Vue 中的关键字
都是作为 Html 标签中的属性
v-model
MVVM 数据的双向绑定，标签的 value 绑定 vue 对象中的 data 属性值。
请输入名字：
{{name}}，你好！
new Vue({
el: ".app",
data: {
name: ""
}
});
v-on
绑定事件，属性格式为：v-on:
当 input 标签触发事件(比如 input、click 等等)，会调用 consoleText() 方法。
new Vue({
el: ".app",
methods: {
consoleText: function () {
console.log("input");
}
}
});
@
简化 v-on，属性格式为：@
event.target.value：表示获取当前事件的目标节点
event 可以获取事件的状态
target 返回触发此事件的元素(事件的目标节点)
以下代码同样可以实现输入 input 标签，改变 message 的值。
当前输入的内容为：{{message}}
new Vue({
el: ".app",
data: {
message: "",
},
methods: {
consoleText: function (event) {
// 当前 Vue 对象的 message 属性 = 事件对象(input标签)的 value 值
this.message = event.target.value;
}
}
});
v-bind
Html 标签属性中无法使用插值表达式，因此可以通过 v-bind 实现。
v-bind 也可以简写，属性格式为：v-bind:href 或者 :href
NOTHINGATLL
NOTHINGATLL
new Vue({
el: ".app",
data: {
link: "https://www.zqskate.com"
}
});
v-once
标签下插值表达式获取的数据只使用一次
{{message}}
v-html / v-text
v-html：span 标签下插入渲染成 html 的 link 值。
v-text：span 标签下插入 link 值，原样输出，不会被渲染成 html。
new Vue({
el: ".app",
data: {
link: "NOTHINGATLL"
}
});
事件
简单实现一个通过设置步长，对 count 进行加减的案例。
简单使用点击事件、鼠标移动事件、事件修饰符。
{{count}}
点击 +
点击 -
步长设置：
{{x}}:{{y}}
方式一：鼠标移动到此处触发鼠标移动事件调用方法进行停止
方式二：鼠标移动到此处通过事件修饰符进行停止
new Vue({
el: ".app",
data: {
count: 0,
step: 1,
x: 0,
y: 0
},
methods: {
/**
* count +
*/
add_count: function () {
this.count += Number(this.step);
},
/**
* count -
*/
reduce_count: function () {
this.count -= Number(this.step);
},
/**
* 计算坐标
* @param event 事件
*/
mouse_move: function (event) {
this.x = event.clientX;
this.y = event.clientY;
},
/**
* 停止事件
* @param event 事件
*/
stop_mouse_move: function (event) {
event.stopPropagation();
}
}
});
事件修饰符
事件的修饰
.stop 停止事件等等…
.prevent
.capture
.self
.once
.passive
按键修饰符
Enter 按键松开会触发事件调用方法。
下面代码按回车后控制台会打印文本输入框内容。
new Vue({
el: ".app",
data: {
message: ""
},
methods: {
my_submit: function () {
console.log(this.message);
}
}
});
Vue 改变内容，虚拟 DOM 和 DIFF 算法
插值表达式{{count > 10 ? '大于10':'小于十'}}
计算属性：computed
计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性，其次这个属性有计算的能力(计算
是动词)，这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；
methods：每次调用都会执行方法。
computed：首次调用方法获取结果，其后每次调用都会返回第一次计算出来的结果。
{{getDateMethod()}}
{{getDateComputed}}
var v = new Vue({
el: ".app",
methods: {
getDateMethod: function () {
return Date.now();
}
},
computed: {
getDateComputed: function () {
return Date.now();
}
}
});
监控：watch
通过 watch 给属性绑定函数，当属性的值发生改变，函数会被调用，函数可以接收两个参数：第一个参数为修改后的值，第二个参数为修改前的值。
new Vue({
el: ".app",
data: {
message: "message"
},
watch: {
message: function (a, b) {
console.log("消息被改变，新消息：" + a + ";旧消息：" + b);
}
}
});
Vue 改变样式
动态改变标签 class 属性
.my_color {
width: 100px;
height: 20px;
background-color: black;
}
.red {
background-color: red;
}
点击改变颜色
new Vue({
el: ".app",
data: {
temp: false
}
});
也可以通过 computed 改变
点击改变颜色
new Vue({
el: ".app",
data: {
temp: false
},
computed: {
my_style: function () {
return {
red: this.temp,
width: this.temp
}
}
}
});
双向绑定改变样式
input 输入对应设置好的 css 样式，即可改变样式。
new Vue({
el: ".app",
data: {
color: "red"
}
});
多个组合样式
内嵌样式
JSON 键必须驼峰命名，值为 Vue 中的属性
多个样式组合
颜色：
高度：
new Vue({
el: ".app",
data: {
color: "red",
height: 10
},
computed: {
my_color: function () {
return {
backgroundColor: this.color
}
}
}
});
虚拟 DOM 和 diff 算法
Vue 的高效核心，就是虚拟 dom 和 diff 算法，vue 不通过修改 dom 树来达到修改的效果，而是直接在页面上被修改的元素，此时这个元素就是一个虚拟的 dom，Vue 通过 diff 算法，计算出虚拟 dom 修改后和修改前的区别，然后再虚拟 dom 的原基础上进行修改，效率大大提升。
分支语句
v-if / v-else-if / v-else
点击
new Vue({
el: ".app",
data: {
flag: false
}
});
v-show
属性结构：v-show=”布尔值”，修改的是样式，当不显示时，样式为 display: none
v-for普通遍历
new Vue({
el: ".app",
data: {
args: [1,2,3,4,5]
}
});
定义下标遍历
遍历对象值
new Vue({
el: ".app",
data: {
people: {
name: chan,
age: 18
}
}
});
遍历 value key index 注意顺序
案例：简单表格
ID姓名年龄电话
{{i}}{{value}}new Vue({
el: ".app",
data: {
students: [
{
name: "小明",
age: 18,
tel: "19999999999"
},
{
name: "小红",
age: 19,
tel: "18888888888"
},
{
name: "小花",
age: 20,
tel: "17777777777"
},
]
}
});
扫一扫
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
