创建Vue实例,初始化渲染
1.准备容器(Vue所管理的范围)
2.引包(开发版本包/生产版本包)官网
3.创建实例
4.添加配置项=>完成渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--这里将来会编写一些用于渲染的代码逻辑-->
</div>
<!--引入的是开发版本包-包含完整的注释和警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
//一旦引入 VueJS核心包,在全局环境,就有了 Vue构造函数
const app = new Vue({
//通过el配置选择器,指定Vue管理的是哪个盒子
el: '#app',
//通过data 提供数据
data:({
msg: 'Hello',
})
})
</script>
</body>
</html>
插值表达式
-
语法
{{ 表达式 }}
-
注意
使用的数据必须存在
支持的是表达式,而非语句
不能在标签属性中使用 (()) 插值
-
访问
实例.属性名
-
修改数据
实例.属性名=值
vue指令
-
v-html
设置元素的innerHTML
<div v-html="内容"> </div> /*内容可写 标签等 内容*/
-
v-show
- 原理:切换display:none控制显示隐藏
-
v-if
原理:控制元素的创建和删除
<div v-show="表达式"class="box">我是v-show控制的盒子</div> <div v-if="表达式"class="box">我是v-if控制的盒子</div>
-
v-else 和v-else-if
辅助v-if进行判断渲染
注意:要紧挨着v-if一起使用
<div id="app"> <p v-if="gender === 1">性别: 男</p> <p v-else>性别: 女</p> <hr> <p v-if="score>=90">成绩评定A:奖励电脑一台</p> <p v-else-if="score>=7o">成绩评定B:奖励周末</p> <p v-else-if="score>=6o">成绩评定c:奖励零食</p> <p v-else>成绩评定D:惩罚一周不能玩手机</p> </div>
-
v-on
注册事件=添加监听+提供处理逻辑
-
v-on:事件名="内联语句"
v-on:事件名="methods中的函数名"
可简写为@
函数内只有一句的,也可以直接写上
<button v-on:click="count++">按钮</button> <button @click="count++">按钮</button>
<div id="app"> <div class="box"> <h3>小黑自动售货机</h3> <button @click="buy(5)">可乐5元</button> <button @click="buy(10)">咖啡10元</button> <button @click="buy(8)">牛奶8元</button> </div> <p>银行卡余额:{{money }}元</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { money: 100 }, methods: { buy(price) { this.money -= price }, } }) </script>
-
v-bind
-
动态设置html的标签属性
v-bind:属性名="表达式"
简写: :属性名="表达式"
<div id="app"> <img v-bind:src="url"> </div>
-
操作class
:class="对象/数组"
-
对象 → key就是类名,value就是布尔值,为true 有个类,否则没有
适用于 一个类名,来回切换
<div class="box”:class="{ 类名1:布尔值,类名2:布尔值}"></div>
-
数组 → 数组中所有的类,都会添加到盒子上,本质就是一个class列表
适用于:批量添加或删除类
<div class="box" :class="[ 类名1,类名2,类名3]"></div>
-
-
操作style
:style="样式对象"
<div class="box":style="{ cSs属性名1:cSS属性值,CSs属性名2:cSs属性值}"></div>
-
-
v-for
基于数据循环,多次渲染整个元素 → 数组、对象、数字……
-
v-for = "(item,index) in 数组"
其中 item是 每一项, index 下标
加入 key 可以给列表项添加唯一标识,便于vue进行列表项的正确排序复用 ;如果 不加 key v-for的默认行为会尝试 原地需改元素(就地复用)
<li v-for=" (item, index) in xXX" :key="唯一值">
<div id="app"> <h3>小黑水果店</h3> <ul> <li v-for="(item,index) in list" :key="item.id"> {{ item }}-{{ index }} </li> </ul> </div> <script> const app = new Vue({ el: '#app', data: { list: ['西瓜', '苹果', '鸭梨', '榴莲'] } }) </script>
-
v-model
-
作用:给表单元素使用,双向数据绑定 → 可以快速获取或设置表单元素内容
数据变化→视图自动更新
视图变化→数据自动更新
v-model='变量'
<div> 账户:<input type="text" v-model="username"> <br><br> 密码:<input type="password" v-model="password"><br><br> <button @click="login">登录</button> <button @click="reset">重置</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
-
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login() {
console.log(this.username, this.password)
},
reset() {
this.username = 'this.password = '
}
}
})
</script>
-
其他表单元素
它会根据控件类型自动选取正确的方法来更新元素
-
单选框
name:给单选框加上name属性可以分组
value:给单选框加上value属性,用于提交给后台的数据
<input v-model="genden" type="radio"name="genden" value="1">男 <input v-model="gender" type="radio" name="genden" value="2">女
-
复选框
绑定一个数组,选中/取消选中 时会将值 添加到数组/在数组中删除
-
- 下拉菜单
option 需要设置value 值,提交给后台
select 的value 值,关联了选中的 option 的 value 值
<select>
<option value="101">北京</option>
<option value="102">上海</option>
<option value="103">成都</option>
<option value="104">南京</option>
</select>
-
指令修饰符
通过指明一些指令后缀不同后络封装了不同的处理操作 → 简化代码
-
@keyup.enter
键盘回车监听
<input @keyup.enter="函数名"
-
v-model.trim
去除首尾空格
<input v-model.trim="username">
-
v-model.number
转数字
<input v-model.trim="age">
-
@事件名.stop
阻止冒泡
<div @click.stop="函数名"></div>
-
@事件名.prevent
阻止默认行为
<a @click.prevent href="http://www.baidu.com"> </a>
-
计算属性
基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算。
- 声明在computed 配置项中,一个计算属性对应一个函数
- 使用起来和普通属性一样使用 {{ 计算属性名 }}
<script>
const app = new Vue({
el: '#app',
data: ({
msg: 'Hello',
}),
method:{
login() {
},
},
computed:{
totalcount(){
}
}
})
</script>
-
computed 计算属性:
封装了一段对于数据的处理,求得一个结果。有缓存特性 > 计算属性会对计算出来的结果缓存,再次使用直接读取缓存,依赖项变化了,会自动重新计算→并再次缓存
-
methods 方法:
给实例提供一个方法,调用以处理业务逻辑
上面是计算属性默认的简写只能读取访问,不能“修改"
计算属性的完整写法
computed:{
计算属性名:{
get() {
一段代码逻辑量(计算逻辑)
return结果
},
set(修改的值){
一段代码逻辑(修改逻辑)
}
}
}
<div id="app">
姓:<input type="text" v-model="firstName">+
名:<input type="text" v-model="lastName"> =
<span>{{ fuliName}}</span><br><br>
<button @click="changeName">改名卡</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app = new Vue({
el: '#app',
data: {
firstName: '刘',
lastName: '备',
},
methods:{
// 点击按钮后修改 fullName 这个 计算属性
changeName(){
this.fullName = '吕小布'
}
}
computed: {
// 简写 只是获取,没有配置设置的逻辑
fullName() {
return this.firstName + this.lastName
}
//完整写法
fullName:{
get(){
return this.firstName + this.lastName
}
}
}
})
</script>
比如,在表单中,复选框的勾选与取消勾选就可以式一个修改计算属性的过程
watch侦听器(监视器)
监视数据变化,执行一些 业务逻辑 或 异步操作
- 简单写法:简单类型数据,直接监视
<textarea v-model="words"></textarea>
<textarea v-model="obj.words"></textarea>
data:{
word:'苹果'
obj:{
words:'苹果'
}
},
watch:{
// 该方法会在数据变化时,触发执行
// newValue新值,oldValue老值(一般不用)
数据属性名(newValue,oldValue){
代码
}
'对象.属性名'(newValue,oldvalue){
代码
}
}
-
完整写法:添加额外配置项
deep:ttue 对复杂类型深度监视,对所有值进行监控
immediate:true 初始化立即执行一次handler方法
obj:{ words:'' lang:'' }, watch:{ obj:{ deep:true, immediate:true, handler(newValue){ 代码 } } }
无关页面渲染的直接在实例上挂,可以不写在data上
this.timer=xxx 直接赋值
this.timer 访问
31-33 watch侦听器(监视器)
监视数据变化,执行一些 业务逻辑 或 异步操作
- 简单写法:简单类型数据,直接监视
<textarea v-model="words"></textarea>
<textarea v-model="obj.words"></textarea>
data:{
word:'苹果'
obj:{
words:'苹果'
}
},
watch:{
// 该方法会在数据变化时,触发执行
// newValue新值,oldValue老值(一般不用)
数据属性名(newValue,oldValue){
代码
}
'对象.属性名'(newValue,oldvalue){
代码
}
}
-
完整写法:添加额外配置项
deep:ttue 对复杂类型深度监视,对所有值进行监控
immediate:true 初始化立即执行一次handler方法
obj:{ words:'' lang:'' }, watch:{ obj:{ deep:true, immediate:true, handler(newValue){ 代码 } } }
无关页面渲染的直接在实例上挂,可以不写在data上
this.timer=xxx 直接赋值
this.timer 访问
vue的生命周期
-
创建
相应数据
-
挂载
渲染模板
-
更新(数据更新会触发这个阶段)
数据修改(beforeUpdate),更新视图(updated)
-
销毁(关闭页面会触发,调试可以使用 实例名.$destroy 触发)
销毁实例
在这四个周期中,每个阶段的前后 都有一个(共八个)生命周期函数(钩子函数),让开发者可以在特定阶段运行自己的代码。
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed
如在 created 发送初始化渲染请求 ,mounted操作dom,before Destroy 释放Vue以外的资源(清除定时器,延时器...)
// 如 在页面渲染完后自动聚焦输入框
<script>
const app = new Vue({
el: '#app',
data: ({
msg: 'Hello',
}),
mounted(){
document.querySelector('#inp').focus
}
})
</script>