龙空技术网

vue-02 模板数据绑定渲染

菜园子dz 121

前言:

而今小伙伴们对“js监听dom渲染”大致比较重视,我们都想要剖析一些“js监听dom渲染”的相关知识。那么小编同时在网上搜集了一些对于“js监听dom渲染””的相关资讯,希望小伙伴们能喜欢,姐妹们快快来学习一下吧!

可生成动态的HTML页面,页面中使用嵌入 Vue.js 语法可动态生成

1. {{xxxx}}双大括号文本绑定

2. v-xxxx以v-开头用于标签属性绑定,称为指令

双大括号语法{{}}

格式:{{表达式}}

作用:

使用在标签体中,用于获取数据

可以使用 JavaScript 表达式

一次性插值v-once

通过使用v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新

输出HTML指令v-html

格式:v-html='xxxx'

作用:

如果是HTML格式数据,双大括号会将数据解释为普通文本,为了输出真正的 HTML,你需要使用v-html指令。

Vue 为了防止 XSS 攻击,在此指令上做了安全处理,当发现输出内容有 script 标签时,则不渲染

XSS 攻击主要利用 JS 脚本注入到网页中,读取 Cookie 值(Cookie一般存储了登录身份信息),读取到了发送到黑客服务器,从而黑客可以使用你的帐户做非法操作。XSS 攻击还可以在你进入到支付时,跳转到钓鱼网站。

元素绑定指令v-bind

完整格式:v-bind:元素的属性名='xxxx'

缩写格式::元素的属性名='xxxx'

作用:将数据动态绑定到指定的元素上

事件绑定指令v-on

完整格式:v-on:事件名称="事件处理函数名"

缩写格式:@事件名称="事件处理函数名"注意:@后面没有冒号

作用:用于监听 DOM 事件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<div id="app">

<h3>1、{{}}双大括号输出文本内容</h3>

<!-- 文本内容 -->

<p>{{msg}}</p>

<!-- JS表达式 -->

<p>{{score + 1}}</p>

<h3>2、一次性插值</h3>

<p v-once>{{score + 1}}</p>

<h3>3、指令输出真正的 HTML 内容 v-html</h3>

<p>双大括号:{{contentHtml}}</p>

<!--

v-html:

1、如果输出的内容是HTML数据,双大括号将数据以普通文本方式进行输出,为了输出真正HTML数据,就需要使用v-html指定

2、为了防止XSS攻击

-->

<p>v-html:<span v-html="contentHtml"></span></p>

<h3>4、v-bind属性绑定指令</h3>

<img v-bind:src="imgUrl">

<img :src="imgUrl">

<a :href="tzUrl">跳转</a>

<h3>5、事件绑定指令 v-on</h3> <input type="text" value="1" v-model="num"> <button @click='add'>点击+1</button> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: "菜园子", score: 100, contentHtml: '<span style="color:red">此内容为红色字体</span>', imgUrl: ';, tzUrl: ';, num : 10 }, methods: { add: function(){ console.log('add被调用') this.num ++ } }, }) </script></body></html>

git源码地址:

标签: #js监听dom渲染