v-html

• 用法和v-text 相似  但是他可以将HTML片段填充到标签中
• 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
• 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
• [AppleScript] 纯文本查看 复制代码

  <div id="app">
  　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
      
      <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
      
  　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
  </div>
  <script>
  　　let app = new Vue({
  　　el: "#app",
  　　data: {
  　　　　message: "<span>通过双括号绑定</span>",
  　　　　html: "<span>html标签在渲染的时候被解析</span>",
  　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
  　　}
   });
  </script>

• v-pre
  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染
  • [AppleScript] 纯文本查看 复制代码

    <span v-pre>{{ this will not be compiled }}</span>    
    	<!--  显示的是{{ this will not be compiled }}  -->
    	<span v-pre>{{msg}}</span>  
         <!--   即使data里面定义了msg这里仍然是显示的{{msg}}  -->
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue.js'
            }
        });
    
    </script>

  • v-once
    • 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
    • [AppleScript] 纯文本查看 复制代码

      <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
           <span v-once>{{ msg}}</span>    
      <script>
          new Vue({
              el: '#app',
              data: {
                  msg: 'Hello Vue.js'
              }
          });
      </script>

    • 双向数据绑定
      • 当数据发生变化的时候，视图也就发生变化
      • 当视图发生变化的时候，数据也会跟着同步变化
        
        
      v-model
      • v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用
      • [AppleScript] 纯文本查看 复制代码

        <div id="app">
              <div>{{msg}}</div>
              <div>
                  当输入框中内容改变的时候，  页面上的msg  会自动更新
                <input type="text" v-model='msg'>
              </div>
          </div>

        
        
      
      
    
    
  
  

v-html

• 用法和v-text 相似  但是他可以将HTML片段填充到标签中
• 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
• 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
• [AppleScript] 纯文本查看 复制代码

  <div id="app">
  　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
      
      <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
      
  　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
  </div>
  <script>
  　　let app = new Vue({
  　　el: "#app",
  　　data: {
  　　　　message: "<span>通过双括号绑定</span>",
  　　　　html: "<span>html标签在渲染的时候被解析</span>",
  　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
  　　}
   });
  </script>

• v-pre
  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染
  • [AppleScript] 纯文本查看 复制代码

    <span v-pre>{{ this will not be compiled }}</span>    
    	<!--  显示的是{{ this will not be compiled }}  -->
    	<span v-pre>{{msg}}</span>  
         <!--   即使data里面定义了msg这里仍然是显示的{{msg}}  -->
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue.js'
            }
        });
    
    </script>

  • v-once
    • 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
    • [AppleScript] 纯文本查看 复制代码

      <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
           <span v-once>{{ msg}}</span>    
      <script>
          new Vue({
              el: '#app',
              data: {
                  msg: 'Hello Vue.js'
              }
          });
      </script>

    • 双向数据绑定
      • 当数据发生变化的时候，视图也就发生变化
      • 当视图发生变化的时候，数据也会跟着同步变化
        
        
      v-model
      • v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用
      • [AppleScript] 纯文本查看 复制代码

        <div id="app">
              <div>{{msg}}</div>
              <div>
                  当输入框中内容改变的时候，  页面上的msg  会自动更新
                <input type="text" v-model='msg'>
              </div>
          </div>