推荐大家安装的 VScode 中的 Vue 插件
-
Vue 3 Snippets Vue 3 Snippets - Visual Studio Marketplace
什么是 vue
-
构建用户界面
-
用 vue 往 html 页面中填充数据,非常的方便
-
-
框架
-
框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能!
-
要学习 vue,就是在学习 vue 框架中规定的用法!
-
vue 的指令、组件(是对 UI 结构的复用)、路由、Vuex、vue 组件库
-
只有把上面老师罗列的内容掌握以后,才有开发 vue 项目的能力!
-
vue 的两个特性
-
数据驱动视图:
-
数据的变化会驱动视图自动更新
-
好处:程序员只管把数据维护好,那么页面结构会被 vue 自动渲染出来!
-
-
双向数据绑定:
在网页中,form 表单负责采集数据,Ajax 负责提交数据。
-
js 数据的变化,会被自动渲染到页面上
-
页面上表单采集的数据发生变化的时候,会被 vue 自动获取到,并更新到 js 数据中
-
注意:数据驱动视图和双向数据绑定的底层原理是 MVVM(Mode 数据源、View 视图、ViewModel 就是 vue 的实例)
vue 指令
1. 内容渲染指令 (用来辅助开发者渲染DOM元素的文本类容)
-
v-text
指令的缺点:会覆盖元素内部原有的内容! -
{ { }}
插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容! -
v-html
指令的作用:可以把带有标签的字符串,渲染成真正的 HTML 内容!
2. 属性绑定指令
注意:插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中!
-
在 vue 中,可以使用
v-bind:
指令,为元素的属性动态绑定值; -
简写是英文的
:
-
在使用 v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如:
<div :title="'box' + index">这是一个 div</div>
3. 事件绑定
-
v-on:
简写是@
-
语法格式为:
<button @click="add"></button> methods: { add() { // 如果在方法中要修改 data 中的数据,可以通过 this 访问到 this.count += 1 } }
-
$event
的应用场景:如果默认的事件对象 e 被覆盖了,则可以手动传递一个 $event。例如:<button @click="add(3, $event)"></button> methods: { add(n, e) { // 如果在方法中要修改 data 中的数据,可以通过 this 访问到 this.count += 1 } }
-
事件修饰符:
-
.prevent
阻止事件默认行为<a @click.prevent="xxx">链接</a>
-
.stop
阻止冒泡<button @click.stop="xxx">按钮</button>
-
4. v-model 指令(双向绑定指令)
-
input 输入框
-
type="radio"
-
type="checkbox"
-
type="xxxx"
-
-
textarea
-
select
-
v-model指令的修饰符
-
.number 自动将用户的输入值转换为数值类型
<input v-model.number="age" />
-
.trim 自动过滤用户输入的首尾空白字符
<input v-model.trim="msg" />
-
.lazy 在“ change ” 时而非“ input ” 时更新
<input v-model.lazy="msg" />
-
5. 条件渲染指令
-
v-show
的原理是:动态为元素添加或移除display: none
样式,来实现元素的显示和隐藏-
如果要频繁的切换元素的显示状态,用 v-show 性能会更好
-
-
v-if
的原理是:每次动态创建或移除元素,实现元素的显示和隐藏-
如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时 v-if 性能更好
-
在实际开发中,绝大多数情况,不用考虑性能问题,直接使用 v-if 就好了!!!
v-if 指令在使用的时候,有两种方式:
-
直接给定一个布尔值 true 或 false
<p v-if="true">被 v-if 控制的元素</p>
-
给 v-if 提供一个判断条件,根据判断的结果是 true 或 false,来控制元素的显示和隐藏
<p v-if="type === 'A'">良好</p>
6.列表渲染指令
-
v-for
指令需要使用 item in items 的形式的特殊语法 -
items是待循环的数组 item是被循环的每一项
data:{ list:[ {id:1,name:'zs'}, {id:2,name:'ls'} ] } <ul> <li v-for="item in list">姓名是:{ {item.name}}</li> </ul>
v-for指令还支持一个可选的第二个参数,即当前项的索引。 语法格式为
(item,index)in items
.
3.官方建议:只要用到了v-for指令,那么一定要绑定一个:key属性,而且尽量把Id作为key的值
4.官方对于key的类型是有要求的:字符串或数字类型。