Vue学习笔记 20211102

v-bind 单向数据绑定 可简写为 :

v-modole 双向数据绑定

methods 写方法的地方 是一个对对象 例子 methods:{ changeName(){ console.log() } }

computed 计算属性 复杂逻辑写在这里

class :class 可以绑定动态类名
style :style 是一个对象 里面和React写行内样式一样 不过是{{}} 变为 '{}'

<style>
 .basic：{
     fontSize:'10px'
 }
</style>
new Vue({
    el:'#root',
    data:function(){
        return {
            xx:'red',
            xx1:['blue,pink'],
            xx2:{
                yellow:true,
            },
            styleObj:{
                fontSize: '30px'
            }
        }
    }
})
**:class**
例如 <div class='basic' :class='xx'> </div> 
    所绑定的动态属性名 XX 是字符串时  适用于 样式类名不确定 需要动态指定
    <div class='basic' :class='xx1'> </div>
    所绑定的动态属性名 XX 是数组时  适用于  要用的样式个数不确定，类名也不确定 需要动态指定
    <div class='basic' :class='xx2'> </div>
    所绑定的动态属性名 XX 是字符串时  适用于 要用的样式个数确定，样式类名确定 但可决定用不用某个类名
    
**:style**  
    <div :style='{fontSize:'30px'}'>
    直接把样式写在行内
    <div :style='styleObj'>
    把样式写成对象放在data对象中

1. v-show 元素的显示隐藏 接收一个布尔值 不会移除dom元素 用于条件渲染 适用于高频率切换
2. v-if 接受一个表达式 符合条件显示 不然会清除dom 用于条件渲染 用于低频率切换 元素可能无法被获取
3. v-else-if 接受一个表达式 用于和v-if一起使用 中间不可中断
4. v-else 不管啥都会执行 不接受参数 直接执行

实例
new Vue({
    el: '#root',
    data: function () {
        return {
            display: false,
            num: 0,
            styleObj: {
                marginRight: '10px'
            }
        }
    },
    methods: {
        add() {
            this.num++
        },
        remove() {
            this.num--
        },
        visibleChange() {
            this.display = !this.display
        }
    }
})

<div id="root">
    <div v-show="display"></div>
    <div v-if="num===0">react</div>
    <div v-else-if="num===1">Vue</div>
    <div v-else>angular</div>
    <teleport v-if="display">
        <button @click="remove" class="btm">--------</button>
        <button @click="add" :style="{marginRight:'10px'}">+++++</button>
    </teleport>
    <div>
        <button @click="visibleChange" :style="styleObj">visible</button>
    </div>
</div>