可生成动态的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
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
