Vue学习(二)-胡子({{}})语法

一,插值操作

  • 这种语法叫做 Mustache 语法

    中文叫做胡子的意思,两个 {{}} 长的比较像胡子,所以这样命名了

    <body>
        <div id="app">
            <p>{{ message }}p>					 
            <p>{{ message + ' ' + message }}p>	  
            <p>{{ (num+10) * 2 }}p>				 
            <p>{{ message }} {{ message }}p>		 
        div>
        <script src="VueJs/vue.js">script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!',
                    num: 0
                }
            })
        script>
    body>
    
  • 涉及插值操作的指令
    1. v-once

      我们知道,在Vue里面,所有的数据都是响应式的,我们不想让某些数据发生改变,就需要用到这个指令

      添加该属性的DOM元素,该DOM元素内的**{{}}里面的值不会发生改变**

      <div id="app">
          <h2>{{message}}</h2>
          <h2 v-once>{{message}}</h2>
      </div>
      
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  message: 'Hello Vue!',
              }
          })
      </script>
      

      Vue学习(二)-胡子({{}})语法_第1张图片

    2. v-html

      有时候服务器给我们返回的不是数据二十一串html的字符串,我们想把他转换成DOM元素放到页面中

      <div id="app">
          <h2>{{ message1 }}h2>		
          <h2 v-html="message2">h2>	
      div>
      
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  message1: '百度',
                  message2: '百度',
              }
          })
      script>
      

      Vue学习(二)-胡子({{}})语法_第2张图片

    3. v-text

      把文本数据覆盖到DOM元素中,如果原先要填充的DOM元素中有另外的文本也会被覆盖

      Vue学习(二)-胡子({{}})语法_第3张图片

      Vue学习(二)-胡子({{}})语法_第4张图片

    4. v-pre

      不对 {{}} 里面的值进行解析,数据原封不动展现出来

      <div id="app">
          <h2>{{ message }}h2>
          <h2 v-pre>{{ message }}h2>
      div>
      
      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  message: '你好呀',
              }
          })
      script>
      

      在这里插入图片描述

    5. v-cloak

      有些情况下,浏览器可能还没有解析出我们编写的 ViewModel ,页面会直接显示处未渲染的 {{ data }}

      在这里插入图片描述

      使用该指令可以解决问题

      <style>
          [v-cloak] {
              display: none;
          }
      style>
      
      <div id="app">
          <h2 v-cloak>{{ message }}h2>		
      div>
      
      <script>
          setTimeout(function() {
              var app = new Vue({
                  el: '#app',
                  data: {
                      message: 'Hello Vue'
                  },
              })
              }, 1000)
      script>
      

      在这里插入图片描述

你可能感兴趣的:(Vue框架学习)