织梦多语言网站,单页网站如何做cpa,网站开发的资料设备,公司门户网站制作提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、ref二、TS接口泛型规范1.创建ts文件#xff0c;定义接口2.引入规范 三、props的使用四、生命周期#xff08;生命周期函数#xff0c;生命周期钩子… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 前言一、ref二、TS接口泛型规范1.创建ts文件定义接口2.引入规范 三、props的使用四、生命周期生命周期函数生命周期钩子五、自定义Hooks1.安装 axios并引入2.定义数组并写方法 前言
提示这里可以添加本文要记录的大概内容
例如随着人工智能的不断发展机器学习这门技术也越来越重要很多人都开启了学习机器学习本文就介绍了机器学习的基础内容。 提示以下是本篇文章正文内容下面案例可供参考
一、ref
ref可以放在html标签中这时拿到的是DOM元素也可以放在组件中使用这时拿到的是组件实例对象 实现效果 这里不推荐用id因为若在App.vue里也出现了相同的id,便会先渲染就会出现你好的字段,会有id冲突的问题 Person.vue
templatediv classpersonh1中国/h1h2 idtitle2北京/h2h3开心/h3button clickshowLog点我输出h2这个元素/button/div
/templatescript langts setup namePerson
function showLog(){console.log(document.getElementById(title2))
}/scriptstyle scoped
.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}/style
App.vue
templateh2 idtitle2你好/h2Person//templatescript langts setup nameApp
import Person from /components/Person.vue;/scriptstyle
.app{background-color: #2c3e50;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
/style
修改后的Person.vue,使用ref即可解决id冲突问题
templatediv classpersonh1中国/h1h2 reftitle2北京/h2h3开心/h3button clickshowLog点我输出h2这个元素/button/div
/templatescript langts setup namePerson
import {ref} from vue// 创建一个title2,用于存储ref标记的内容
let title2 ref()
function showLog(){console.log(title2))
}/scriptstyle scoped
.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}/style
以上ref是写在html里的若把ref写在组件返回的是组件实例 并未返回子组件定义的值因为被保护起来的只有子组件主动让访问才可以 二、TS接口泛型规范
1.创建ts文件定义接口
在src下新建types文件夹新建index.ts定义一个接口用于限制对象的具体属性
2.引入规范 若定义多个人放在一个数组如何去限制。定义一个变量personListpersonList是一个数组数组的每一项要符合PersonInter接口规范需要使用到泛型 还有另外一种修改方式
三、props的使用
实现父组件到子组件的值传递 从App.vue传的a 和list ,可以只接受list若接收App.vue未传的内容会显示undefined也可用来解决可传可不传 接受并限制类型 接受限制类型限制必要性指定默认值 当App.vue没传可设置默认值
四、生命周期生命周期函数生命周期钩子
组件的一生创建挂载更新销毁 vue2的生命周期创建组件调用一个钩子生命周期函数 4个阶段基础的8个钩子不只有8个 创建创建前 beforeCreate创建完毕 created----在内存中从无到有 挂载挂载前 beforeMount挂载完毕 mounted—把.vue放在页面里浏览器能看到 更新更新前 beforeUpdate更新完毕 updated 销毁销毁前 beforeDestory销毁完毕 destroyed vue3的生命周期 用set up 模拟创建—console.log(‘创建’) 挂载——onBeforMount((){console.log(‘挂载前’)}) ——onMounted({ console.log(‘挂载完毕’)}) 更新——onBeforeUpdate((){console.log(更新前‘)} ——onUpdated((){ console.log(‘更新完毕’)}) 卸载——onBeforeUnmount((){ console.log(‘卸载前’)}) ——onUnmounted((){ console.log(‘卸载前’)}) 常用钩子onMounted,onUpdate,onBeforeUnmount
问题是父挂载完毕先输出还是子挂载完毕先输出 答子先挂载完毕输出。入口文件在index.html引入了main.ts,main.ts工作时发现要把App拿到页面App.vue要解析这个组件而App组件里有Person组件把Person里所有执行完App.vue组件开始才被解析完。App.vue是最后挂载的
五、自定义Hooks
Hooks可以实现模块化即一个功能的数据和方法单独放在一个useXxx.ts文件。
想要实现数组里存放的图片点击按钮便增加一张图
1.安装 axios并引入
控制台下载安装npm i axios 在person.vue里引入import axios from axios;
2.定义数组并写方法
考虑若地址访问错误返回异常
templatediv classpersonh2当前求和为{{sum}}/h2button clickshowAdd点我加一/buttonhrimg v-for(dog,index) in dogList :srcdog :keyindexbrbutton clickgetDog再来一只/button/div
/templatescript langts setup namePerson
import {ref,reactive} from vue
import axios from axios;// https://dog.ceo/api/breed/pembroke/images/randomlet sum ref(0)
let dogList reactive([https://images.dog.ceo/breeds/pembroke/n02113023_4544.jpg,])function showAdd(){sum.value1
}async function getDog(){// axios.get(https://dog.ceo/api/breed/pembroke/images/random).then(// response {},// error {})try{let result await axios.get(https://dog.ceo/api/breed/pembroke/images/random)console.log(result.data)dogList.push(result.data.message)} catch (error){alert(error)}}/scriptstyle scoped
.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
li {font-size:20px;
}
img{height: 100px;margin-right: 10px;
}/style
利用Hooks完成 src下新建hooks文件把求和与增加图片单独创建useSum.ts和useDog.ts。 useSum.ts
import {ref} from vueexport default function (){let sum ref(0)function showAdd(){sum.value1}// 给外部提供东西return {sum,showAdd}}
useDog.ts
import {reactive} from vue
import axios from axios;// https://dog.ceo/api/breed/pembroke/images/randomexport default function (){let dogList reactive([https://images.dog.ceo/breeds/pembroke/n02113023_4544.jpg,])async function getDog(){// axios.get(https://dog.ceo/api/breed/pembroke/images/random).then(// response {},// error {})try{let result await axios.get(https://dog.ceo/api/breed/pembroke/images/random)console.log(result.data)dogList.push(result.data.message)} catch (error){alert(error)}}// 向外部提供东西return {dogList,getDog}
}
在person.vue里引入
templatediv classpersonh2当前求和为{{sum}}/h2button clickshowAdd点我加一/buttonhrimg v-for(dog,index) in dogList :srcdog :keyindexbrbutton clickgetDog再来一只/button/div
/templatescript langts setup namePersonimport useSum from /hooks/useSumimport useDog from /hooks/useDog;const {sum,showAdd} useSum()const {dogList,getDog}useDog()/scriptstyle scoped
.person{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
li {font-size:20px;
}
img{height: 100px;margin-right: 10px;
}/style 也可以添加onMounted和computed属性 用计算属性实现扩大10倍记得要交出去方便在Person.vue使用
