vue3 基础学习

Vue详细安装教程
https://www.jb51.net/article/251371.htm
Vue基础学习
vue基础学习网址：
菜鸟教程：
https://www.runoob.com/vue3/vue3-directory-structure.html
vue官网：
https://cn.vuejs.org/guide/introduction.html

挂载应用：.mount()使用后才会渲染。
挂载的为id名用“#+id名”,匹配后才会渲染成功
例子：

v-bind:给标签新增属性，：加属性名 为简写
v-on:click新增点击事件，简写为@click

例

给div新增id
简写后

v-show 指令来根据条件展示元素
可以控制 true/false值进行标签的显示与隐藏

v-for循环数值显示
v-for=“(val,key,index) in value”
val为数组的一条数据，key为主键，index为对象下标，key可隐藏去掉括号，value为数组/对象
如果只有两个元素 v-for=“(val,index) in value” 只有值和下标

data数据
return {} 可直接返回值
methods：{} 填写方法，点击事件等等
computed: {} 对数据进行修改然后想要的值；filter对值进行过滤
例：
computed:{
numFil(){
return this.num.filter(num=>num%5===0);
}
}
对数组过滤只显示5的倍数的值

表单
v-on:submit.prevent 表单阻止页面刷新

自定义动态组件
此声明是全局组件
const pic = Vue.createApp(
methods:{
addText(){
this.list.push({
text:this.newText,
});
this.newText=‘’;
}
}
)
//自定义组件方法，组件名to-do,template模板，props自定义属性
//data()定义组件的数据，emits自定义事件
pic.component(‘to-do’,{
template: `

• {{ text }}
• 计算属性 getter为默认属性，可以新增setter属性 computed: { site: { // getter 默认属性 get: function () { return this.name + ' ' + this.url }, // setter 可设置属性 set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } 监听属性 app.$watch('count', function(vue,oldVue){ alert(vue+'变成'+oldVue); }) count为变量，vue为变化值，oldVue为原值 异步操作 函数前加async关键字声明为异步操作，await 为等待