创建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>
