vue3的基础用法

v-html的陷阱

对于不信任的网站使用{{}}模板语法来加载,对于信任的网站可以使用v-html,在输入框内写入脚本,加载后会被执行,造成不可预期的错误.

在网站上任意渲染html是很危险的,会造成XSS漏洞

V-for

在使用v-for时可以使用解构赋值的方式

同时,对于v-for的基本语法是 v-for="item in data" ,可以将in替换为of即v-for="item of data"

vue3+vite

清除默认样式

npm i reset-css 

import 'reset-css'

使用vite创建项目

npm init vite

输入项目名称

选择框架(vue)

选择语言(js)

使用v3node版本需要在16及以上

使用vite构建router和pinia需要自己引入

安装路由依赖

npm add vue-router -s

-D 开发环境

-S 生产环境

项目中的路由文件需要手动添加

创建router文件夹 里面创建index.js

//创建路由实例  设置路由模式  
import { createRouter, createWebHistory } from "vue-router";
//路由配置  是一个数组对象
const routes = [
    {path:'/'
    ,name:'Home'
    ,component:()=>import('')
    }
]

const router = createRouter({
     history: createWebHistory(),
     routes
})
//导出路由实例
export default router



//在main.js中导入路由
import router frm '路径'
//挂载到vue实例
app.use(router)

setup函数

1. setup函数调用在beforecreated()之前
2. 在setup函数中获取不到this
3. 数据和函数需要在setup最后return 才能在模板中使用
4. 问题来了 每次都return很麻烦 vue3提供了setup语法糖

reactive和ref函数

reactive函数

接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤:导入reactive函数 在script中执行reactive函数并传入类型为对象的初始值,并使用变量接收返回值

如果简单类型的响应式数据如何接受

使用ref函数

接受简单类型或者对象类型的数据传入,并返回一个响应时代的对象

本质是在原有的视频传入的基础上外层报了一层对象,包成了复杂类型

包成复杂类型再借助reactive实现的响应式

访问数据需要通过.value来实现

import { computed } from 'vue';
const computedState = computed(() => {
  return 处理逻辑
});

1.导入computed函数

2.执行函数在回调参数中return基于响应式数据做计算的值,用变量接受

import { computed } from 'vue';
const computedState = computed(() => {
  return 处理逻辑
});

组合式api-watch

监视单个对象

import {watch} from 'vue'
watch(ref对象,(newValue,oldValue)=>{
console.log(newValue,oldValue)
},{
    immediate:true, //立即执行
    deep:true//深度监听
})

监视多个对象

import {watch} from 'vue'
watch([value1,value2],(newValue,oldValue)=>{
  console.log(newValue,oldValue);
})

deep深度监听,如果ref传入的是简单类型的数据可以直接监视

如果是复杂类型监视不到复杂类型内部的数据变化

vue3的生命周期对比

选项式API	组合式API
beforeCreated/created	setup
deforeMount	onBeforeMount
mounted	onMount
deforeUpdate	onBeforeUpdate
update	onUpdated
deforeUnmount	onBeforeUnmount
unmount	onUnmounted

组合式api-父子通信

基本思想

• 父组件中给子组件绑定属性
• 子组件内部通过peops接受

父传子

父组件中定义好传给子组件的值

在子组件上通过自定义属性绑定      

<script setup>
// 引入自子组件
import sonCom from './components/son-com.vue'
import { ref } from 'vue'
const msg = ref('我是父组件传给子组件的值')
</script>

<template>
  <sonCom :message="msg"/>
</template>

  在子组件中通过defineProps接受

<script setup>
import { ref, reactive } from 'vue'
const props = defineProps({
    //规定传值的类型
    message: String
})
</script>
<template>
  <div>
    我是子组件
  </div>
  <div>
    {{ message }}
  </div>
</template>

子传父

父组件中给子组件标签通过@绑定事件

子组件内部通过emit方法触发事件

在子组件中触发编译器宏

<script setup>
import { ref, reactive } from 'vue'
//触发编译器宏
const emit = defineEmits(['message'])
//定义要传递的内容
const str = ref('这是子组件给父组件传的值')
//点击按钮时调用方法传递
const sendMsg = () => {
    //触发的事件名称  传递的内容
  emit('message', str.value)
}
</script>
<template>
  <div>
    我是第二个子组件
  </div>
  <button @click="sendMsg">传值</button>
</template>

在父组件中绑定监听事件

<script setup>
// 引入子组件
import sonCom2 from './components/son-com2.vue'
import { ref } from 'vue'
const getMessages = (msg)=>{
  console.log(msg);
}
</script>
<template>
  <sonCom2 @message="getMessages"/>
</template>

组合式api的模板引用-获取dom实例

调用ref函数,生成一个ref对象

通过ref表示,进行绑定

通过ref对象.value即可访问到绑定的元素

const inp = ref(null)
<input ref="inp" type="text">
inp.value就是绑定的元素

可以通过此方法获取组件实例

在vue3中因为setup语法糖,组件内部的属性和方法是不对外开放的

可以通过defineExpose变异宏指定哪些属性方法允许访问

通过defineExpose暴露出来

<script setup>
import { ref, reactive } from 'vue'
const num = ref(199)
const str = ref('hello')
//将变量暴露出来
defineExpose({
    num,
    str
})
</script>

点击按钮获取组件实例中的变量

 const son3 = ref(null)
const handson = () => {
  console.log(son3.value);
  console.log(son3.value.num)
  console.log(son3.value.str)
}
 <sonCon3 ref="son3"/>
  <button @click="handson">获取子组件实例</button>

跨层级组件传值 provide--inject

顶层组件通过provide函数提供数据

import { provide } from 'vue';
provide('topCom', '我是顶层组件传递的值');
const Fn = (num) => {
  console.log('我是顶层组件的函数'+num);
};
provide('top-Fn', Fn);

底层组件通过inject函数获取数据

import { inject } from 'vue';
const data = inject('topCom');
const dataFn = inject('top-Fn');
//点击按钮调用方法
const topFn = () => {
  dataFn(500)
}

此方法仅限于顶层组件向底层组件传递或者提供变量和方法

vue3新特性-defineOptions

在vue3中引入了defineOptions宏,主要是用来定义optionsApi的选项,可以用defineOptions定义任意的选项props,emits,expose,slots除外