可生成动态的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: 'https://cn.vuejs.org/images/logo.png', tzUrl: 'https://www.baidu.com/', num : 10 }, methods: { add: function(){ console.log('add被调用') this.num ++ } }, }) </script></body></html>
git源码地址:https://github.com/caiyuanzi-song/vue-demo.git