网站建设宣传海报,西安的网站设计公司名称,哈尔滨seo排名优化公司价格,怎么进入邯郸论坛网1 创建vue3项目
# 两种方式- vue-cli#xff1a;vue脚手架---》创建vue项目---》构建vue项目--》工具链跟之前一样- vite #xff1a;https://cn.vitejs.dev/-npm create vuelatest // 或者-npm create vitelatest一路选择即可# 运行vue3项目-vue-cli跟之前一样-vite 创建的…1 创建vue3项目
# 两种方式- vue-clivue脚手架---》创建vue项目---》构建vue项目--》工具链跟之前一样- vite https://cn.vitejs.dev/-npm create vuelatest // 或者-npm create vitelatest一路选择即可# 运行vue3项目-vue-cli跟之前一样-vite 创建的npm install npm run dev# vite为什么这么快-冷启动-热加载-按需编译补充链式调用
# 编程语言的链式调用对象.changeName(lin).printName().showAge()# python 如何实现链式调用class Person:def changeName(self,name):self.namenamereturn selfdef printName(self):print(self.name)return self
2 setup函数
# 使用 vue-cli创建的项目讲setup的两个注意点
# setup执行的时机在beforeCreate之前执行一次this是undefined。# setup的参数
props值为对象包含组件外部传递过来且组件内部声明接收了的属性。
context上下文对象
attrs: 值为对象包含组件外部传递过来但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。
emit: 分发自定义事件的函数, 相当于 this.$emit。# 总结setup执行是在beforeCreate没有this对象以后不要用this了如果写setup函数想接收父组件自定义属性传入的值需要export default {setup(props) {console.log(props.msg)},props: [msg]}如果是vue3的最新写法想接收父组件自定义属性传入的值需要script setupdefineProps([msg])/scripttemplatediv classhomep我的名字是{{ name }}/pp我的年龄是{{ age }}/pbutton clickhandleClick点我看信息/button/div
/templatescript
export default {setup() {// 1 定义数据const name lqzlet age 19// 2 定义方法const showInfo () {alert(姓名是${name},年龄是${age})}return {name, age, showInfo}},// 注意不要混用// methods: {// handleClick() {// alert(姓名是${this.name},年龄是${this.age})// }// }
}
/script
3 ref函数
templatediv classhomep我的名字是{{ name }}/pp我的年龄是{{ age }}/pbutton clickhandleAdd点我年龄1/buttonbutton clickhandleChangeName点我秒变彭于晏/button/div
/templatescript// 变量要具备响应式---》页面内容变化变量和变变量变化页面也变
// 普通变量通过ref绑定响应式
// 引用类型变量通过reactive 绑定响应式import {ref} from vueexport default {setup() {// 1 定义数据let name ref(lin)let age ref(19)// 2 定义方法const handleAdd () {age.value 1console.log(typeof age)}const handleChangeName () {name.value 彭于晏}return {name, age, handleAdd,handleChangeName}}
}
/script
4 reactive函数
templatediv classhomep我的名字是{{ data.name }}/pp我的年龄是{{ data.age }}/pp我的爱好是{{ hobby }}/pbutton clickaddAge点我年龄1/buttonbr{{ obj.hobby }}brbutton clickchangeHobby点我把保龄球换成足球/buttonhrHelloWorld msgasdfasdfasdfasdf/HelloWorld/div
/templatescript// 变量要具备响应式---》页面内容变化变量和变变量变化页面也变
// 普通变量值类型通过ref绑定响应式 数字字符串
// 引用类型变量通过reactive 绑定响应式 对象数组import {reactive, ref} from vueexport default {setup(props) {let hobby ref(篮球)let obj ref({age: 99,hobby: 保龄球})const changeHobby () {console.log(obj)obj.value.hobby 足球}let data reactive({name: 彭于晏,age: 19})const addAge () {//data.ageconsole.log(typeof data)console.log(data) // 是一个代理对象,无法拿出原来对象但是操作起来跟操作源对象一样data.age}return {hobby, data, addAge, obj, changeHobby}}}
/script-------------------------------------------------------------------------ref
作用: 定义一个响应式的数据
语法: const xxx ref(initValue)
创建一个包含响应式数据的引用对象reference对象简称ref对象。
JS中操作数据 xxx.value
模板中读取数据: 不需要.value直接div{{xxx}}/div
备注
接收的数据可以是基本类型(值类型)、也可以是对象(引用类型)类型。reactive
作用: 定义一个对象类型的响应式数据基本类型不要用它要用ref函数
语法const 代理对象 reactive(源对象)接收一个对象或数组返回一个代理对象Proxy的实例对象简称proxy对象
reactive定义的响应式数据是“深层次的”,无论套多少层都具备响应式# 总结如果用基本数据类型数字字符串布尔用ref做响应式如果是对象类型用ref和reactive都可以但是建议使用reactive如果使用ref包裹对象类型多了一层value
补充element-plus
1.官网https://element-plus.org/
2.安装npm install element-plus --save
3.使用import { xxx } from element-plus5 计算和监听属性
templatediv classhomeinput typetext v-modelname.firstNameinput typetext v-modelname.lastNamebrinput typetext v-modelfullNamebutton clickage点我年龄加/button/div
/templatescriptimport {computed, watch, reactive, ref,watchEffect} from vueexport default {name: HomeView,setup() {// 计算属性computedlet name reactive({firstName: lin,lastName: dj})let fullName computed({get() {return name.firstName - name.lastName},set(value) {const nameArr value.split(-)name.firstName nameArr[0]name.lastName nameArr[1]}})let age ref(19)// 监听属性// 监听基本类型watch(age, (newValue, oldValue) {console.log(oldValue)console.log(newValue)})// 监听对象watch(() name.firstName, (newValue, oldValue) {console.log(oldValue)console.log(newValue)})// watchEffect函数watchEffect(() {const x1 age.valueconst x2 name.firstNameconsole.log(watchEffect配置的回调执行了)})return {name, fullName, age}}
}/*
ref
作用: 定义一个响应式的数据
语法: const xxx ref(initValue)
创建一个包含响应式数据的引用对象reference对象简称ref对象。
JS中操作数据 xxx.value
模板中读取数据: 不需要.value直接div{{xxx}}/div
备注
接收的数据可以是基本类型(值类型)、也可以是对象(引用类型)类型。reactive
作用: 定义一个对象类型的响应式数据基本类型不要用它要用ref函数
语法const 代理对象 reactive(源对象)接收一个对象或数组返回一个代理对象Proxy的实例对象简称proxy对象
reactive定义的响应式数据是“深层次的”,无论套多少层都具备响应式# 总结如果用基本数据类型数字字符串布尔用ref做响应式如果是对象类型用ref和reactive都可以但是建议使用reactive如果使用ref包裹对象类型多了一层value*/
/script
6 生命周期
# vue2 生命周期---8个# vue3 变了-想把生命周期写下setup函数中-把生命周期写在配置项中beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedbeforeCreatecreatedbeforeMount mountedbeforeUpdateupdatedbeforeUnmount unmounted
templatediv classhomeh1八个生命周期钩子/h1/div
/templatescript
import axios from axiosimport {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
} from vue;export default {// setup()函数setup() {// 生命周期// 第一个beforeCreateconsole.log(我是beforeCreate, 我和setup函数融合了)let name ref(lin)// 第二个Createdconsole.log(我是Created, 我也和setup函数融合了)axios.get(http://localhost:8080/).then(res {name.value res.data.name})let t setInterval(() {console.log(lin)}, 3000)// 第三个onBeforeMountonBeforeMount(() {console.log(挂载了)})// 第四个onMountedonMounted(() {console.log(挂载完成了)})// 第五个onBeforeUpdateonBeforeUpdate(() {console.log(更新数据)})// 第六个onUpdatedonUpdated(() {console.log(数据更新完成)})// 第七个onBeforeUnmountonBeforeUnmount(() {console.log(在组件卸载之前执行的操作)clearInterval(t)t null})// 第八个onUnmountedonUnmounted(() {console.log(组件卸载完成)})return {}}}
/script
7 torefs的使用
templatediv classhomeh1演示toRefs/h1!-- {{userinfo.name}}是{{userinfo.age}}岁了--{{name}}是{{age}}岁了/div
/templatescriptimport {reactive, toRefs} from vue;export default {// setup()函数setup() {// let userinfo reactive({// name: lin,// age: 20// })//// return {userinfo}// 或者let data reactive({name: lin,age: 20})return {...toRefs(data)}}// 对象的解压
let data {name:lin,age:19}
let dict{...data,hobby:篮球}console.log(dict)/script
8 vue3 setup写法
# 以后vue3推荐把setup函数的代码直接写在script中
script setup
定义变量
写函数
不用return在html中直接使用
/script# 使用组件直接导入不需要配置直接用即可
import HelloWorld from ../components/HelloWorld.vue;
在html中直接用HelloWorld msghello/HelloWorld# 自定义属性在子组件中接收script setupdefineProps({msg: {type: String,required: true}})/scripttemplatehello-world msghello/hello-world{{name}}pbutton clickchangeName点我看是谁/button/p
/templatescript setup
import HelloWorld from ../components/HelloWorld.vue
import {ref} from vuelet name ref(lin)let changeName () {name.value 彭于晏
}/script
