Vue
1- Vue 概念
概念 : Vue是一个用于 构建用户界面 的 渐进式 框架
构建用户界面 : 基于数据渲染出用户看到的页面
渐进式 : 循序渐进
Vue的两种使用方式:
①Vue核心包开发
场景:局部模块改造 (也就是说直接引用vue)
②Vue核心包&Vue插件工程化开发
场景:整站开发
框架 : 一套完整的项目解决方案
优点:大大提升开发效率(70%)
缺点:需要理解记忆规则 → 官网
2- 创建实例
<!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>
<!--
目标: 使用 Vue 完成渲染
创建Vue实例,初始化渲染
1. 准备容器 (Vue所管理的范围)
2. 引包 (开发版本包 / 生产版本包) 官网
3. 创建实例
4. 添加配置项 => 完成渲染
-->
<!-- 1. 准备容器 (Vue所管理的范围) -->
<div id="app">
<!-- 完成渲染 -->
{{msg}}
</div>
<!-- 2. 引包 (开发版本包 / 生产版本包) 官网 学习阶段建议引用开发版本因为包含完整的警告和调试模式-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 3. 创建实例
const app = new Vue({
// 4. 添加配置项 => 完成渲染
el: '#app', // vue 管理的区域
data: { // 传入的信息
msg: '你好 小田 !!!'
}
})
</script>
</body>
</html>
3- 插值表达式 {{ }}
概念 :
插值表达式是一种Vue的模板语法 --可以把表达式的结果渲染到页面中–表达式有结果的都可以写到插值表达式中
表达式 : 可以被求值的代码
4- Vue的核心特性 : 响应式
1- 什么是响应式呢 ?
数据改变,视图自动更新 ( 数据驱动视图 )
2- 如何访问或修改数据 ?
data中的数据,最终会被添加到实例上
2-1 访问数据 : “实例.属性名”
2-2 修改数据 : “实例.属性名” = “值”
5- Vue指令
作用 : Vue会根据不同的【指令】,针对标签实现不同的【功能】–可以把指令看做一个特殊的HTML属性,都是以 v- 前缀的特殊 标签属性
1- v-html
作用: 设置元素的 innerHTML
v-html = “表达式”
注意: 如果使用了 v-html 则标签内不能再写入内容,会被v-html 覆盖
2- 控制元素显示隐藏
v-show 底层原理 : 通过设置 display : none 来改变盒子的显示状态
v-if 底层原理 : 通过创建 / 删除 DOM 元素来实现盒子的显示隐藏
两个的使用场景 :
v-show 比较适合频繁切换显示隐藏的场景
v-if 比较适合初始状态就决定了显示隐藏的场景
3- v-if 和 v-else
注意事项:
v-else 必须紧贴着 v-if 来编写, 中间不能有任何标签间隔 (注释除外)
<!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">
<!--
v-if 和 v-else 注意事项:
v-else 必须紧贴着 v-if 来编写, 中间不能有任何标签间隔 (注释除外)
-->
<p v-if="gender === 1">性别:♂ 男</p>
<!-- 你好我是注释 -->
<!-- <br> -->
<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="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 目标:
// 1. 根据条件渲染姓名
// 2. 根据成绩来渲染奖励
const app = new Vue({
el: '#app',
data: {
gender: 2,
// 想看到效果我们可以通过手动修改score的值
score: 95
}
})
</script>
</body>
</html>
4- v-bind
- 作用: 动态的设置html的标签属性 ----> src url title …
- 语法: v-bind:属性名=“表达式”
- 注意: 简写形式 :属性名=“表达式”
5- v-for
1- 作用 : 基于数据循环,多次渲染整个元素 一>数组、对像、数字 …
2- 遍历数组语法 :
v-for中的key
key作用:给元素添加的唯一标识,便于Vue进行列表项的正确排序复用。
注意点:
1.key的值只能是字符串或数字类型
2.key的值必须具有唯一性
3.推荐使用id作为key(唯一),不推荐使用index作为key(会变化,不对应)
<liv-for="(item,index)in xxx":key="唯一值">
6- v-model
1.作用:给表单元素使用,双向数据绑定→可以快速获取或设置表单元素内容
2.语法 : v-model = "vue变量 " ( 标签中的变量名要和vue创建的实例对象中data中的变量名仙童 )
3.效果 : 数据变化,视图会自动更新 用户输入内容,数据自动更新
<!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">
<!--
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="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
/**
* 目标: 理解 v-model 的使用
* 1. 使用 v-model 双向绑定用户名和密码
* 2. 点击登录时直接获取用户名密码数据
* 3. 点击重置时直接重置用户名和密码
*/
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login() {
console.log(this.username, this.password)
},
// 3. 点击重置时直接重置用户名和密码
reset() {
// this 指向 : new Vue( ) 创建的是一个实例对象 里面的属属性值挂载在该实例对象身上,我们可以直接用this拿去该对象身上的值 ( this 指的是该实例对象)
this.username = ''
this.password = ''
}
}
})
</script>
</body>
</html>