- vue3自建模板
{ "Print to console": { "prefix": "vue3", "body": [ "<template>", " <div>$0", " </div>", "</template>\n", "<script setup lang='ts'>\n", "</script>\n", "<style lang=''>\n", "</style>", "$2" ], "description": "vueInit" } }
应用实例
-
建立实例是调用data函数，返回一个对象。并存于
$data中。 -
createApp 函数创建一个新的应用实例
mount 根据id将创建的应用实例与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>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{msg}}
<button @click="functinname">点击</button>
</div>
<script >
// 第一个实例
const app = Vue.createApp({
data() {
return {
msg: "你好"
}
},
methods: {
functinname(){
alert("this指向组件实例")
console.log("方法中的this",this.msg)//你好
}
},
});
const vm = app.mount('#app')
console.log(vm.msg,vm.$data.msg)//你好
</script>
</body>
</html>
Vue.createApp({ }).mount('#name')
- data返回对象
data(){
return{
name:'',
duixiang:{
name:''
},
array:[
one,
two
]
}
}
- methods方法
- computed计算属性
- setter
- getter
- 侦听器watch:数据前后变化
watch(监听的数据，副作用函数，配置对象)
watch(data, (newData, oldData) => {}, {immediate: true, deep: true})
-
生命周期钩子
会在组件生命周期的各个不同阶段被调用
模板语法
- {{}}
- v-html、v-text
- v-bind：attribute=“值”，简写 :attribute=“值”
- :class=“{属性:值,属性:值}”，是v-bind:class的简写。
- :clss=“[arry1,arry2]”
- :style=“”
- v-if、v-else-if、v-else：条件渲染
- v-show:改变display属性
不同点：v-if通过移除节点的方式隐藏，而v-show通过css属性进行隐藏与显示；
所以，当需要进行频繁切换隐藏或显示时，推荐用v-show，反之推荐使用v-if。
-
条件渲染
遍历数组:
v-for="(item,index) in list"遍历对象:
v-for="(value,name,index) in objname"提供唯一key值：
v-for="(item,index) in list" :key="item.id" -
v-on:事件=“表达式”，简写：@事件=“表达式”
-
表单输入绑定
页面
① import引入后挂在根组件后：可在其他页面直接使用 app.component(‘组件命称’,组件实例). mount()
<组件命称><／组件命称>
②局部：在使用页面引入
export default{
components:{
组件名
}
}
prop
组件的传值
- 父组件向子组件传值
①绑定：在父组件中的子组件标签中绑定，并在子组件的props中接受使用
<HelloWorld :namezhi='name1' key='zidefine'></HelloWorld>
子组件中：props:['namezhi','zidefine']
即传过来的props中属性可以为子组件的属性
②类型：
- 字符串数组类型：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
-
对象类型
-
props: {title: String,contactsPromise: Promise // 或任何其他构造函数} -
props：{message：{type：String,default:"你好"，//默认值required:true //必须传入值
-
- 单向
- 更改传入值
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
}
}
- 子传向父组件：监听事件
插槽传值
vm.$emit('自定义事件名'，要传给事件监听者的第一个参数1，参数2，····)
-
在子组件中定义函数：
<button @click="()=>{$emit('injectb','第二次传入')}">传入父组件2</button> -
在父组件的子组件中加入：
<HelloWorld @injecta="getChild"></HelloWorld>并定义getChild函数并接受传入值作为自己属性 -
在子组件中可以通过$emit触发 父组件的自定义方法，触发方式可以直接执行，或者是通过绑定事件
this.$emit('getMessage', '我是父组件！')@click="$emit('getMessage', '我是父组件！')"
**![emit -]on组合使用 ** 兄弟组件间进行传值。 注意无关系组件不能用这种方式传值。
- 创建一个新Vue的实例，让各个兄弟共用同一个事件机制。（关键点）
- 传递数据方，通过事件触发$emit(方法名，传递的数据)。
- 接收数据方，在mounted()钩子函数(挂载实例)中 触发事件$on(方法名，callback(接收数据的数据))，此时callback函数中的this已经发生了改变，可以使用箭头函数。
创建一个新Vue的实例，让各个兄弟共用同一个事件机制。（关键点）
传递数据方，通过事件触发$emit(方法名，传递的数据)。
接收数据方，在mounted()钩子函数(挂载实例)中 触发事件$on(方法名，callback(接收数据的数据))，此时callback函数中的this已经发生了改变，可以使用箭头函数。
- 父组件访问子组件
ref:接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。
reactive：const obj = reactive({ count: 0 })
- ref 和 reactive 一样都是实现响应式数据的方法
- 由于 reactive 必须传递一个对象，所以导致我们再企业开发中，如果我们只想让某个变量实现响应式的时候非常麻烦，所以 Vue3 就提供了 ref 方法，实现对简单值的监听
- ref 底层的本质还是 reactive 系统会自动根据我们给 ref 传入的值将他转换成 ref(xx) —— reactive({value: xx})
1、调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
2、父组件主动获取子组件数据
this.$refs.header.属性
3、父组件主动执行子组件方
this.$refs.header.方法
ref
-
$refs 是一个对象，持有已注册过 ref 的所有的子组件。
ref加载普通元素上，this. r e f s . 获取到的就是 d o m 元素 r e f 记载在子组件上， t h i s . refs. 获取到的就是dom元素 ref记载在子组件上，this. refs.获取到的就是dom元素ref记载在子组件上，this.refs. 获取到的就是组件实例，可使用组件的所有方法。
常用的属性有：
1：vm. e l / / 获取 v u e 实例关联的 D o m 元素 2 : v m . el //获取vue实例关联的Dom元素 2: vm. el//获取vue实例关联的Dom元素2:vm.data //获取vue实例的data选项
3：vm. o p t i o n s / / 获取 v u e 实例的自定义属性 4 ： v m . options //获取vue实例的自定义属性 4：vm. options//获取vue实例的自定义属性4：vm.refs //获取vue实例中所有含有ref属性的dom元素，如果有多个，只返回最后一个。
5: vm.$ref // ref 被用来给元素或子组件注册引用信息
插槽slot
- 为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段 ，封装组件有扩展性
//contentDemo.vue
<template>
<p>content组件内容</p>
<slot>若父组件无渲染内容，则显示默认内容，否则替代</slot>
</template>
--------------------------
app.vue//
<ContentDemo><p>content组件扩充内容</p></ContentDemo>
- 具名插槽
<slot> 元素有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容 。
- v-slot只能放在template上
- 插槽内容无法访问子组件的数据 。父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。
- v-slot:简写#
content.vue
<slot name="bbb"></slot>//不显示aaa插槽内容
<slot name="aaa"></slot>
app.vue
<ContentDemo >
<template v-slot:aaa 或者 #aaa>
aaa插槽的内容放这里
</template>
</ContentDemo>
-
插槽传值：像对组件传递 props 那样，向一个插槽的出口上传递 attributes
v-slot:插槽名=“slot传值对象名”
v-slot:插槽名=“slot传值”
v-slot:default=“slot传值对象名”（无具名时）
<slot name="aaa" :countaaa="14432"></slot> <ContentDemo > <template v-slot:aaa="slotprops"> {{slotprops.countaaa}} </template> </ContentDemo> -
动态插槽名：
<template v-slot:[dynamicSlotName]> </template>
跨级通信
provide 和 inject
一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
![Provide/inject 模式]
1、
import { provide } from 'vue'
provide(/* 注入名 / 'message', / 值 */ 'hello!')
app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!') （应用层-全局）
import { inject } from 'vue'
const value = inject('message', '这是默认值')
2、 provide:{namewe:'provide'}
inject:['namewe']
生命周期
组合式
选项和组合
- 使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如
data、methods和mounted。选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。 - 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 script setup 搭配使用。script setup 中的导入和顶层变量/函数都能够在模板中直接使用。
<script>
export default {
// data() 返回的属性将会成为响应式的状态, 并且暴露在 `this` 上
data() {
return {
count: 0
}
}
}
</script>
<script setup>
import { ref, onMounted } from 'vue',
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() = > {
console.log(`The initial count is ${count.value}.`)
})
</script>
组合式函数
用选项式 API，组合式函数必须在 setup() 中调用，且其返回的绑定必须在 setup() 中返回，以便暴露给 this 及其模板 。
import { useMouse } from './mouse.js'
import { useFetch } from './fetch.js'
export default {
setup() {
const { x, y } = useMouse()
const { data, error } = useFetch('...')
return { x, y, data, error }
},
mounted() {
// setup() 暴露的属性可以在通过 `this` 访问到
console.log(this.x)
}
// ...其他选项
}
1.监听：vue中用watch来监视data数据的变化，当被监视的数据发生变化watch中定义的相关方法便会被调用。
-
watch配置 watch: ｛数据：方法｝
① data对象属性： msg: function(){}
② data中对象的属性：“obj.attribute”:functional ()
③handler：function(newval,oldval){}。
④immediate:true|false。监听器是否立即执行，默认为false
⑤deep:true|false深度监听。对象所有属性
-
全局watch: app.$watch(’属性名‘，方法)
第一种方法：用于需要配置项
app.$watch('temp',{ deep:true, handler(newval, oldval){ console.log(app.temp，newval)} } )第二种方法：用于不需要配置项，只需一个handler
app.$watch(‘temp’,function(newval, oldval) { console.log(app.temp) })
当该侦听器不再需要时unwatch()
ref
setup
mounted
promise
扫一扫
2450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
