这是我参与「第四届青训营 」笔记创作活动的第3天
一、 Vue简介
1.Vue的定位是前端框架，因为它提供了构建用户界面的一整套解决方案
- vue（核心库）
- vue-router（路由方案）
- vuex（状态管理方案）
- vue组件库（快速搭建页面UI效果的方案）
2.辅助vue项目开发的一系列工具
- vue-cli（npm全局包，一键生成工程化vue项目，基于webpack）
- vite（npm全局包：一键生成工程化的vue项目，新一代）
- vue-devtools（辅助调试）
- vetur（语法高亮）
3.vue的特性
- 数据驱动视图
- 双向数据绑定
- MVVM
二、vue基本使用步骤
1.导入vue.js的script脚本文件
<script src="./vue-3.1.0.js"></script>
2.页面中声明一个被vue控制的dom区域
<div id="app">{{username}}</div>
3.创建vm实例对象
<script>
const vm = new Vue({
el:'#app',
data:{
username: 'zs'
}
})
</script>
三、vue指令
1.v-bind属性绑定
为元素的属性绑定属性值，单向绑定
<input type="text" v-bind:placeholder="inputvalue" />
data:{
inputvalue: "请输入内容“
}
这样如果inputvalue的值发生变化，则placeholder的属性值也会相应变化，v-bind可以简写为"：",即：
<input type="text" :placeholder="inputvalue" />
2.v-on事件绑定
同原生DOM对象的onclick，同来为DOM元素绑定时间监听
<p>{{count}}</p>
<button v-on:click="addCount">+1</button>
data:{
count: 0
},
methods:{
addCount(){
this.count += 1
}
}
点击按钮之后，dom元素中的count自加一，v-on:click可以简写成@click
<button @click="addCount">+1</button>
3.event事件对象
事件处理函数会接收到一个事件的对象event
<p>{{count}}</p>
<button v-on:click="addCount">+1</button>
data:{
count: 0
},
methods:{
addCount(e){
e.target.style.backgroundColor === 'red' ? '': 'red'
this.count += 1
}
}
上述代码，每次点击按钮背景颜色都会在白色和红色之间切换，如果事件参数还需要同时传别的参数，event参数用$event表示
<button @click="addCount(2,$event)">+1</button>
- 事件修饰符
<a href="#" @click.prevent="addCount(2,$event)">+1</a>
<!-- 阻止a标签原本的跳转行为-->
- 按键修饰符
<button @keyup.enter="submit" @click="submit">submit</button>
- 上述代码，监听键盘enter键，如果按下则执行提交方法
4.v-model双向绑定指令
令开发者在不操作dom的情况下，快速获取表单数据，双向绑定
<input type="text" v-model"inputvalue" />
data:{
inputvalue: "请输入内容"
}
- 只要data和html两处的属性值有一处发生变化，则两处都会相应变化（双向绑定）
- 只能用于表单元素 ,
<div> <p>之类不可以 - v-mdel修饰符
<input type="text" v-model.number"inputvalue" />
<!-- .number自动转化为数字 -->
<input type="text" v-model.trim"inputvalue" />
<!-- .trim自动去除前后多余空格 -->
<input type="text" v-model.lazy"inputvalue" />
<!-- .lazy失焦才更新数据 -->
5.v-if条件渲染指令
v-if、v-show，共同控制DOM元素的渲染与否
<p v-if="flag">showed</p>
<button @click="switch">hide/show</button>
data:{
flag: true
},
methods:{
switch(){
this.flag == !this.flag
}
}
上述代码中，js可以直接写到" "中
<button @click="flag = ！flag">hide/show</button>
v-if和v-show的区别v-if动态地创建或移除DOM元素v-show会动态为元素添加或移除style="display:none;"样式v-if有更高的切换开销，而v-show有更高的初始渲染开销
v-else和v-if配合使用
<p v-if="flag">showed1</p>
<p v-else>showed2</p>
- 还可以使用
v-else-if
<p v-if="flag">showed1</p>
<p v-else-if="flag && flag2">showed2</p>
<p v-else>showed2</p>
6.v-for列表渲染指令
- 基于数组来循环渲染相似的UI结构
<ul>
<li v-for="user in list">{{user.name}}</li>
</ul>
data:{
list:[
{id: 1, name: 'zs'},
{id: 2, name: 'lisi'}
]
}
- 支持可选的第二个参数索引
index,由零开始
<li v-for="(user,index) in list">{{user.name}}</li>
- v-for中包括index在内的参数都是形参，均可重命名
- vue会尽可能的复用已存在的DOM元素，如果不指定唯一的
key,则会导致列表状态无法被正确更新，所以要加上。
<li v-for="(user,index) in list" :key=user.id</li>
- key值注意事项
- 只能为数字或字符串
- 具有唯一性，不能重复
- 使用
index作为key没有任何意义 - 以后每次使用v-for都要指定key，只有好处,提升效率，防止紊乱
