【郑州校区】前端笔记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>

帐号		自动登录	找回密码
密码			加入黑马

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

0 个回复

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