Vue框架学习
一、Vue3
基础
创建vue3工程
- 安装Node.js
- 在你所要存放目录位置 cmd 终端运行 npm create vue@latest
- 输入工程名字
- 需要ts JSX 选No 是否配置路由 NO（初步学习） 是否配置管理 No 是否配置测试 No Testing Solution NO 是否选择ESLint语法检查先不选 选NO
- 用 VSCode打开所在工程文件夹
- npm i 安装所有配置依赖
index.html 入口文件 启动前端工程 找到package.json "script"中的dev npm run dev
在src下面的main.ts文件中
import './assets/main.css'
// 引入createApp用于创建应用
import { createApp } from 'vue'
// 引入App根组件
import App from './App.vue'
createApp(App).mount('#app')
App.vue 模板规范化 三部分分别写什么
<template>
<!-- html -->
<div class="app2">
<h1>你好啊！</h1>
</div>
</template>
<script lang="ts">
// JS或TS
export default {
name: "App" // 组件名
};
</script>
<style>
.app2 {
background-color: #ddd;
/* 盒子阴影 */
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
Vue模板语法
插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr />
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
name: 'Jack'
}
})
</script>
</html>
指令语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<script src="../js/vue.js"></script>
</head>
<!-- Vue模板语法有2大类：
1. 插值语法：{{}}，用于解析标签体内容
写法: {{xxx}}, xxx是js表达式，且可以直接读取到data中的所有属性。
2. 指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
v-xxxx，用于解析标签、标签属性、以及特殊属性
-->
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr />
<h1>指令语法</h1>
<a v-bind:href="school.url">点我去{{school.name}}查找资料1</a>
<br />
<a :href="school.url">点我去{{school.name}}查找资料2</a> <!-- v-bind ==> 可以简写为 : -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
name: 'Jack',
school: { // 层级标签
name: "百度",
url: "http://www.baidu.com"
}
}
})
</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<script src="../js/vue.js"></script>
</head>
<!-- Vue模板语法有2大类：
1. 插值语法：{{}}，用于解析标签体内容
写法: {{xxx}}, xxx是js表达式，且可以直接读取到data中的所有属性。
2. 指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
v-xxxx，用于解析标签、标签属性、以及特殊属性
-->
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr />
<h1>指令语法</h1>
<a v-bind:href="school.url">点我去{{school.name}}查找资料1</a>
<br />
<a :href="school.url">点我去{{school.name}}查找资料2</a> <!-- v-bind ==> 可以简写为 : -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
name: 'Jack',
school: { // 层级标签
name: "百度",
url: "http://www.baidu.com"
}
}
})
</script>
</html>
数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<!-- <script src="../js/vue.js"></script> -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<!-- Vue中有2种数据绑定的方式：
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上(如：input、select等)
2.v-model:value 可以简写为 v-model ,因为v-model默认收集的就是value值
3.v-bind:value 可以简写为 :value
-->
<body>
<div id="app">
<!-- 普通写法 -->
<!-- 单向数据绑定：<input type="text" v-bind:value="name"> <br />
双向数据绑定：<input type="text" v-model:value="name1"> -->
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"><br />
双向数据绑定：<input type="text" v-model:value="name1">
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const name = ref('Hello vue!')
const name1 = ref('Hello vue!')
return {
name, name1
}
}
}).mount('#app')
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定 Vue2</title>
<!-- <script src="../js/vue.js"></script> -->
<script src="../js/vue.js"></script>
</head>
<!-- Vue中有2种数据绑定的方式：
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上(如：input、select等)
2.v-model:value 可以简写为 v-model ,因为v-model默认收集的就是value值
3.v-bind:value 可以简写为 :value
-->
<body>
<div id="root">
<!-- 普通写法 -->
<!-- 单向数据绑定：<input type="text" v-bind:value="name"> <br />
双向数据绑定：<input type="text" v-model:value="name1"> -->
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"><br />
双向数据绑定：<input type="text" v-model:value="name"> <br/>
<!--如下代码是错误的，因为v-model只能应用在表单类元素(输入类元素)上 -->
<h2 v-model:x="name">
你好呀
</h2>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
</body>
</html>
el与data的两种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el与data的两种写法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前那种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
-->
<div id="root">
<h1>你好,{{name}}</h1>
</div>
</body>
<script type="text/javascript">
// Vue.config.productionTip = false;
// el的两种写法
/* const v = new Vue({
// // el: '#root', // 第一种写法
// data: {
// name: '白羽'
// }
// })
// v.$mount('#root') // 第二种写法 */
// data的两种写法
new Vue({
el: '#root',
// data的第一种写法：对象式
/*data: {
name: '白羽'
}*/
// data的第二种写法：函数式
data: function () {
return {
name: '杨洋'
}
}
})
</script>
</html>
MVVM模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>理解MVVM</title>
<script src="../js/vue.js"></script>
</head>
<!-- MVVM模型：
1. M:模型(Model)：data中的数据
2. V:视图(View)：模板代码
3. VM:视图模型(ViewModel)：Vue实例
观察发现：
1. data中所有的属性，最后都出现在了vm身上
2. vm代理了data中的所有属性 vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
-->
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- View模型 -->
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
</div>
</body>
<script>
// ViewModel 模型 vue实例
const vue = new Vue({
el: '#root',
data: {
// Model 数据
name: '尚硅谷',
address: '北京'
}
})
</script>
</html>
Object.defineProperty
<script>
let person = {
name:'张三',
sex:'男',
}
// 直接在person后面直接添加元素 age:18
Object.defineProperty(person,'age',{
value:18
})
console.log(person)
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.回顾Object.defineproperty</title>
</head>
<body>
<script>
let number = 18
let person = {
name: '张三',
sex: '男',
// age: 18
}
Object.defineProperty(person, 'age', {
// value: 18, 使用这种方式去遍历
// enumerable: true, // 控制属性是否可以枚举，默认值是false
// writable: true, // 控制属性是否可以修改，默认值是false
// configurable: true // 控制属性是否可以删除，默认值是false
// 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
// 配置修改，通过定义的number来进行person中age的修改
get: function () {
return number
},
// 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set: function (value) {
console.log('有人修改了age属性，且值是', value)
number = value
}
})
// console.log(Object.keys(person))
// for (let key in person) {
// console.log(person[key])
// }
console.log(person);
</script>
</body>
</html>
数据代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>何为数据代理</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作(读/写) -->
<script>
let obj = { x: 100 }
let obj2 = { y: 200 }
// 想修改obj2.x的值，实际上修改obj.x的值
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中的数据代理</title>
<script src="../js/vue.js"></script>
</head>
<!-- 1.Vue中的数据代理：
通过vm对象来代理data对象中的属性的操作(读/写)
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data中的属性添加到vm上。
为每一个添加到vm上添加一个属性，都指定一个getter/setter。
为getter/setter内部去操作（读/写）data中的属性。
-->
<body>
<div id="root">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
// vm._data = data 两者是一样的 vm._data = options.data = data
<script>
// 最初语法
//const vm = new Vue({
//el: '#root',
//data: {
//name: '尚硅谷',
//address: '北京'
//}
//})
let data = {
name:'百度',
address:'北京'
}
const vm = new Vue({
el:'#root',
data
})
</script>
</body>
</html>
事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<!-- 简写形式 -->
<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
</body>
<script>
new Vue({
el: '#root',
data: {
name: '尚硅谷'
},
methods: {
showInfo1(event) {
alert('同学你好!')
},
showInfo2(event, number) {
alert('同学你好!!')
console.log(event, number)
}
}
})
</script>
</html>
事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件修饰符</title>
<script src="../js/vue.js"></script>
<style>
* {
margin-top: 20px;
/* 设置间距 */
}
.demo1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box1 {
padding: 5px;
background-color: pink;
}
.box2 {
padding: 5px;
background-color: greenyellow;
}
.list {
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li {
height: 100px;
}
</style>
</head>
<!-- Vue中的事件修饰符：
1.prevent：阻止默认行为(常用)
2.stop：阻止事件冒泡(常用)
3.once：事件只触发一次(常用)
4.capture：使用事件捕获模式
5.self：只有事件源才触发 只有event.target是当前操作的元素是才触发事件
6.passive：事件处理函数的默认行为不会被立即执行，而是被放入一个队列中，在队列中的函数执行完之后再执行默认事件
-->
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- 网页会默认跳转 阻止默认行为@click（常用） -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息1</a>
<!-- 阻止事件冒泡(常用) -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息2</button>
</div>
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息3</button>
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素是才触发事件 -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息4</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止在控制台输出生产模式的提示
// 创建Vue实例对象
new Vue({
el: '#root',
data: {
name: '尚硅谷'
},
methods: {
showInfo(e) {
// e.preventDefault() // 阻止默认行为
// e.stopPropagation() // 阻止事件冒泡
// alert('同学你好')
console.log(e.target)
},
showMsg(msg) {
console.log(msg)
},
demo() {
// console.log('@')
for (let i = 0; i < 10000; i++) {
console.log('#')
}
console.log('累坏了')
}
}
})
</script>
</html>
键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<script src="../js/vue.js"></script>
</head>
<!-- 1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获"删除"和"退格"键)
退出 => esc
空格 => space
换行 => tab
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）:ctrl、alt、shift、meta
（1）.配合keyup使用：按下修饰键的同时，再按下其他键，事件才被触发。
（2）.配合keydown使用：只要按下修饰键，事件被触发。
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键的别名
-->
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- @keyup.enter表示按下回车触发showInfo方法 -->
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"></input>
</div>
</body>
<script>
new Vue({
el: '#root',
data: {
name: '尚硅谷'
},
methods: {
showInfo(event) {
//if (event.keyCode === 13) {
console.log(event.target.value)
//}
}
}
})
</script>
</html>
计算属性
插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例_插值语法实现</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model:value="firstName"> <br /><br />
名：<input type="text" v-model:value="lastName"> <br /><br />
姓名：<span>{{firstName}}-{{lastName}}</span>
</div>
</body>
<script>
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
}
})
</script>
</html>
methods实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例_插值语法实现</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model:value="firstName"> <br /><br />
名：<input type="text" v-model:value="lastName"> <br /><br />
姓名：<span>{{firstName}}-{{lastName}}</span>
</div>
</body>
<script>
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
}
})
</script>
</html>
计算属性实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性实现</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstName"> <br /><br />
名：<input type="text" v-model:value="lastName"> <br /><br />
全名：<span>{{fullName}}</span>
</div>
</body>
<!--
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层借助了Object.defineProperty方法提供的getter和setter
3.get函数什么时候执行？
1.初次读取时会执行一次
2.当依赖的数据发生变化时会再次被调用
4.优势：与methods相比，内部有缓存机制，效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可
2.使用计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时候依赖的数据发生改变
-->
<script>
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName: {
// get有什么作用? 当有人·读取fullName时，get就会执行，且返回值就作为fullName的值
// get什么时候调用？ 1.初次读取fullName时。 2.所依赖的数据发生变化时
get() { // 读取
console.log('get被调用了')
// console.log(this) // 此处的this是vm
return this.firstName + '-' + this.lastName
},
// get什么时候调用? 当fullName被修改时
set(value) { // 修改
console.log('set', value)
// console.log(value) // value就是fullName的最新值
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</html>
监视属性
e({
el: ‘#root’,
data: {
firstName: ‘张’,
lastName: ‘三’
},
computed: {
fullName: {
// get有什么作用? 当有人·读取fullName时，get就会执行，且返回值就作为fullName的值
// get什么时候调用？ 1.初次读取fullName时。 2.所依赖的数据发生变化时
get() { // 读取
console.log(‘get被调用了’)
// console.log(this) // 此处的this是vm
return this.firstName + ‘-’ + this.lastName
},
// get什么时候调用? 当fullName被修改时
set(value) { // 修改
console.log(‘set’, value)
// console.log(value) // value就是fullName的最新值
const arr = value.split(‘-’)
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})