Vue3学习笔记（6.0）
Posted mez_Blog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3学习笔记（6.0）相关的知识，希望对你有一定的参考价值。
Vue3组件
组件（Component）是Vue.js最强大的功能之一。
组件可以扩展html元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
每个Vue应用都是通过用createApp函数创建的，传递给createApp的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个DOM元素中。
以下实例我们将Vue应用挂载到<div id="app"></div>，应该传入#app：
const RootComponent=/* 选项*/
const app=Vue.createApp(RootComponent)
const vm=app.mount('#app')注册一个全局组件语法格式如下：
const app =Vue.createApp(...)
app.component('my-component-name',
/* */
)my-component-name为组件名，/* */部分为配置选项。注册后，我们可以使用以下方式来调用组件：
<my-component-name></my-component-name><!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-29 15:51:28
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 15:55:36
* @FilePath: \\vscode\\diymodel.html
* @Description:
*
* Copyright (c) 2023 by $git_name_email, All Rights Reserved.
-->
<!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>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<runoob1></runoob1>
</div>
<script>
const app=Vue.createApp()
app.component('runoob1',
template:'鸡你太美！'
)
app.mount('#app')
</script>
</body>
</html>
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-29 15:51:28
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 16:00:56
* @FilePath: \\vscode\\diymodel.html
* @Description:
*
* Copyright (c) 2023 by $git_name_email, All Rights Reserved.
-->
<!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>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<random_name></random_name>
</div>
<script>
const app=Vue.createApp()
app.component('random_name',
data()
return
count:0
,
// template:'鸡你太美！'
template:`
<button @click="count++">点了count次！！！！</button>`
)
app.mount('#app')
</script>
</body>
</html> 
组件的复用
我们可以将组件进行任意次数的复用
同样的代码，搞起
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-29 15:51:28
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 16:03:22
* @FilePath: \\vscode\\diymodel.html
* @Description:
*
* Copyright (c) 2023 by $git_name_email, All Rights Reserved.
-->
<!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>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<random_name></random_name>
<random_name></random_name>
<random_name></random_name>
<random_name></random_name>
<random_name></random_name>
</div>
<script>
const app=Vue.createApp()
app.component('random_name',
data()
return
count:0
,
// template:'鸡你太美！'
template:`
<button @click="count++">点了count次！！！！</button>`
)
app.mount('#app')
</script>
</body>
</html>
全局组件
上面的示例中我们的组件都是通过component全局祖册的。
全局注册的组件可以在随后创建的app示例模板中使用，也包括实例组件树中的所有子组件的模板中。上面的基尼太美就是
下面看局部组件
全局祖册往往是不够理想的。比如，如果你使用一个像webpack这样的构建系统，全局注册所有的组件意味着即使你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这就造成了用户下载的javascript的无谓的增加。
在这些情况下，我们可以通过一个普通的JavaScript对象来定义组件：
const ComponentA=
在components选项中定义我们想要使用的组件：
const app=Vue.createApp(
components:
'component-a':ComponentA,
'component-b':ComponentB,)对于components对象的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-29 15:51:28
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 16:19:57
* @FilePath: \\vscode\\diymodel.html
* @Description:
*
* Copyright (c) 2023 by $git_name_email, All Rights Reserved.
-->
<!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>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<!-- <random_name></random_name>
<random_name></random_name>
<random_name></random_name>
<random_name></random_name>
<random_name></random_name> -->
<jubu_name></jubu_name>
</div>
<script>
var runoobA=
template:'唱跳rap篮球'
const app=Vue.createApp(
components:
'jubu_name':runoobA
)
// app.component('random_name',
// data()
// return
// count:0
//
// ,
// // template:'鸡你太美！'
// template:`
// <button @click="count++">点了count次！！！！</button>`
//
// )
app.mount('#app')
</script>
</body>
</html>
Prop是子组件用来接受父组件传递过来的一个自定义属性
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明“prop”：
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-29 15:51:28
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 16:29:25
* @FilePath: \\vscode\\diymodel.html
* @Description:
*
* Copyright (c) 2023 by $git_name_email, All Rights Reserved.
-->
<!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>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<random_name title="baidu"></random_name>
<random_name title="souhu"></random_name>
<random_name title="duniang"></random_name>
<random_name title="suibian"></random_name>
<random_name title="test"></random_name>
<!-- <jubu_name></jubu_name> -->
</div>
<script>
var runoobA=
template:'唱跳rap篮球'
// const app=Vue.createApp(
// components:
// 'jubu_name':runoobA
//
// )
const app=Vue.createApp()
app.component('random_name',
props:['title'],
// data()
// return
// count:0
//
// ,
// template:'鸡你太美！'
template:`
<div>title</div>`
)
app.mount('#app')
</script>
</body>
</html>
一个组件默认可以拥有任意数量的prop，任何值都可以传递给任何prop。
动态Prop
类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传到给子组件：
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-29 15:51:28
* @LastEditors: Mei
* @LastEditTime: 2023-03-29 16:38:56
* @FilePath: \\vscode\\diymodel.html
* @Description:
*
* Copyright (c) 2023 by $git_name_email, All Rights Reserved.
-->
<!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>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<!-- <random_name title="baidu"></random_name>
<random_name title="souhu"></random_name>
<random_name title="duniang"></random_name>
<random_name title="suibian"></random_name>
<random_name title="test"></random_name> -->
<site-info v-for="site in sites" :id="site.id" :title="site.title"></site-info>
<!-- <jubu_name></jubu_name> -->
</div>
<script>
const Site=
data()
return
sites:[
id:1,title:"baidu1",
id:2,title:"baidu2",
id:3,title:"baidu3"
]
var runoobA=
template:'唱跳rap篮球'
// const app=Vue.createApp(
// components:
// 'jubu_name':runoobA
//
// )
const app=Vue.createApp(Site)
app.component('site-info',
props:['id','title'],
// data()
// return
// count:0
//
// ,
// template:'鸡你太美！'
template:`
<div>id-title</div>`
)
app.mount('#app')
</script>
</body>
</html>
Prop验证
组件可以为props指定验证要求。
为了定值prop的验证方式，我们可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component',
props:
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC:
type: String,
required: true
,
// 带有默认值的数字
propD:
type: Number,
default: 100
,
// 带有默认值的对象
propE:
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function ()
return message: 'hello'
,
// 自定义验证函数
propF:
validator: function (value)
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
)当prop验证失败时，Vue将会产生一个控制台警告。
type可以是以下原生构造器：
string number Boolean Array Object Date Function Symbol
type也可以是一个自定义构造器，使用instanceof检测。
vue学习笔记
vue学习笔记（一）
安装：
全局安装vue：npm install vue-cli -g
创建vue项目：vue init webpack <filename>
安装vue所需插件： vue install
启动项目： npm run dev
技术点：
<ul> //循环
<li v-for="item in items"></li>
</ul>
html字符串 <div v-html="html">这样浏览器才会解析 否则就会直接按照字符串渲染到页面上</div>
属性用变量 <div v-bind:href="变量名"></div> v-bind缩写 <div :href="变量名"></div>
data(){
return {
变量名：变量值
}
}
watch
// 不要在实例属性后者回掉函数中(如 vm.$watch("a",newVal => this.myMethod()))使用箭头函数，因为箭头函数绑定父上下文，所以this不会像预想的一样是Vue实例，而是this.myMethods未定义
vm.$watch("a",function(newVal, oldVal){
// 这个回掉是在vm.a 改变后调用
console.log(this.a); // 此时this指向vue对象
console.log(newVal); // 3
console.log(oldVal); // 1
});
watch: {
name(){
....
}
}
计算属性
computed: { // 写计算属性 将data计算后返回一个新的data
fullName: function(){
return this.firstName + " " + this.lastName;
}
}
事件绑定 <div v-on:prevent="preventName"></div> v-on 缩写 <div @click="preventName"></div>
methods: { // 事件处理
preventName(){
...
}
}
修饰符
// .lazy 可以转变在change事件中同步
// .number 自动过滤number
// .trim 过滤掉收尾空格
// 事件修饰符
// .prevent 告诉v-on指令对于触发事件调用event.prevrntDefault()
// .stop 阻止单机事件冒泡
// .submit 提交事件不再重复加载页面
// .prevent 阻止默认事件
// .capture 添加事件侦听器使用事件捕捉模式
// .self 只当事件在该元素本身（而不是子元素）触发时触发回掉
// .once 只执行一次
//按键修饰符
// v-on:keyup.13="" 只有在keycode为13时触发
// .enter
// .tab
// .delete 删除或退格
// .esc
// .space
// .up
// .down
// .left
// .right
// .ctrl
// .shift
// .alt
// .meta
过滤器 <div>{{message | capitalize }}</div>
filters: {
capitalize(value){
return newValue
}
}
以上是关于Vue3学习笔记（6.0）的主要内容，如果未能解决你的问题，请参考以下文章