Vue3学习

第一章

• v-bind:props=“data”:绑定props属性对应的值为data;
• v-on:click=“handleSomething”:绑定元素点击事件方法为handleSomething;
• v-model=“data”:双向绑定data与本元素的value数据值;
• v-if=“show”:判断show逻辑值是否为真,为真则显示
• v-for="(index,item) of list":循环list中的元素
• vue的声明周期函数：

//创建Vue实例
const app = Vue.createApp({
    data(){
        return {
            someValue: '',
            list:[],
        }
    },
    methods:{
        handleSomething:{
            console.log("log");
        },
    },
    mounted(){
        console.log("页面加载完成后自动触发的方法");
    },
    template:`
        <div>tempalte infos</div>
        <ul>
            <todo-item v-for="(index,item) of list" v-bind:item="item" v-bind:index="index"/>
        </ul>
        `
});
//挂载组件
app.component('todo-item',{
    props: ['item','index'],
    data(){
        return {
            dataInfos:[],
        }
    },
    template:`<li>{{item}}--{{index}}</li>`,
});
//挂载实例到Dom
app.mount("#root");

第二章

• mvvm设计模式: m->model数据，v->view视图，vm->viewModel视图数据连接层

const app = Vue.createApp({
    data(){
        return {
        //对应mvvm中的m:数据
            dataInfo:'',
        }
    },
    //对应mvvm中的v:view视图
    template:`<div>hello</div>`
});
//对应mvvm中的vm:viewModel:视图模型绑定层
const vm = app.mount("#root");

• 8个生命周期函数
  • beforeCreate(){console.log(‘vue实例创建之前执行的钩子函数,这个阶段会解析事件以及声明周期函数’)},
  • created(){console.log(‘vue实例创建完成后执行的钩子函数’)},
  • beforeMount(){console.log(‘vue挂载dom节点之前会执行的钩子函数，在这个阶段已经完成了template模板的替换，两种情况：1.如果vue对象中没有template属性，则解析dom中的template完成渲染;2.解析vue实例中的template属性作为一个render function’)},
  • mounted(){console.log(‘vue完成对dom元素的挂载，vue接管dom元素了’)},
  • beforeUnmounted(){console.log(‘vue取消挂载dom节点之前执行的钩子函数’)},
  • unmounted(){console.log(‘vue已经取消挂载dom元素了，不再接管dom元素’)},
  • beforeUpdate(){console.log(‘vue接管的dom元素的数据发生改变之前执行的钩子函数’)},
  • updated(){console.log(‘vue接管的dom元素数据发生改变后执行的钩子函数’)},
• 常用模板语法
  • v-if
  • v-html:将数据中的html标签转义显示为html标签显示，而非原样输出
  • v-bind:可简写为:bind,例如:v-bind:title可简写为:title
  • v-on:可简写为@,例如v-on:click可以简写为@click
  • v-for
  • v-once:只显示一次，后面不论数据如何改变都不会再渲染ui，可用于提升性能
  • vue事件修饰符
    • @click.stop //阻值事件继续传播
    • @click.prevent //阻值事件默认行为
    • @click.capture //使用事件捕获模式，即事件发生后先由自定义的方法进行处理，然后再转交给默认的处理器处理
    • 还有很多事件修饰符，都有妙用，详情百度
  • 动态属性写法
    • 示例如下:

//想要动态绑定属性名或者事件名可以这样绑定
Vue.createApp({
    data(){
        return {
            attrName: 'title',
            event: 'click',
        }
    },
    //按照如下写法即可绑定@click以及:title
    template: `
        <div
            @[event]="handleClick"
            :[attrName]="动态属性名示例"
        >
            {{data}}
        </div>
    `
})

• data & methods & computed & watcher
  • data常规使用
  • methods:可以在{{}}表达式中直接调用：{{getTotal()}}
  • computed:用于计算data中的属性并直接在{{}}标签中插值使用。疑问：methods中可以通过方法计算data数据得出值，但是为什么要通过computed来做呢？原因：1.computed有缓存，更快；2.computed只有当被依赖的data属性发生改变才会引起computed属性改变，而methods方法则不论是哪个属性发生改变都会导致ui重新渲染，从而引起全局数据刷新。
  • watcher:用于监听某个属性的改变，主要在异步场景下使用，当某个属性值改变后，进行异步操作，如果写成同步操作，则和computed一样了，但是还没有computed简洁，因此当同步操作时候，推荐使用computed的而不是watch. 除了异步场景外，监听器也能用于监听上下文数据改变，用于跨组件传值。
  • 总结：同时可以使用methods和computed实现，推荐使用computed，因为有缓存；同时能使用computed和watch实现，推荐使用computed，因为更简洁、优雅。
• 条件渲染
  • v-if:会使用增删dom的方式来控制元素是否插入到dom
  • v-show:会使用css的display属性来控制是否显示dom元素
  • 与v-if一起使用的还有v-else或者v-else-if来实现条件选择分支
• 列表循环
  • 数组循环：使用 v-for="(item,index) in list" :key=“item” {{item}}这样来遍历数组;
  • 对象循环：使用 v-for="(value,key,index) in object" :key="key"来实现遍历，其中:key用于唯一标识dom元素id，达到复用dom元素，不用二次渲染，增加性能。
• 变更列表
  • 变更数组:参照index5.html
  • 变更对象:参照index5.html
• 事件绑定
  • 绑定多个事件：<button @click=“handleBtnClick1(2,$event),handleBtnClick2()”>button
• 修饰符
  • 事件修饰符：stop,prevent,capture,self,once,passive
  • 按键修饰符：enter,tab,delete,esc,up,down,left,right
  • 鼠标修饰符：left,right,middle
  • 精确修饰符：exact；例如：点击鼠标并且按住ctrl键才能触发事件：@click.ctrl.exact=“handleExact”，添加exact后，只能精准匹配这俩事件，如果同时点击并且按住ctrl并且按住了c键，则不会生效
• 表单属性绑定：包含input(radio,checkbox),textarea,select，详情参照index8.html
• input修饰符
  • v-model.lazy:懒加载,当input失焦后再更新到data
  • v-model.number:将input输入的值作为number类型输入data
  • v-model.trim:将input输入的字符串去首尾空后存入data