vue2
vue插件
1.Vue Snippets
2.Vetur
vue 的两个特性
-
数据驱动视图:
- 数据的变化会驱动视图自动更新
- 好处:程序员只管把数据维护好,那么页面结构会被 vue 自动渲染出来!
-
双向数据绑定:
在网页中,form 表单负责采集数据,Ajax 负责提交数据。
- js 数据的变化,会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候,会被 vue 自动获取到,并更新到 js 数据中
MVVM
数据驱动视图和双向数据绑定的底层原理是 MVVM(Mode 数据源、View 视图、ViewModel 就是 vue 的实例
VivwModel作为MVVM的核心
基本使用
1.导入vue.js的script脚本
<script src="./lib/vue-2.6.12.js"></script>
2.在页面声明一个将要被vue所控制的DOM区域
<div id="app">{
{username}}</div>
3.创建VM实例对象
const vm = new Vue({
el:'#app',
data:{
username:'zhangsan'
}
})
vue 指令
指令是vue为开发者提供的模板语法
1.内容渲染
2.属性绑定
3.事件绑定
4.双向绑定
5.条件渲染
6.列表渲染
1. 内容渲染指令
v-text
指令的缺点:会覆盖元素内部原有的内容!{ { }}
插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容!- 插值表达式中可以运算js表达式
<div :title="'box'+index">这是一个div</div>
v-html
指令的作用:可以把带有标签的字符串,渲染成真正的 HTML 内容!
2. 属性绑定指令
注意:插值表达式只能用在元素的内容节点中 ,不能用在元素的属性节点中!
-
在 vue 中,可以使用
v-bind:
指令,为元素的属性动态绑定值; -
简写是英文的
:
-
在使用 v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如:
<input type="text" :placeholder="tips">
data:{
tips:'请输入用户名'
}
3. 事件绑定
-
v-on:
简写是@
-
语法格式为:
<p>count的值是:{
{count}}</p>
<button @click="add">点击加1</button>
methods: {
add() {
// 如果在方法中要修改 data 中的数据,可以通过 this 访问到
this.count += 1
}
}
绑定传参
<button @click="add(2)">点击加2</button>
add(index){
this.count += index;
}
$event
是vue内置变量,表示原生的DOM事件对象
<button @click="add(1,$event)">如果count是偶数,则按钮背景变成红色,否则不变色</button>
add(n,e){
this.count += n;
if(this.count % 2 == 0){
e.target.style.backgroundColor = 'red'
}else{
e.target.style.backgroundColor = ''
}
}
事件修饰符:
事件修饰符 | 说明 |
---|---|
.prevent | 阻止默认行为(a链接跳转、表单提交) |
.stop | 阻止事件冒泡 |
.capture | 以捕获模式触发当前的事件处理函数 |
.once | 绑定的事件只触发一次 |
.self | 只有在event.target是当前元素自身触发事件处理函数 |
-
.prevent
阻止默认行为
阻止a链接跳转行为<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
-
.stop
阻止事件冒泡
<div style="height:150px;backgroundColor:orange;padding-left:100px;line-height:150px" @click="divHandler">
<button @click.stop="btnHandler">按钮</button>
</div>
按键修饰符
@keyup
<input type="text" @keyup.esc="clearInput($event)" @keyup.enter="commitAjax">
clearInput(e){
e.target.value=""
},
commitAjax(){
console.log('触发了提交');
}
4. v-model 双向数据绑定
帮助用户在不操作DOM的前提下,快速获取表单的数据
- input 输入框
<p>用户的名字是:{
{username}}</p>
<input type="test" v-model="username">
- textarea
<p style="white-space: pre-line;">{
{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
- select
v-model修饰符
修饰符 | 作用 |
---|---|
.number | 自动将用户的输入值转为数值类型 |
.trim | 自动过滤用户输入的首尾空白字符 |
.lazy | 在“change”时而非“input”时更新 |
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{
{n1+n2}}</span>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-445ECG0H-1648046654845)(D:\images\92518294628c3a565cb92ed70a861c1a0b5970378989976dc7630cd3d646fd2e.png)]
<input type="text" v-model.trim="username">
<button @click="show">获取用户名</button>
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>
key值管理可复用的元素
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template
v-for列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
<ul id="example-2">
<li v-for="(item, index) in items">
{
{ parentMessage }} - {
{ index }} - {
{ item.message }}
</li>
</ul>
建议给每个v-for提供一个唯一的key属性,既提升性能,又防止列表状态絮乱
1.key值只能是字符串或数字
2.具有唯一性
3.使用index做key没有任何意义
过滤器
过滤器的注意点
- 要定义到 filters 节点下,本质是一个函数
- 在过滤器函数中,一定要有 return 值
- 在过滤器的形参中,可以获取到“管道符”前面待处理的那个值
- 如果全局过滤器和私有过滤器名字一致,此时按照“就近原则”,调用的是”私有过滤器“
watch 侦听器
所有的侦听器,都应该被定义到 watch 节点下
侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
新值在前,旧值在后
watch: {
username(newVal,oldVal){
console.log("变换前"+oldVal);
console.log("变换后"+newVal);
}
}
判断用户名是否被占用
默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使
用 immediate 选项。示例代码如下:
watch: {
// 定义对象格式的侦听器
username: {
// 侦听器的处理函数
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
// immediate 选项的默认值是 false
// immediate 的作用是:控制侦听器是否自动触发一次!
immediate: true
}
}
handler是固定写法
侦听器的格式
- 方法格式的侦听器
- 缺点1:无法在刚进入页面的时候,自动触发!!!
- 缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器!!!
- 对象格式的侦听器
- 好处1:可以通过 immediate 选项,让侦听器自动触发!!!
- 好处2:可以通过 deep 选项,让侦听器深度监听对象中每个属性的变化!!!
deep选项 深度监听
如果 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选项
两种写法
直接获取要监听的属性名
watch: {
'info.username'(newVal) {
console.log(newVal)
}
通过deep选项监听
info:{
handler(newVal){
console.log(newVal);
},
deep:true
}
计算属性
特点:
- 定义的时候,要被定义为“方法”
- 在使用计算属性的时候,当普通的属性使用即可
好处:
- 实现了代码的复用
- 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage () {
return this.message.split('').reverse().join('')
}
}
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数
axios
axios 是一个专注于网络请求的库!
axios 的基本使用
-
发起 GET 请求:
axios({ // 请求方式 method: 'GET', // 请求的地址 url: 'http://www.liulongbin.top:3006/api/getbooks', // URL 中的查询参数 params: { id: 1 } // result 是返回的结果 }).then(function (result) { console.log(result) })
-
发起 POST 请求:
document.querySelector('#btnPost').addEventListener('click', async function () { // 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await! // await 只能用在被 async “修饰”的方法中 const { data: res } = await axios({ method: