学习目标
- 一周掌握 VUE 的使用（陆续更新中）
学习内容：
- 了解vue的概念及特点
- 引入vue
- 掌握vue核心知识
笔记产出：
一、vue介绍
Vue.js，我们通常简称为Vue，是一个用于构建用户界面的渐进式JavaScript框架。它就像是一个超级强大的工具箱，帮助开发者更轻松、更高效地创建网页和应用程序。它易于上手，同时提供了强大的数据绑定和组合视图组件的能力。
二、引入Vue.js
首先，你需要在你的项目中引入 Vue.js。Vue.js 可以通过多种方式引入：
- CDN 引入：在你的 HTML 文件中，通过"script "标签从 CDN 引入 Vue.js。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
</head>
注意：这里使用的是 Vue 3.x 的版本链接，Vue 2.x 的 CDN 链接会有所不同。
- NPM 安装：如果你的项目是基于 Node.js 的，可以使用 npm 安装 Vue
npm install vue
然后在你的 JavaScript 文件中通过 import 或 require 引入 Vue。
三、知识点总结
1、挂载
“挂载”在通俗的含义上就是把一个对象或组件固定到另一个地方。在Vue中，就是把Vue应用固定到一个指定的DOM元素上，使得Vue能够管理和更新这个元素的内容。简单来说，就是把Vue的功能“挂”到网页上的一个特定区域。
在Vue 3中，挂载指的是使用createApp函数创建Vue应用实例，并将它挂载到一个DOM元素上。这个过程通过调用app.mount(‘#app’)来完成，其中’#app’是要挂载的DOM元素的选择器。
<body>
<div id="app">
<!-- 挂载点： -->
{{ message }}
</div>
<script>
// new Vue ({
// el:"#box",//"#"id选择器
// data:{
// message:'hello vue'
// }
// })//vue2
const {createApp} = Vue
createApp({
data(){
return{
message :'hello vue!'
}
}
}).mount('#app')
</script>
</body>
2、差值表达式
差值表达式是可以将Vue实例的数据动态地绑定到模板中。差值表达式主要使用双大括号（{{ }}）语法来插入和展示数据。
（1）基本语法
差值表达式的基本语法是双大括号：
{{ message }}
（2）数据绑定
差值表达式可以绑定Vue实例中的数据属性。任何在Vue实例的 data 中定义的数据属性都可以在模板中通过差值表达式访问和展示。如果 Vue 实例的 data 中有 message: ‘Hello, Vue!’，那么模板中的 {{ message }} 会被替换为 Hello, Vue!。
<body>
<!-- <div id="app"> 是Vue应用的挂载点，所有的Vue数据绑定将在这个元素内进行。 -->
<div id="app">
<label>欢迎语：</label><label>{{message}}</label><br>
</div>
<script>
const {createApp} = Vue//创建一个变量 名，gaga
createApp({
data() {
return {
message:'hellovue'
}
}
}).mount('#app')
</script>
</body>
（3）差值表达式的更多用法
在差值表达式中，还可以使用基本的 JavaScript 表达式，如算术运算、条件表达式等
<body>
<!-- <div id="app"> 是Vue应用的挂载点，所有的Vue数据绑定将在这个元素内进行。 -->
<div id="app">
<label>欢迎语：</label><label>{{message}}</label><br>
<label>姓名：</label><label>{{person.name}}</label><br>
<label>年龄：</label><label>{{person.age}}</label><br>
<label>性别：</label><label>{{person.gender == 0 ? '男':'女'}}</label><br>
<label>{{number1}}/{{number2}}=</label><label>{{number1/number2}}</label><br>
<label>欢迎语大写：</label>{{message.toUpperCase()}}<br>
<label>欢迎语小写：</label>{{message.toLowerCase()}}
</div>
<script>
const {createApp} = Vue//创建一个变量 名，gaga
createApp({
data() {
return {
message:'helloword',
person:{
name:'张三,
age:22,
gender:1
},
number1:10,
number2: 5,
}
}
}).mount('#app')
</script>
</body>
3、强制绑定
Vue 的强制绑定通常是指通过 v-bind 指令将数据绑定到 HTML 元素的属性上。在 Vue 中，v-bind 用于将数据动态地绑定到元素的属性、组件的属性或指令上，从而实现数据驱动的视图更新。
（1）绑定属性
<input type="text" v-bind:value="username">
（2）脚本实现
<body>
<div id="app">
<h1>{{title}}</h1>
<!-- 绑定属性 -->
<p>
<label>用户名：</label><input type="text" v-bind:value="username">
</p>
<p>
<!-- 可以简写成冒号 -->
<label>密码：</label><input type="text" :value="password">
</p>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
title:'强制数据绑定',
username:'张三',
password:'abc123',
}
},
}).mount('#app')
</script>
</body>
4、绑定事件监听
通俗地讲，绑定事件监听就是在某个对象（比如一个按钮、输入框或其他任何DOM元素）上设置一个“监听器”，这个监听器会等待并“监听”特定的事件（比如点击、鼠标移入、键盘按键等）发生。一旦这个事件发生了，监听器就会立即执行与之关联的一段代码，这段代码就是我们为这个事件定义的处理函数或方法。
在Vue模板中，使用v-on指令（或其缩写@）将事件与处理函数绑定起来。这通常涉及到在目标元素上添加一个带有事件名和处理函数名的属性。
下面是一个简单的案例介绍，通过为"button" 按钮绑定鼠标点击事件，实现点击按钮更换用户名和密码
<body>
<div id="app">
<h1>{{title}}</h1>
<!-- 绑定属性 -->
<p>
<label>用户名：</label><input type="text" v-bind:value="username">
</p>
<p>
<label>用户密码：</label><input type="text" :value="password">
</p>
<p>
<button type="button" v-on:click="fillAdmin">使用ADMIN用户</button>
<!-- 不传入参数的话，函数括号可以不写 -->
</p>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
title:'绑定事件监听',
username:'haha',
password:'abc123',
}
},
methods: {//注意添加函数时，与data区用逗号隔开
fillAdmin(){//用this可以调用当前数据区的数据
this.username='Admin'
this.password='abcd123'
},
}
}).mount('#app')
</script>
</body>
5、双向数据绑定
双向数据绑定：页面数据发生变化，脚本中的数据同时发生变化。脚本中的数据发生变化，同时页面中的数据也会发生变化，类似于数据联动，可以利于数据及时更新。
Vue.js 通过使用 v-model 指令来实现双向数据绑定。
<div id="app">
<h1>双向数据绑定</h1>
<p>
用户姓名：<input type="text" v-model="user.username">
</p>
<p>
用户密码：<input type="text" v-model="user.password">
</p>
<p>
性别：<input type="radio" v-model="user.gender" value="man">男
性别：<input type="radio" v-model="user.gender" value="woman">女
<p>
<button type="button" @click="show">显示绑定数据</button>
</p>
</div>
<script>
const {createApp} = Vue//获取vue全局对象，用于挂载到id值为app的元素上
createApp({//大括号表示一个对象
data(){
return{
user:{
gender:'man',
}
}
},
methods:{
show(){
alert(JSON.stringify(this.user))
this.user.username = 'admin'
this.user.password = 'admin123'
this.user.gender = '女'
//当手动将页面上的信息修改时，再次点击绑定数据按钮，将弹出更改过后的信息
}
}
}).mount("#app")
</script>
6、绑定元素的文本与HTMl
在Vue中，绑定元素的文本和HTML内容是通过不同的指令来实现的，它们分别是v-text和v-html。每种方式都有其特定的使用场景和注意事项。
<!--不识别a标签，以文本的方式展示在页面上 -->
<p v-text="link1"></p>
<!-- 识别a标签，以超链接的方式显示 -->
<p v-html="link2"></p>
7、绑定class与style样式
在Vue中，绑定class和style样式是动态控制元素外观的常用方法。Vue提供了v-bind:class（或简写为:class）和v-bind:style（或简写为:style）指令来实现这一功能。
（1）绑定class
- 对象语法:可以将一个对象传递给:class，以动态地切换多个class。这个对象的每个属性都对应一个class名，属性的值是一个布尔值，表示是否应该应用这个class。
<button type="button" :class="{btn1:btn1_choose,btn2:btn2_choose}">绑定对象样式</button>
- 数组语法:可以将一个数组传递给:class，以应用一个class列表,注意当使用数组语法时，如果同一个属性在多个样式对象中被定义，则后面的样式对象中的值会覆盖前面的值。
<button type="button" :class="[className1,className2]">绑定数组样式</button>
- 绑定数组样式中含逻辑运算
<button type="button" :class="[btn1_choose?'btn1':'',btn2_choose?'btn2':'']">绑定数组样式中含逻辑运算</button>
（2）绑定style
style绑定样式<br>
<button type="button" :style="style1">按钮1</button>
脚本部分代码:
const {createApp} = Vue
createApp({
data() {
return {
className1:'btn1',
className2:'btn2',
btn1_choose:true,
btn2_choose:false,
style1:{width:'100px',height:'30px',color:'green'}
}
},
}).mount("#app")
8、条件渲染
（1）v-if
- v-if 指令用于根据表达式的真假值来条件性地渲染元素。如果表达式的值为真，则渲染该元素及其内容；如果为假，则不渲染该元素及其内容。
（2）v-else
- v-else 指令必须紧跟在 v-if 之后，表示如果前面的条件都不满足时，则渲染该元素。
（3）v-show
- v-show 指令在渲染元素时，若条件为真，元素则会被渲染到 DOM 中，只是当条件为假时，元素会被隐藏。
示例代码如下：
<body>
<div id="app">
<p>
<a href="#" v-if="user.username == 'admin'">编辑</a>
<a href="#" v-else>详情</a>
</p>
<p>
<a href="#" v-show="user.username == 'admin'">编辑</a>
<!-- <a href="#" v-show="user.username != 'admin'">详情</a> -->
</p>
<p>
<!-- 通过change函数控制username的值，用于条件渲染判断 -->
<button type="button" @click="change">切换成Guest</button>
</p>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
user: {
username:'admin'
}
}
},
methods: {
change(){
if(this.user.username === 'admin'){
this.user.username='guest',
event.target.innerText='切换成Admin'
}else{
this.user.username='admin'
event.target.innerText='切换成Guest'
}
}
},
}).mount("#app")
</script>
</body
9、列表渲染
“v-for” 是 Vue.js 框架中的一个指令，用于基于一个数组或对象来渲染一个列表。它类似于传统编程语言中的 for 循环或 foreach 循环，但专为 Vue 的模板语法设计。
<div id="app">
<ul>
<!-- u是某一个对象，index是下标 -->
<li v-for="(u,index) in user">
{{index}}-{{u.id}}-{{u.name}}-{{u.age}}
</li>
</ul>
</div>
<script>
const {createApp} = Vue
createApp({
data() {
return {
user:[
{id:1,name:'tom',age:18},
{id:2,name:'jack',age:18},
{id:3,name:'amy',age:20},
{id:4,name:'tiger',age:25},
]
}
},
}).mount("#app")
</script>