黑马程序员技术交流社区

标题: 【郑州校区】前端笔记Vue项目第一天 一 [打印本页]

---

作者: 我是楠楠    时间: 2020-3-17 10:23
标题: 【郑州校区】前端笔记Vue项目第一天 一

【郑州校区】前端笔记Vue项目第一天 一

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>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2