Vue3.0基础学习自我理解(一)
2022-02-16 本文已影响0人
coderhzc
1.0 Vue3.0 CDN 源码地址:
http://unpkg.com/vue@next
1.1 如何使用CDN创建一个小DEMO
<!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"></div>
<!-- Vue 3.0 的源码地址 -->
<!-- <script src="http://unpkg.com/vue@next"></script> -->
<script src="./js/vue3.0.js"></script>
<script>
const hzc = {
template: "<h2>hello,world</h2>"
}
// 注意这个就和Vue2.0不一样了
const app = Vue.createApp(hzc)
app.mount("#app")
/**还可以这种来写**/
Vue.createApp({
template: `
<div>
<h2>{{ message }}</h2>
<h1>{{ counter }}</h1>
<button @click='add'> + 1 </button>
<button @click='sub'> - 1 </button>
</div>
`,
data() {
return {
message: "Hello,World!",
counter: 0
}
},
methods: {
add() {
// this.counter +=1
this.counter ++
},
sub() {
// this.counter -=1
this.counter --
}
}
}).mount('#app')
</script>
</body>
</html>
1.2 template的写法
<!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"></div>
<script src="./js/vue3.0.js"></script>
<!-- 1.加上一个id-->
<template id="hzc">
<div>
<h2>{{ message }}</h2>
<h1>{{ counter }}</h1>
<button @click='add'> + 1 </button>
<button @click='sub'> - 1 </button>
</div>
</template>
<script>
Vue.createApp({
// 2.抽离的写法
template: "#hzc",
data() {
return {
message: "Hello,World!",
counter: 0
}
},
methods: {
add() {
// this.counter +=1
this.counter++
},
sub() {
// this.counter -=1
this.counter--
}
}
}).mount('#app')
/**
* 总结: 这个时候,在createApp的对象中,我们需要传入template以 #开头
*
* 如果字符串是以为 # 开始, 那么它将被作用querySelector,并且使用匹配元素的innerHTML作为模板字符串
*
*
* **/
</script>
</body>
</html>
1.3 Vue - data 属性的使用:
data 属性是传入一个函数,并且该函数需要返回一个对象
-- 在Vue2.0的时候,也是可以传入一个对象(虽然官方推荐是 一个函数)
-- 在Vue3.0的时候,必须传一个函数, 否则的话就会直接在浏览器中报错
小节:
methods属性是一个对象,通常我们会在这个对象中定义很多的方法:
-- 这些方法可以被绑定到template 模板中
-- 在改方法中.我们可以使用this关键字来直接访问到data中 返回的对象属性
-- 注意,不应该使用箭头函数来定义methods中的函数(例如 add:()=>this.a++),理由是箭头函数绑定了父级作用域的上下文.所以this将不会按照期望指向组件实例,this.a将是undefined
methods中要使用data返回对象中的数据:
-- 那么这个this是必须有值对的,并且应该可以通过this获取到data返回对象的数据
那么我们这个this能不能是window呢?
-- 不可以是window,因为window中我们无法获取到data返回对象中的数据
-- 但是我们使用箭头函数了,那么这个this就会是window了
2. Mustache语法
<!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"></div>
<template id="hzc">
<!-- 1.直接绑定 -->
<div>{{ message }}</div>
<!-- 2.计算 -->
<div>{{ counter * 10 }}</div>
<!-- 3. 表达式 -->
<div>{{ message.split("").reverse().join("") }}</div>
<!-- 4.调用函数 -->
<div>{{ getReverseArray() }}</div>
<!-- 5.计算属性 -->
<div>{{ getAllPrice }}</div>
<!-- 6.三元 运算符 -->
<div>{{ flag?"哈哈":"呵呵" }}</div>
<!-- 7.错误用法 -->
<!--var name = "hzc" 这个是赋值语句 -->
<!-- <h2>{{ var name = "hzc" }}</h2> -->
<!-- <h2>{{ if(flag) return "hahahhh" }}</h2> -->
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
counter: 10,
flag: true
}
},
methods: {
getReverseArray() {
return this.message.split("").reverse().join("")
}
},
computed: {
getAllPrice() {
return (100 * this.counter).toFixed(2) + " ¥ "
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
3. v-once的基本使用:
<!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"></div>
<template id="hzc">
<!-- 1.希望一直可以累加 -->
<h2>当前计数:{{ counter }}</h2>
<!-- 2. 只加一次 -->
<h2 v-once>当前计数:{{ counter }}</h2>
<button @click="increment"> + 1 </button>
<!-- 3.如果在div上面加v-once的话代表了 只要是div里面的元素变化一次以后就都不会在变化了 -->
<hr>
<div v-once>
<h2>当前计数:{{ counter }}</h2>
<h3>{{ message }}</h3>
</div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
counter: 0
}
},
methods: {
increment() {
this.counter ++
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
4. v-text的基本使用
<!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>
<!--
v-text="message" 语法会把你的数据按照最原始的方式展示出来,看以下demo就明白了
-->
<body>
<div id="app"></div>
<template id="hzc">
<div v-text="message"></div>
<div v-text="message1"></div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
message1:"<div>我是胡振楚</div>"
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
5. v-html的基本使用
<!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>
<!--
v-html: 默认情况下,我们展示的内容本身是HTML的,那么Vue是不会对其进行特殊的解析
如果我们希望这个内容按照正常的文本解析出来的话,那么可以使用 v-html来展示
-->
<body>
<div id="app"></div>
<template id="hzc">
<div v-html="message"></div>
<div v-html="message1"></div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
message1:"<div style='color:red;font-size: 60px;'>我是胡振楚</div>"
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
6.v-pre的基本使用
<!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>
<!--
v-pre: 用于跳过元素和它的子元素的编译过程,
显示原始的Mustache标签,跳过不需要解析的节点,按照最原始的方式展示,看demo就明白了
-->
<body>
<div id="app"></div>
<template id="hzc">
<div v-pre>{{ message }}</div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World"
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
7.v-cloak的基本使用
<!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>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="hzc">
<div v-cloak>{{ message }}</div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World"
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
8. v-bind的基本使用 (VUE 3.0 是可以有多个根标签的)
<!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"></div>
<template id="hzc">
<!-- VUE 3.0 是可以有多个根标签的 -->
<div>{{ message }}</div>
<img :src="imgUrl" alt="">
<a :href="hrefUrl"></a>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
imgUrl:"http://avatars.githubusercontent.com/u/10335230?s=60&v=4",
hrefUrl:"http://www.baidu.com"
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
9.v-bind绑定class属性-对象语法
<!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>
<style>
.active {
color: red;
font-size: 40px;
}
.title {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- 对象中可以添加多个的键值对 -->
<template id="hzc">
<!-- 1. class里面的属性键 引号可加可不加的,
但是如果里面的属性值不加引号就要去data中去找变量了, -->
<div :class="{'active':isShow,'title': true}">{{ message }}</div>
<!-- <div :class="{active:isShow,title: true}">{{ message }}</div> -->
<button @click="BtnClick">切换改变颜色</button>
<hr>
<!-- 2. 默认的class和动态的class是可以并存的 -->
<div class="abc cba" :class="{active:isShow,title:true}">默认的class和动态的class是可以并存的</div>
<hr>
<!-- 3.将对象放到一个单独的属性中 -->
<div class="abc cba" :class="classObj">将对象放到一个单独的属性中</div>
<hr>
<!-- 4. 将返回的对象放到methods方法中 -->
<div :class="getClassObj()">将返回的对象放到methods方法中</div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
isShow: true,
classObj:{
active: true,
title: true
}
}
},
methods: {
BtnClick() {
this.isShow = !this.isShow
},
getClassObj() {
return this.classObj
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
10.v-bind绑定class属性-数组语法
<!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>
<style>
.titleclass {
color: red;
}
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="hzc">
<div>{{ message }}</div>
<!-- 1. 数组里面的class 加引号的写法,和三元表达式的写法 -->
<div :class="['abc','cba',isActive? 'active':'']"> 数组里面的class 加引号的写法,和三元表达式的写法</div>
<!-- 2. 数组里面写data中定义的变量 不需要加引号 -->
<div :class="[title]">数字里面写data中定义的变量 不需要加引号</div>
<!-- 3. 数组中可以继续嵌套对象的写法 -->
<div :class="['accc','abbbb',{'active': isActive}]">数组中可以继续嵌套对象的写法</div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
title: 'titleclass',
isActive: true
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
11.v-bind绑定style属性-对象语法
<!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"></div>
<template id="hzc">
<div>{{ message }}</div>
<!-- 1. key是可以不加引号的,但是 value是要加的,如果不加的话他就会去data里面去找定义的变量,看是否data中存在这个变量 -->
<div :style="{color:'red'}">1.加引号</div>
<div :style="{color: value}">1.不加引号 </div>
<hr>
<!-- 2.属性使用驼峰 -->
<div :style="{fontSize: sizeValue}">2. 属性使用驼峰</div>
<hr>
<!-- 3.属性不使用驼峰的话,那么就必须要使用引号 " " 引起来,不然的话,会没有效果的 -->
<div :style="{'font-size': '40px'}">3.属性不使用驼峰的话</div>
<hr>
<!-- 4.后端要是直接返回一个数值给你的话,那么就需要拼接了 -->
<div :style="{'fontSize': valueSize + 'px'}">4.后端要是直接返回一个数值给你的话,那么就需要拼接了</div>
<hr>
<!-- 5. 直接放入一个 对象 -->
<div :style="styleObj">5.直接放入一个 对象</div>
<hr>
<!-- 6.绑定一个方法 -->
<div :style="getStyle()"> 6.绑定一个方法 </div>
<hr>
<!--7. 计算属性 -->
<div :style="getStyleComputed">7.计算属性</div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
value: 'yellow',
sizeValue: "40px",
valueSize: 40,
styleObj: {
background: "deeppink",
"font-size": "40px"
}
}
},
methods:{
getStyle() {
return this.styleObj;
}
},
computed:{
getStyleComputed() {
return this.styleObj
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
12.v-bind绑定style属性-数组语法
<!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"></div>
<template id="hzc">
<div>{{ message }}</div>
<!--1.数组里面放对象 -->
<div :style="[styleObj1,styleObj2]">数组里面放对象</div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
styleObj1: {
background: "deeppink",
"font-size": "40px"
},
styleObj2: {
color: "green",
"font-weight": "900"
}
}
},
methods:{
getStyle() {
return this.styleObj;
}
},
computed:{
getStyleComputed() {
return this.styleObj
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
13.v-bind动态绑定属性的名称补充
<!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>
<style>
.active {
color: #FFF;
background-color: red;
font-size: 60px;
}
.abcd {
background-color: pink;
font-size: 60px;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="hzc">
<div>{{ message }}</div>
<!-- 0. 在某种场景有些属性不确定的话,有可能下面的div会绑定 class style,或者.... -->
<!-- 1.属性不是固定的时候的用法,具体语法: :[data中定义的变量] -->
<!-- 2. :[data中定义的变量] = "'active'": 这个active要加单引号,
因为不加单引号的话就会把active当做是一个变量,会去data中会去找 -->
<div :[name]="'active'">加单引号的active</div>
<!-- 3.:[name]="active":如果不加单引号的话不会有任何效果的,除非在data中去定义中变量,定义好了以后在赋值 -->
<div :[name]="active">不加单引号的active</div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
name: "class",
active: "abcd"
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
14. v-bind属性直接绑定多个对象
<!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"></div>
<template id="hzc">
<div>{{ message }}</div>
<!-- 1. 啥意思呢? 就是说我想在这个div上面绑定很多属性 比如说: name="huzhenchu" age="18" sex="男"... -->
<!-- 2. 具体语法: v-bind="info" -->
<div v-bind="info">示例代码</div>
<!-- 3.简写方式: -->
<div :="info">示例代码</div>
<!-- 4.直接绑定一个对象 -->
<div v-bind="{name:'楚楚胡',age:28,sex:'男'}">直接绑定一个对象</div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
info: {
name:"huzhenchu",
age: 18,
sex: "男"
}
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
15.v-on的使用
<!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>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.m {
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="hzc">
<!-- 1. 完整的写法: v-on:监听的事件='methods中定义的方法' -->
<button v-on:click="btnClick">点击出现事件</button>
<div v-on:mousemove="mousemoveClick">鼠标的移动</div>
<hr>
<!-- 2.语法糖的写法:@ -->
<button @click="btnClick">语法糖的写法:@</button>
<hr>
<!-- 3.绑定的数据+1 -->
<button @click="add">{{ counter }}</button>
<hr>
<!-- 4. 直接操作 -->
<button @click="counter++">{{ counter }}</button>
<!-- 5. 绑定多个事件 -->
<div class="m" v-on="{click: btnClick, mousemove:mousemoveClick}"></div>
<!-- 6.语法糖的写法 @ -->
<div class="m" @="{click: btnClick, mousemove:mousemoveClick}"></div>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World",
counter: 0
}
},
methods: {
btnClick() {
console.log("楚楚胡");
},
mousemoveClick() {
console.log("鼠标在移动");
},
add() {
this.counter++
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
16.v-on的参数传递
<!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"></div>
<template id="hzc">
<!-- 1.默认 -->
<button @click="btnClick">按钮</button> <br>
<!--
2. 参数的传递固定语法 其实和2.0差不多: btnClick1($event,"huzhenchu"),
$event:可以获取到事件发生时的事件对象
-->
<button @click="btnClick1($event,'huzhenchu')">按钮1</button>
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World"
}
},
methods: {
// 1.
// 默认传入event对象,可以在方法中直接按照这个方式获取
btnClick(event) { // 这个事件你不用传递 这个是自带的浏览器的默认参数 和vue2.0是一样的
console.log(event);
},
// 2. $event:可以获取到事件发生时的事件对象
btnClick1(event,name) {
console.log(event);
console.log(name);
}
},
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
17.v-on的修饰符
<!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>
<!--
0.v-on的修饰符:
v-on: 支持修饰符,修饰符相当于是对事件进行了一些特殊的处理:
-- .stop-调用event.stopPropagation()
-- .prevent-调用event.stopPropagation()
-- .capture-添加事件侦听器时使用capture模式
-- .self-只当事件是从侦听器绑定的元素本身触发时才触发回调
-- .once-只触发一次回调
-- .left-只当点击鼠标左键触发
-- .right-只当点击鼠标右键触发
-- .middle-只当点击鼠标中键触发
-- .passive-(passive:true) 模式添加侦听模式
-->
<body>
<div id="app"></div>
<template id="hzc">
<!-- 1.stop修饰符:阻止事件冒泡 -->
<div @click="divcClick">
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 2. enter修饰符: 当你在input中输入的时候,你只想等到点击了enter健的时候才打印的话,就可以加上这个修饰符-->
<input type="text" @keyup.enter="enterKeyup">
</template>
<script src="./js/vue3.0.js"></script>
<script>
const App = {
template: "#hzc",
data() {
return {
message: "Hello,World"
}
},
methods: {
divcClick() {
console.log("divClick");
},
btnClick() {
console.log("btnClick");
},
enterKeyup(event) {
console.log(event.target.value);
}
},
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
