day1–2023.6.23
Vue快速上手
Vue 概念
Vue是一个用于构建用户界面的渐进式框架
构建用户界面:基于数据渲染出用户看到的页面
渐进式:循序渐进
Vue的两种使用方式
- Vue 核心包开发
- 场景:局部模块改造
- Vue 核心包 & Vue 插件工程化开发
- 场景:整站开发
框架
一套完整的项目解决方案，提升开发效率(理解记忆规则)
规则一 官网
创建Vue 实例,初始化渲染
构建用户界面–>创建Vue实例 初始化渲染
步骤;
- 准备容器
- 引包(官网)–开发版本/生产版本
- 创建Vue实例 new Vue()
<script>
const app = new Vue({
el:'#app',
data:{
msg: 'He1lo黑马'
}
})
</script>
- 指定配置项–>渲染数据
指定配置项 → 渲染数据
① el 指定挂载点
② data 提供数据
el:'#app'
插值表达式{ {}}
插值表达式是一种Vue的模板语法
- 作用: 利用表达式进行插值,渲染到页面中
表达式:是可以被求值的代码,JS引擎会将其计算出一个结果 - 语法: { {}}
-
- 使用的数据要存在
- 支持的是表达式，不是语句 if for
- 不能在标签属性中使用 { { }}
<p:title="username"> </p>
响应式特性
Vue核心特性:响应式
响应式:数据变化,视图自动更新
响应式机制
如何访问或修改数据呢?
data中的数据最终会被添加到实例上
开发者工具
安装Vue开发者工具:装插件调试Vue应用
- 通过谷歌应用商店安装 (国外网站)
- 极简插件:下载–>开发者模式–>拖拽安装–>插件详情允许访问文件
Vue 指令
v-html / v-show /v-if / v-else / v-on / v-bind /v-for /v-model
Vue 会根据不同的指令，针对标签实现不同的功能
指令: 带有 v- 前缀的特殊 标签属性
v-html
作用: 设置元素的 innerHTML
语法: v-html="表达式
<div V-html="str"></div>
v-text不识别标签 v-html识别标签
v-show vs v-if
v-show
1.作用控制元素显示隐藏
2.语法:V-show =“表达式” 表达式值 true 显示，false 隐藏
3.原理切换 display:none 控制显示隐藏
4.场景:频繁切换显示隐藏的场景
v-if
1.作用:控制元素显示隐藏(条件渲染)
2.语法:v-if =“表达式” 表达式值 true 显示false 隐藏
3.原理基于条件判断，是否 创建 或 除 元素节点
4.场景:要么显示，要么隐藏，不频繁切换的场景
v-else v-else-if
- 作用:辅助 v-if 进行判断渲染
- 语法: V-else v-else-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 >=70">成绩评定B：奖励周末郊游</p>
<p v-else-if="score >=60">成绩评定C：奖励零食礼包</p>
<p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 1,
score: 2
}
})
</script>
v-on
- 作用: 注册事件=添加监听+提供处理逻辑
- 语法:
①v-or:事件名=“内联语句”
②v-on:事件名=“method中的函数名”
<button v-on:click="fn">按钮</button>
- 简写:@事件名
<button @click="fn">按钮</button>
- 注意:method函数中的this指向vue实例
v-bind
- 作用: 动态的设置html的标签属性–>src url title href
- 语法: v-bind:属性名=“表达式”
- 注意:简写形式:属性名=“表达式”
<div id="app">
<img v-bind:src="url" alt="">
</div>
<script>
const app=new Vue({
el:'#app',
data:{
url:'./imgs/10-02.png'
}
})
</script>
图片切换案例-波仔学习之旅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div id="app">
<button v-show="index > 0" @click="index--">上一页</button>
<div>
<img :src="list[index]" alt="">
</div>
<button v-show="index < list.length - 1" @click="index++">下一页</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
index: 0,
list: [
'./imgs/11-00.gif',
'./imgs/11-01.gif',
'./imgs/11-02.gif',
'./imgs/11-03.gif',
'./imgs/11-04.png',
'./imgs/11-05.png',
]
}
})
</script> -->
<div id="app">
<button v-show="index>0" @click="index--">上一页</button>
<img :src="list[index]" alt="">
<button v-show="index<list.length-1" @click="index++">下一页</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
index: 0,
list: [
'./imgs/11-00.gif',
'./imgs/11-01.gif',
'./imgs/11-02.gif',
'./imgs/11-03.gif',
'./imgs/11-04.png',
'./imgs/11-05.png',
]
}
})
</script>
</body>
</html>
v-for
-
作用:基于数据循环,多次渲染整个元素—> 数组,对象,数字
-
遍历数组语法
v-for =“(item,index) in 数组”- item 每一项，index 下标
- 数组省略index: v-for =“item in数组”
1.key 的值只能是字符串 或数字类型
2.key 的值必须具有 唯一性
3.推荐使用 id 作为 key (唯一) ，不推荐使用 index 作为 key (会变化，不对应)
v-model
- 作用:给表单元素使用,双向数据绑定—>可以快速获取或设置表单元素内容
①数据变化–>视图自动更新
②试图变化–>数据自动更新 - 语法:v-model=“变量”
<div id="app">
<!--
v-model 可以让数据和视图，形成双向数据绑定
(1) 数据变化，视图自动更新
(2) 视图变化，数据自动更新
可以快速[获取]或[设置]表单元素的内容
-->
账户：<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="./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>
综合案例-小黑记事本
列表渲染/删除功能/添加功能/底部统计/清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" /
最低0.47元/天 解锁文章
1381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
