上次回顾:
# 1 ref -放在组件上---》在父组件中--》this.$refs.名字 -->组件对象--->组件对象--->属性,方法就可以拿到 -放在普通标签上 # 2 this.$parent -拿到父组件对象 # 3 props - 数组形式: props:['自定义属性的名字','自定义属性的名字1'] - 对象形式,限制类型: props:{自定义属性名字:{ type:String }} -对象形式,限制类型,默认值,必填 props:{自定义属性名字:{ type:String, required:True, default:'xx' }} # 4 mixin 混入 -多个组件公用的,抽取出来 -data,methods。。。。 -两种方式使用: -局部使用:配置项:mixins:[写多个] -全局使用:Vue.mixin(混入对象) # 5 插件 -第三方插件:vuex,vue-router,elementui Vue.use(插件名) -自定义插件:export default { install(Vue){ } } -能干的事: 1 设置全局变量 2 设置全局方法 3 自定义全局指令 4 自定义全局组件 -使用 在 main.js中 Vue.use(插件名) # 6 插槽 匿名插槽 具名插槽 <div slot='插槽名字'></div> <template v-slot:名字> </template> # 7 vuex 状态管理器--集中式数据[变量]管理---》跨组件间通信 state:{} # 变量 组件中使用:this.$store.state.变量 正统用法: -在组件中:this.$store.dispatch('函数名',参数) -index.js 的 actions actions:{ 函数名(context,形参){ context.commit('函数名',参数) } } -index.js 的 mutations mutations:{ 函数名(state,形参){ state.变量 进行操作 } } # 8 vue-router 实现单页面应用 -两个组件:router-view,router-link -跳转:js,html中标签跳转 this.$router.push router-link 的to 属性 -跳转:传对象,携带数据[地址栏?后,地址栏中解析出] -常用api this.$router.push this.$router.replace this.$router.go this.$router.back -组件中有: this.$router # 代指 vue-router 导出的对象 this.$route # 代指当前路由对象:当前路径,当前携带的数据 this.$route.query this.$route.params -子路由: -路由守卫 -全局前置路由守卫
今日内容:
vue3介绍
# Vue3的变化 -vue3完全兼容vue2---》但是vue3不建议用vue2的写法 -拥抱TypeScript -之前咱们用的JavaScript---》ts完全兼容js - 组合式API和配置项API vue2 是配置项api vue3 组合式api # vue4必须要用
vue3项目创建和启动
# 创建vue3项目 -vue-cli 官方不太建议用了 -vite 目前官方推荐:新一代前端构建工具 # vue-cli创建 -命令行中:vue create vue3_demo001 -其他跟之前一样,只是选vue版本选3版本 -使用pycharm打开---》配置启动--》跟之前一样
vue3的项目简单解释
### main.js import { createApp } from 'vue' # 通过 createApp创建vue实例 import App from './App.vue' # 根组件 import router from './router' # vue-router import store from './store' #vuex var vue = createApp(App) # 创建vue实例 vue.use(store)#使用vuex vue.use(router)# 使用vue-router vue.mount('#app')# 挂在index.html中得div ### 其他写起来跟之前写vue2完全一致,vue3是兼容的
vite创建vue3
速度很快 -创建项目还是运行项目 # 按需编译,不再等待整个应用编译完成 # 创建项目 cnpm create vite vue3_demo002 # 打开项目,安装依赖 cnpm install # 运行项目 npm run dev # pycharm运行项目 # 使用vite和vue3创建项目的文件简单解释 # main.js import { createApp } from 'vue' import './style.css' import App from './App.vue' createApp(App).mount('#app') # 没有使用第三方插件 # HelloWorld.vue 组合式api写法,跟之前不一样了 <script setup> import { ref } from 'vue' defineProps({ msg: String, }) const count = ref(0) </script> <template> <h1>{{ msg }}</h1> <div class="card"> <button type="button" @click="count++">count is {{ count }}</button> </div> </template> # 后期我们可以自己引入 vuex,pina,vue-router,代码需要自己写 # 实现:创建vue2一样,自由选择一些插件 -以后再vue3上,建议使用pinia 做状态管理 npm create vue@latest # 常用的第三方插件,自己选即可
setup
# 1 vue3_demo001 :vue-cli创建的---》写法跟之前vue2一样 先在这上面讲 # 2 vue3_demo002 :vite创建,但是没有状态管理器和路由 (不用它了) # 3 vue3_demo003:vite创建,有状态管理器和路由 在这上面讲 # setup 函数,只有vue3中有 setup为Vue3.0中一个新的配置项,值为一个函数 setup是所有Composition API(组合API)编写的位置 组件中所用到的:数据、方法等等,均要配置在setup中 setup函数的返回值:返回一个对象,对象中的属性、方法, 在模板中均可以直接使用 #注意: 尽量不要与Vue2.x配置混用 Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。 但在setup中不能访问到Vue2.x配置(data、methos、computed...)。 如果有重名, setup优先。
<template> <div class="home"> <h1>setup函数的使用</h1> {{ name }}--{{ age }} <br> <button @click="add">点我年龄+1</button> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'HomeView', setup() { // vue3多的,vue2没有,以后建议vue3的代码全都写在这里,不再写配置项方式了 // 1 定义变量,跟正常写js一样 let name = 'lqz' let age = 19 // 2 定义一个函数,点击按钮,年龄加一的函数 let add = () => { // alert('111') // 让年龄+1,出问题了,变量确实会变,但是页面不会变化---》vue3定义的变量,默认不是响应式的 age++ console.log(age) } // 3 必须要有返回值,是个对象,返回的对象,可以在 模板(template)中使用 return {name, age, add} }, } </script>
ref
# ref 用来做 基础变量[数字,字符串,布尔]的响应式
# reactive用来做 对象[数组,字典]的响应式
<template> <div class="home"> <h1>setup函数的使用</h1> {{ name }}--{{ age }} <br> <button @click="add">点我年龄+1</button> <br> <button @click="handleChange('彭于晏')">点我变彭于晏</button> </div> </template> <script> import {ref, reactive} from 'vue' export default { name: 'HomeView', setup() { // vue3多的,vue2没有,以后建议vue3的代码全都写在这里,不再写配置项方式了 // 1 定义变量,跟正常写js一样 let name = ref('lqz') // let age = 19 // 没有响应式 let age = ref(19) // 有响应式,变成对象了 // 2 定义一个函数,点击按钮,年龄加一的函数 let add = () => { // alert('111') // 让年龄+1,出问题了,变量确实会变,但是页面不会变化---》vue3定义的变量,默认不是响应式的 // age++ 自增,就不能这么写了 age.value++ //有响应式 console.log(age.value) } let handleChange = (n) => { name.value = n //有响应式 } // 3 必须要有返回值,是个对象,返回的对象,可以在 模板(template)中使用 return {name, age, add, handleChange} }, } </script>
reactive
<template> <div class="home"> <h1>setup函数的使用</h1> <p>用户名:{{ userInfo.name }}</p> <p>年龄:{{ userInfo.age }}</p> <p>爱好:{{ userInfo.hobby }}</p> <button @click="handleAdd">点我年龄+1</button> </div> </template> <script> import {ref, reactive} from 'vue' export default { name: 'HomeView', setup() { let userInfo = reactive({ name: 'lqz', age: 19, hobby: '篮球' }) let handleAdd = () => { userInfo.age++ console.log(userInfo) } return {userInfo, handleAdd} }, } </script>
ref和reactive总结
# ref函数 作用: 定义一个响应式的数据 语法: let xxx = ref(initValue) 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。 JS中操作数据: xxx.value 模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div> # 备注: 接收的数据可以是:基本类型、也可以是对象类型。 # reactive函数 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数) 语法:let 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象) reactive定义的响应式数据是“深层次的”,对象无论多少层,都可以
监听属性-计算属性
计算属性
<template> <div class="home"> <h1>计算属性:computed</h1> <p>姓:<input type="text" v-model="person.firstName"></p> <p>名:<input type="text" v-model="person.lastName"></p> <p>全名:{{ person.fullName }}</p> <p>全名修改:<input type="text" v-model="person.fullName"></p> </div> </template> <script> import {ref, reactive, computed} from 'vue' export default { name: 'HomeView', setup() { let person = reactive({ firstName: '', lastName: '' }) // 计算属性--->获取值 // person.fullName = computed(() => { // return person.firstName + person.lastName // }) // 计算属性---》修改值 person.fullName = computed({ get() { return person.firstName +person.lastName }, set(newValue) { console.log(newValue) person.firstName=newValue.substring(0,1) person.lastName=newValue.slice(1) } }) return {person} }, } </script>
监听属性
<template> <div class="home"> <h1>监听属性:watch</h1> {{ age }} ==== <button @click="handleClick">点我+1</button> <hr> <p>用户名:{{ userInfo.name }}</p> <button @click="handleChange">点我变长名字</button> </div> </template> <script> import {ref, reactive, watch, computed} from 'vue' export default { name: 'HomeView', setup() { let age = ref(0) let handleClick = () => { age.value++ } // 1 监听基本类型 watch(age, (newValue, oldValue) => { console.log(oldValue) console.log(newValue) }) // 2 监听对象 let userInfo = reactive({ name: 'lqz', age: 19 }) let handleChange = () => { userInfo.name = '谢谢谢谢谢寻寻寻寻' } watch(() => userInfo.name, (newValue, oldValue) => { console.log('名字变了:' + userInfo.name) }) // 3 同时监听多个变量变化 watch([age,], (newValue, oldValue) => { console.log('age或msg变化了', newValue, oldValue) }) return {age, handleClick, userInfo, handleChange} }, } </script>
生命周期
# vue2 : 8个生命周期钩子 # vue3中变成 beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下: beforeCreate===>setup() created=======>setup() beforeMount ===>onBeforeMount mounted=======>onMounted beforeUpdate===>onBeforeUpdate updated =======>onUpdated beforeUnmount ==>onBeforeUnmount unmounted =====>onUnmounted
<template> <div class="home"> <h1>生命周期</h1> {{ name }} <br> <button @click="handleClick">点我变名字</button> </div> </template> <script> import { ref, reactive, watch, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue' import axios from 'axios' export default { name: 'HomeView', setup() { //1 这里写的代码,就是 beforeCreate,没有数据[变量没定义],没挂载 console.log('beforeCreate') // 2 这里写代码,就是created,有数据,变量定义了,没挂载 let name = ref('lqz') axios.get('http://127.0.0.1:8000/film/').then(res => { name.value = res.data.msg }) // 3 onMounted onMounted(() => { console.log('挂载完了') }) // 4 onUpdated onUpdated(() => { console.log('页面更新') }) // 5 onUnmounted onUnmounted(() => { console.log('组件销毁') }) let handleClick = () => { name.value = 'afdasdfasdfasdf' } return {name, handleClick} }, //配置项api====》变了最后俩 // beforeCreate() { // }, // created() { // }, // beforeMount() { // }, // mounted() { // }, // beforeUpdate() { // }, // updated() { // }, // beforeUnmount() { // }, // unmounted() { // } } </script>
toRef
<template> <div class="home"> <h1>toRef函数</h1> {{ name }}---{{ age }}---{{ hobby }}---{{ count }} </div> </template> <script> import { ref, toRefs, reactive, } from 'vue' export default { name: 'HomeView', setup() { let data = reactive({ name: 'lqz', age: 19, hobby: '篮球' }) let count = ref(0) let xx = {...toRefs(data)} // {name:lqz,age:19,bobby:篮球} console.log(xx) // 可以把对象解压 return {...toRefs(data), count} // {name:lqz,age:19,bobby:篮球,count:0} }, } </script>
setup写法
<template> <h1>我是首页</h1> <!-- <div>{{ name }}</div>--> <!-- <button @click="handleChange">点我变名字</button>--> <!-- <button @click="load">点我加载</button>--> <!-- <div v-for="film in filmList">--> <!-- <p>{{ film.name }}</p>--> <!-- </div>--> <!-- <HelloWorld msg="lqz is handsome"></HelloWorld>--> <!-- <RouterLink to="/about">--> <!-- <button>点我跳转到about</button>--> <!-- </RouterLink>--> <!-- <button @click="handleGo">点我跳转到about</button>--> <!-- {{ store.count }}--> <!-- <button @click="handleAdd">点击+1</button>--> <hr> <el-button type="primary">Primary</el-button> <br> <el-switch v-model="value1"/> </template> <script setup lang="js"> //1 以后这里面写的,就相当于 写在setup函数中,现在不需要返回,在template都能用到 // import {ref,reactive} from 'vue' // let name = ref('lqz') // let handleChange = () => { // name.value = 'sadfasdfafs' // console.log(name) // } //2 加载电影数据 // import {ref, reactive} from 'vue' // import axios from 'axios' // // let filmList = reactive([]) // // //发送ajax // let load = () => { // axios.get('http://127.0.0.1:8000/film/').then(res => { // filmList = res.data.results // console.log(filmList) // }) // } // 3 注册组件 import HelloWorld from '@/components/HelloWorld.vue' // 4 路由跳转 setup中没有this了---》想用谁,就是导入谁 // this.$router.push() // 用不了了 // import {useRouter, useRoute} from 'vue-router' // // const router = useRouter() // const route = useRoute() // // // let handleGo = () => { // router.push('/about?name=lqz') // } // 5 pinia的使用 // import {useCounterStore} from '@/stores/counter' // // 可以在组件中的任意位置访问 `store` 变量 ✨ // const store = useCounterStore() // // console.log(store.count) // let handleAdd = () => { // store.count++ // } // 6 使用elementui import {ref} from 'vue' let value1 = ref(true) </script>
标签:vue,入门,age,let,ref,setup,name From: https://www.cnblogs.com/wzh366/p/17967828