学习笔记目录:
更新中…
- 推荐大家安装的 VScode 中的 Vue 插件
目录
什么是 vue
- 构建用户界面
- 用 vue 往 html 页面中填充数据,非常的方便
- 框架
- 框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能!
- 要学习 vue,就是在学习 vue 框架中规定的用法!
- vue 的指令、组件(是对 UI 结构的复用)、路由、Vuex、vue 组件库
- 只有把上面老师罗列的内容掌握以后,才有开发 vue 项目的能力!
vue 的两个特性
-
数据驱动视图:
- 数据的变化会驱动视图自动更新
- 好处:程序员只管把数据维护好,那么页面结构会被 vue 自动渲染出来!
-
双向数据绑定:
在网页中,form 表单负责采集数据,Ajax 负责提交数据。
- js 数据的变化,会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候,会被 vue 自动获取到,并更新到 js 数据中
注意:数据驱动视图和双向数据绑定的底层原理是 MVVM(Mode 数据源、View 视图、ViewModel 就是 vue 的实例)
vue 指令
1. 内容渲染指令
v-text
指令的缺点:会覆盖元素内部原有的内容!(除非我们有覆盖原本标签里面的内容的需求,否则的话,我们一般都是使用{{ }}插值表达式来实现的){{ }}
插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容!v-html
指令的作用:可以把带有标签的字符串,渲染成真正的 HTML 内容!
2. 属性绑定指令
注意:插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中!
-
在 vue 中,可以使用
v-bind:
指令,为元素的属性动态绑定值; -
简写是英文的
:
-
在使用 v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号(data数据中的变量的话,直接使用就可以使用+拼接,使用字符串的话,就需要将需要使用的字符串加上一个单引号,对于没有单引号的量,vue会自动到data里面去寻找对应的值,如果没有,就会报错!),例如:
<div :title="'box' + index">这是一个 div</div>
需要注意的是:我们所使用的插值表达式和绑定的方式,里面的内容都是可以直接进行简单的运算的,比如:
{{number+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div>
1+2的结果是{{1+2}}
</div>
//输出的是:1+2的结果是3
//下面的使用单引号表示字符串,进行的是字符串的拼接
<div v-bind:id="'list'+id"></div>
3. 事件绑定
在方法中访问Vue中的data里面的数据的话,我们直接可以使用this.调用相关的属性(这里面的this指的就是我们创建的Vue实例,也就是说我们也可以使用vm.来调用相关的data值),如果方法需要传递参数的话,绑定方法的时候就直接加上小括号,加上参数就可以了(就像平常的调用方法的那样)
-
v-on:
简写是@
-
语法格式为:
<button @click="add"></button>
<button @click="sub(2)"></button>
//注意:咱们vue项目里面的方法,一般都写在这个methods里面(注意是methods(是很多方法)而不是method)
methods: {
add() {
// 如果在方法中要修改 data 中的数据,可以通过 this 访问到(这里的this就相当于我们创建的Vue实例)
this.count += 1
},
sub(n){
this.count -= n
}
}
//在原生的DOM对象里面的onclick,oninput,onkeyup等等原生事件,替代成vue中的事件的形式后,分别可以表示为@click,@input,@keyup
$event
的应用场景:如果默认的事件对象 e 被覆盖了,则可以手动传递一个 $event。例如:
//如果在上面调用函数的时候没有传入参数,但是在methods中定义的方法中含有参数,比如含有一个参数e,因为我们这里绑定的是点击事件,所方法定义的里面的参数代表的就是我们这个点击事件对象,如果我们想对目标对象进行操作的话,就可以使用如下的target属性来调用响应的属性(当然如果调用的时候,传入参数了,那么这里的e表示的就是对应的传入的值了,而不是我们之前所说的事件对象了)
<button @click="add"></button>
methods: {
add(e) {
e.target.style.backgroundColor="red"
}
}
//如果默认的事件对象 e 被覆盖了(就比如说上面的那种情况,调用的时候也传入了参数),则可以手动传递一个 $event。($event是vue中提供的一个内置变量,他是DOM原生的事件对象 e 了;需要注意的是:$event 的传递是在调用函数的时候进行传递的)
<button @click="add(3, $event)"></button>
methods: {
add(n, e) {
// 如果在方法中要修改 data 中的数据,可以通过 this 访问到
this.count += 1
e.target.style.backgroundColor="red"
}
}
- 事件修饰符:(前两种比较常用,后面的三种不是很常用了解即可)
-
.prevent---阻止事件的默认行为
<a @click.prevent="xxx">链接</a> 原生DOM的实现方法:在点击事件里面加上下面的这条语句(假如事件对象是e) e.preventDefault()
-
.stop
<button @click.stop="xxx">按钮</button>
-
.capture---以捕获模式触发当前的事件处理函数
<button @click.capture="xxx">按钮</button>
-
.once---绑定的事件只触发一次
<button @click.once="xxx">按钮</button>
.self---只有在event.target是当前元素自身时触发事件的处理函数
<button @click.self="xxx">按钮</button>
按键修饰符(了解)
//每一次按键弹起就会调用一次clearInput函数 <input type="text" @keyup="clearInput"> <!-- 实现点击Enter(回车)按键的时候,会调用一次clearInput函数 --> <input type="text" @keyup.enter="clearInput"> <!-- 实现点击ESC按键的时候,会调用一次clearInput函数 --> <input type="text" @keyup.esc="clearInput">
4. v-model 指令—(只有和表单元素一块使用才有意义!)
我们可以理解为含有value属性的标签一般都可以使用v-model在标签里面指定的v-medel可以理解为双向绑定的value值(注意:仅仅是可以这样理解)
- input 输入框
- type=“radio”
- type=“checkbox”
- type=“xxxx”
- textarea
- select
<div id="app">
<p>用户的名字是:{{username}}</p>
<!-- v-model实现的是单向绑定 -->
<input type="text" name="" id="" v-model="username"> <hr>
<!-- v-bind实现的是单向绑定 -->
<input type="text" name="" id="" :value="username">
<select v-model="city">
<option value="">请选择</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">宁夏</option>
</select>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
username: "张三",
city: ''
}
})
</script>
v-model的修饰符:
.number—自动将用户输入的值转为数值类型
.trim—自动过滤掉用户输入的内容首尾两端的空白字符
.lazy—在“change”的时候更新,而不是“input”的时候更新(比如:在平常的话,我们在一个有双向绑定数据的输入框中更改值得话,数据会实时同步到对应的值,而加上这个修饰符之后,这个数据会在我们此次更改完之后才会进行更新,也就是说更新为最后的值,而没有了中间的那个过程)
使用的案例如下:
<div id="app">
<input type="text" v-model.number="num1">+<input type="text" v-model.number="num2">=<span>{{num1+num2}}</span>
<input type="text" v-model.trim="msg">
<input type="text" v-model.lazy="msg">
</div>
5. 条件渲染指令
v-show
的原理是:动态为元素添加或移除display: none
样式,来实现元素的显示和隐藏- 如果要频繁的切换元素的显示状态,用 v-show 性能会更好
v-if
的原理是:每次动态创建或移除元素,实现元素的显示和隐藏- 如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时 v-if 性能更好
在实际开发中,绝大多数情况,不用考虑性能问题,直接使用 v-if 就好了!!!
一个共同点:两者都是值为true的时候显示,值为false的时候不显示!
v-if 指令在使用的时候,有两种方式:
-
直接给定一个布尔值 true 或 false
<p v-if="true">被 v-if 控制的元素</p>
-
给 v-if 提供一个判断条件,根据判断的结果是 true 或 false,来控制元素的显示和隐藏(和v-bind类似,v-if设置的值中加上单引号的是字符串,不加单引号的就是指data中的变量)
<p v-if="type === 'A'">良好</p>
v-if的配套指令
v-else-if 和 v-else (其中的语法和正常的逻辑的if-else语法相同)
//根据data中type的值,来实现展示对应的等级
<div id="app">
<p v-if="type === 'A'">优秀</p>
<p v-else-if="type === 'B'">良好</p>
<p v-else-if="type === 'C'">一般</p>
<p v-else>差</p>
</div>
6.列表渲染指令
v-for列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使
用 item in items 形式的特殊语法,其中:
-
items 是待循环的数组
-
item 是被循环的每一项
还有一种就是两个参数的用法(item,index)in items—(一般这种方法并不是很常用)
- 两个参数分别是,被循环的每一项和该项的索引
<table class="table table-bordered table-striped">
<thead>
<th>索引</th>
<th>ID</th>
<th>姓名</th>
</thead>
<tbody>
//title属性:鼠标放在对应的条目上面的时候所显示的内容
//这个item被定义之后,立即就可以使用(比如说下面的这个例子:在tr的属性中定义,我们在他后面的属性就可以直接使用的!!!)
<tr v-for="(item,index) in list" :title="item.name">
<td> {{index+1}} </td>
<td>{{item.id}}</td>
<td> {{item.name}} </td>
</tr>
</tbody>
</table>
//-----------------------分割线-------------------------
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
key使用的注意事项:
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性(即:key 的值不能重复)
③ 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
④ 使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
⑤ 官方建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱;如果不指定key值的话,系统可能就会报错的!)
<tr v-for="(item,index) in list" :key="item.id" :title="item.name">
<td> {{index+1}} </td>
<td>{{item.id}}</td>
<td> {{item.name}} </td>
</tr>
day01案例:
学习笔记目录:
更新中…