Mustache 语法

  • 这是一种双括号语法,它会被替换成对应的值。
  • mustache 中能填写的内容
    • 单个数据
    • 算数运算
    • 表达式
    • 调用函数或计算属性
    • 三元运算符
  • 	<template id="my-app">
          <!-- 1. 基本使用 -->
          <h2>{{message}}</h2>
          <!-- 2. 算数运算 -->
          <h2>{{counter * 2}}</h2>
          <!-- 3. 表达式 -->
          <h2>{{message.split(' ').reverse().join(' ')}}</h2>
          <!-- 4. 函数调用 -->
          <!-- 可以使用计算属性 -->
          <h2>{{ getReverseMessage() }}</h2>
          <!-- 5. 三元运算符 -->
          <h2>{{isShow ? "hhhh":""}}</h2>
          <button @click="toggle">切换</button>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      message: "Hello World!",
                      counter: 10,
                      isShow: true,
                  };
              },
              methods: {
                  getReverseMessage() {
                      return this.message.split(' ').reverse().join(' ');
                  },
                  toggle() {
                      this.isShow = !this.isShow;
                  }
              }
          }
          Vue.createApp(App).mount("#app");
      </script>
    

基本指令

v-once

  • 用于指定元素或者组件只渲染一次
    • 当数据发生变化时,元素或组件以及其所有的子元素将视为静态内容并跳过。
    • 可用于性能优化
  • 	<div id="app"></div>
    
      <template id="my-app">
          <h2>{{message}}</h2>
          <h2>{{counter}}</h2>
          <!-- v-once: 指定标签和标签内的内容只渲染一次,后面数据发生改变也不再重新渲染 -->
          <h2 v-once>{{counter}}</h2>
          <button @click="increment">+1</button>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      message: "Hello World!",
                      counter: 0
                  };
              },
              methods: {
                  increment() {
                      this.counter ++;
                  }
              }
          }
          Vue.createApp(App).mount("#app");
      </script>
    
  • 指定了 v-once 的标签并不会,随时数据的改变而更新。也就是只渲染一次。后面就认为是静态的。

v-text

  • 这个等价于直接在标签内部直接通过Mustache语法展示某个值。
  • 		<h2>{{message}}</h2>
         	 <!-- 两者等价 -->
     	<h2 v-text="message"></h2>
    

v-html

  • 默认情况下,如果展示内容本身是html,只会被 Vue 当作字符串展示。
  • 使用 v-html, 可以让该内容被解析成html
    • 	<div id="app"></div>
      
      	<template id="my-app">
       		<h2>{{msg}}</h2>
      		<!-- 将html内容渲染 -->
        	<h2 v-html="msg"></h2>
      	</template>
      
      	<script src="../js/vue.js"></script>
      	<script>
        	const App = {
            	template: '#my-app',
            	data() {
                	return {
                    		msg: "<h1 style='color:red'>asfdas</h1>"
               	};
           	 }
        	}
        	Vue.createApp(App).mount("#app");
      	</script>
      

v-pre

  • 用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签,一般情况下用于,跳过不需要编译的结点,加快编译的速度。
  • 	<--{{message}}-->
    	<div v-pre>{{message}}</div>
    

v-cloak

  • 这个指令保持在元素上知道关联组件实例结束编译
  • 一般用于和css元素 display:none, 一起使用。用于隐藏mustach标签。
  • 	<style>
          [v-cloak] {
              display: none;
          }
    
      </style>
    	<div id="app"></div>
    
      <template id="my-app">
          <!-- 如果还没有解析完成,就让其隐藏避免出现{{message}}这种没渲染的情况 -->
          <h2 v-cloak>{{message}}</h2>
      </template>