前端笔记Vue项目day1(二）

 

v-html

• 用法和v-text 相似  但是他可以将HTML片段填充到标签中

• 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

• 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

• [AppleScript] 纯文本查看 复制代码

  ?

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

  <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] 纯文本查看 复制代码

    ?

    01 02 03 04 05 06 07 08 09 10 11 12 13

    <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] 纯文本查看 复制代码

      ?

      01 02 03 04 05 06 07 08 09 10

      <!-- 即使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] 纯文本查看 复制代码

        ?

        1 2 3 4 5 6 7

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