一、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 } = VuecreateApp({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:18Object.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 = 18let 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右 => right2.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和setter3.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是vmreturn 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]
}
}
}
})