vue官网
一、什么是 MVVM
- M — model 数据 （提供）
- V — view 界面 / 模板（提供）
- VM — viewModel 连接模板和数据（自动的处理数据和模板之间的关系）
二、实例基本选项 & 引入vue
const app= new Vue({
el: "#app", // el选项用来把当前实例挂载到 dom元素上
data: { // 提供实例模板需要的数据
},
methods: { // 提供实例和模板需要的方法
}
})
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
三、关键词
- 绑定： 订阅数据的变化，不能改变数据
- 双向数据绑定：订阅数据的变化，并且可以更改数据
四、数据的获取（this & 对象名称）
1. 在对象内部使用本对象的数据
this.username
const vm = new Vue({
el: "#app",
data: {
username: "宫鑫"
},
methods: {
move: function(){
// 读取
alert( this.username );
}
}
})
2. 在对象外部使用对象中的数据
vm.username
const vm = new Vue({
el: "#app",
data: {
username: "宫鑫"
}
})
// 读取
var user = vm.username;
五、vue指令
vue 指令集列表
| 指令名称 | 作用 | 备注 |
|---|---|---|
| v-model | 表单数据双向绑定 | |
| v-for | 循环 | |
| v-show | 显示与隐藏 | 不会从dom移除元素，是display:none；虽然隐藏，但是元素是被创建好的依然会消耗dom性能 |
| v-if | 显示与隐藏 | 从 dom 中移除元素；没有该元素，不会消耗性能； |
| v-else-if | ||
| v-else | ||
| v-bind | 给html属性绑定数据 | |
| v-on | 事件绑定 | |
| v-text | 类似于 el.innerText |
和 插值表达式{{}} 表现一致 |
| v-html | 类似于 el.innerHtml |
1. 插值表达式
{{ username }}
<div id="app">
{{username}}
</div>
new vue({
el: "#app",
data: {
username: "宫鑫"
}
})
2. v-model 指令
双向数据绑定，只能在表单上使用
<h1>{{username}}</h1>
<input type="text" v-model="username">
data: {
username: "宫鑫"
}
3. v-for 指令
- 简介
循环数组或对象
v-for指令和 for in & for of 相似，尤其和 for of 类似
- 使用
<div v-for="item in items"></div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
- 示例
<li v-for="(item,index) in users">
下标：{{index}}
<br />
姓名：{{item.name}}
<br />
年龄：{{item.age}}
</li>
data: {
users: [
{ name: "张三", age: "35" },
{ name: "李四", age: "35" },
{ name: "王五", age: "35" }
]
}
- 拓展
看一下 js 中的 for in 和 for of
let arr = ["张三", "李四", "王五", "赵六"];
let obj = {
name:"张三",
age: "22",
sex: "男"
}
// for in 循环的是 数组下标 或 对象键名
for(index in arr){
console.log(index);
// 0 1 2 3
}
for(index in obj){
console.log(index);
// name age sex
}
// for of 循环的是 数组项 但是不能循环对象，因为对象中没有遍历接口
for(item of arr){
console.log(item);
// 张三 李四 王五 赵六
}
4. v-show 指令
- 简介
通过表达式的真假来控制 display属性
- 示例
<div v-show="onOff">
{{onOff}}
</div>
data: {
onOff: true
}
5. v-if 指令
- 简介
根据表达式的值的真假条件决定是否渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
- 示例
<div v-if="onOff">
{{onOff}}
</div>
data: {
onOff: true
}
- 拓展
v-if 和 v-show 的比较
v-if 和 v-show 的比较：
v-show :
- 通过 display:none 来隐藏数据
- 缺点：如果数据太多的话，比如说10w条要显示10条，v-show虽然隐藏，但是元素被创建出来了，依然会消耗 dom 性能；
- 优点：频繁切换隐藏和显示状态的话，只是修改 display属性，比较快捷
v-if :
- 通过移除dom节点来隐藏数据
- 优点：如果有很多数据需要隐藏的话，使用v-if的话，在dom中直接没有该元素，不会消耗性能；
- 缺点：频繁切换隐藏和显示状态的话，如果要显示，dom需要重新创建，会消耗一定的性能；
总结：
1. 如果一个元素会频繁的隐藏与显示，选择 v-show；
2. 如果从优化性能的方面来考虑，就选择 v-if；
6. v-bind 指令
-
缩写：
: -
用法
直接在 html 的结构上绑定vue数据是无效的，这时候就要使用 v-bind属性了
- 示例
<div v-bind:class="style"> v-bind指令的使用 </div>
data: {
style: "wraper"
}
v-bind:class 和 v-bind:style 不只能绑定字符串，还能绑定数组和对象
- 拓展一： v-bind:class
优点： 切换性能更高
缺点： css样式要事先预设好
- 绑定对象
{ key : value}
key ：样式的名称
val ：布尔值 — 来决定这个样式是否生效
.wraper{
background:rgb(0, 46, 131);
line-height: 160px;
}
.font{
color: #fff;
font-size: 24px;
text-align: center;
}
<div v-bind:class="{
wraper: true,
font: true
}">
v-bind:class 绑定对象
</div>
- 绑定数组
.wraper{
background:rgb(0, 46, 131);
line-height: 160px;
}
.font{
color: #fff;
font-size: 24px;
text-align: center;
}
<!-- 1.当数组中是字符串时，class直接生效 -->
<div v-bind:class="['wraper', 'font']">
v-bind:class 绑定对象
</div>
<!-- 2.当数组中是对象时，判断值是否是true，是的话生效 -->
<div v-bind:class="[
'wraper',
{ font: true }
]">
v-bind:class 绑定对象
</div>
- 拓展二： v-bind:style
优点： css样式不用预设，直接给值
缺点： 相对 v-bind:class 来说，性能差一些
- 绑定对象
<!--
注意：
不能写 background-color
可以写成 'background-color' or backgroundColor
（加引号或者是小驼峰命名是可以的）
-->
<div v-bind:style="{
backgroundColor: 'red',
color: '#fff',
padding: '20px 0',
borderRadius: '10px',
textAlign:'center'
}"
>
v-bind:style 绑定对象
</div>
- 绑定数组
<div v-bind:style="[style01, style02]">
v-bind:style 绑定数组
</div>
data: {
style01: {
backgroundColor: 'red',
padding: '20px 0',
borderRadius: '10px'
},
style02: {
color: '#fff',
fontSize: '20px',
textAlign: 'center'
},
}
7. v-on 指令
- 缩写：
@ - 简介
事件的监听
- 示例
<button v-on:click="fn">点击事件</button>
methods: {
fn: function(){
console.log("触发了点击事件");
}
}
- 示例二 （事件对象）
无参时，直接通过 event 来获取
<button v-on:click="fn">点击事件</button>
fn: function(){
console.log(event);
}
有参时，通过 $event 传递事件对象
<button v-on:click="fn('宫鑫', $event)">点击事件</button>
fn: function (name, ev) {
console.log(name, ev);
}
8. v-text 指令
- 简介
类似于 {{}} 插值表达式，都是将数据插入到 dom 结构中
不过与插值表达式不同的是插值表达式可以多个一起使用，而 v-text 却只能单独使用
- 示例
<div v-text="title"></div>
data: {
title: "宫鑫"
}
9. v-html 指令
- 简介
更新元素的 innerHTML
如果数据是 HTML 结构，插入到页面中只是普通的字符串，并不会编译成 html 结构，这时候就需要使用 v-html指令了
- 示例
<textarea v-model="msg" cols="30" rows="10"></textarea>
<div v-html="msg"></div>
data: {
msg: ""
}
注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。