一、Mustache语法
模版语法
React的开发模式:
React使用jsx 所以对应的代码都是编写类似于js的一种语法;
之后通过Babel将jsx编译成React.creatElement函数调用
Vue也支持jsx的开发模式
大多情况下,使用基于HTML的模版语法;
在模版中 允许开发者以声明式的方式将DOM和底层组件实例的数据 绑定在一起
在底层的实现中,Vue将模版编译成虚拟DOM渲染函数,
二、Mustache双大括号语法(掌握)
如果我们希望把数据显示到模版中,使用最多的语法是"Mustache语法(双大括号)的文本插值"
data返回的对象 是有添加到Vue的响应式系统中
当data中的数据发生变化时 对应的内容也会发生更新
当然 Mustache中不仅仅可以是data中的属性 也可以是一个 JavaScript的表达式
JavaScript <div id="app"> <!-- 1 基本使用 --> <h2>{{message}}</h2> <h2>当前计数:{{counter}}</h2> <!-- 2 表达式 --> <h2>计数双倍:{{ counter * 2 }}</h2> <h2>展示信息:{{ infos.split(" ") }}</h2> <!-- 3 三元运算符 --> <h2>{{ age>=18? "成年人":"未成年人" }}</h2> <!-- 4 调用methods中的函数 --> <h2>{{ formateDate(time) }}</h2> <!-- 5 注意:这里不能定义语句! if语句也不支持 --> </div> <script src="../lib/vue.js"></script> <script> // 创建app const app = Vue.createApp({ data: function () { return { message: "Hello Vue!", counter: 100, infos: "my name is xiong", age: 22, time: 123 } }, methods: { formateDate(data) { return "2020-10-10 " + data } } }) // 挂载app app.mount('#app')
三、常见的基本指令
v-once指令(了解)
v-once用于指定元素或组件只能渲染一次
当数据发生变化时 元素或组件以及其所有子元素将视为静态内容 并且跳过
该指令可以用于性能优化
HTML <div id="app"> <!-- 指令:v-once =>只渲染一次 --> <h2 v-once>{{ message }} <span>数字:{{counter}}</span> </h2> <h1>{{ message }}</h1> <button @click="changeMessage">改变message</button> </div>
JavaScript <script src="../lib/vue.js"></script> <script> // 创建app const app = Vue.createApp({ data: function () { return { message: "Hello Vue!", counter: 100 } }, methods: { changeMessage() { this.message = "你好,Vue!" this.counter += 100 console.log(this.message, this.counter) } } }) // 挂载app app.mount('#app')
v-text指令
用于更新元素textContent:
JavaScript <h2 v-text="message">aaaa</h2> //此时拿到message 会把'aaaa'覆盖掉 |
V-html指令
默认情况下,展示的内容本身是html的,那么vue不会对他进行特殊的解析
如果我们希望这个内容被Vue解析出来,可以使用v-html来展示
HTML <div id="app"> <h2>{{content}}</h2> <h2 v-html="content"></h2> </div>
JavaScript <script src="../lib/vue.js"></script> <script> // 创建app const app = Vue.createApp({ data: function () { return { content: '<span style="color:red;font-size:30px;">哈哈哈哈</span>' } }, }) // 挂载app app.mount('#app') </script>
V-pre指令
v-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签:
跳过不需要编译的节点,加快编 译的速度
HTML <div id="app"> <h2>{{message}}</h2> <p>当前计数{{counter}}</p> <!-- 当加了v-pre之后 将不会编译 --> <p v-pre>{{}}</p> </div>
JavaScript <script> // 创建app const app = Vue.createApp({ data: function () { return { message: "Hello Vue!", counter: 0 } }, }) // 挂载app app.mount('#app') </script>
v-cloak cloak=>斗篷的意思
这个指令保持在元素上直到关联组件实例结束编译
它必须和css一起使用,这个指令可以隐藏未编译的Mustache标签直到组件实例准备完毕
CSS <style> [v-cloak] { display: none; } </style>
HTML <div id="app"> <h2 v-cloak>{{message}}</h2> </div>
JavaScript <script src="../lib/vue.js"></script> <script> setTimeout(() => { // 创建app const app = Vue.createApp({ data: function () { return { message: "Hello Vue!" } }, }) // 挂载app app.mount('#app') }, 3000); </script>
v-memo(新)
指定数据发生改变,才改变其他数据,其他数据发生改变,不会改变
HTML <div id="app"> <div v-memo="[name]"> <h2>姓名:{{name}}</h2> <h2>年龄:{{age}}</h2> <h2>身高:{{height}}</h2> <!-- 需求 只有name发生改变 其他东西才改变 --> </div> <button @click="updataInfo">改变信息</button> </div>
JavaScript <script src="../lib/vue.js"></script> <script> // 创建app const app = Vue.createApp({ data: function () { return { name: "xiong", age: 18, height: 1.88 } }, methods: { updataInfo() { this.name = "kobe" // this.age = 20 } } }) // 挂载app app.mount('#app')
