vue笔记

VUE中methods中的方法不可以写成箭头函数的形式

v-text：直接将内容全部做一个替换。后续写在标签内的东西就不会进行展示

v-pre：将标签元素不解析，以原始状态进行展示

v-cloak：{{message}}没有成功处理完成之前，就不会加载，以防js代码加载过程中，出现{{message}}。隐藏未编译的Mustanche标签直到组件实例准备完毕。

[v-cloak]{
    display: none;
}
<h2 v-cloak>{{message}}</h2>

v-memo="name"：只有当name数据改变了div v-memo里面的内容才会改变。并且这个标签写在id=app的div上并不会生效（有没有大神告诉一下为什么）

<div id="app">
        <div v-memo="[name]">
            <h2>{{message}}</h2>
            <h2>{{name}}</h2>
            <button @click="changeMessage">点击改变数据</button>
        </div>
    </div>
    
    <script src="../lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data:function(){
                return{
                    message:"hello world",
                    count: 2,
                    name: "名字"
                }
            },
            //methods中的方法不可以写成箭头函数的样子。会导致this指向window
            //所以，vue中，methods中的所有方法，都是普通函数
            methods:{
                changeMessage: function(){
                    console.log("触发了方法")
                    this.message = "hello vue";
                }
            }
        }) 
        app.mount("#app")
    </script>

vue绑定语法v-bind使用（简写为:）

<h1 :class="s">点击切换颜色</h1>
<h1 :class="isActive?s1:s2">单属性三元运算符</h1>
<h1 :class="{s : isActive}">单属性真假运算对象绑定</h1>
<h1 :class="{s:true,s1:true,s2:true,s:true}">多属性真假对象绑定</h1>
<h1 class="s" :class="isActive?s1:s2">动态绑定和普通绑定一起使用</h1>
<h1 :class="['why',isActive? 's1' : 's2',{'s1':isActive}]"></h1>