<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" v-text="msg" >
</div>
<div id="box" v-html="html"> <!-- 这个是用来显示带html标签的内容的 -->
</div>
<!-- <div id="box">
<button v-on:click="change">{{msg}}</button> //事件绑定肯定要输入事件参数。
</div> -->
<!-- <div id="box">
<a v-bind:href="url">这里是a链接</a> //用来绑定html已有的属性，比如 class, style, src,href等等
<img v-bind:src="src">
</div> -->
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'值前前',
html:"html",
url:"http://www.baidu.com",
src:"http://img5.imgtn.bdimg.com/it/u=2973638769,3401137854&fm=27&gp=0.jpg"
},
methods:{
change:function(){
this.msg="值后后"
}
}
})
</script>
</html>
//二次视频
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-text v-html实例</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <span>{{message}}</span><br> <!--第一种获得数据方式。有一个弊端，在浏览器解析代码还没解析道 下面new Vue 对象时，网速慢的情况下 用户会看到 {{message}}的情况 --> <span v-text="message"></span><br><!--第二种获得数据方式，实际开发时这种方法用的较多--> <span>{{dodo}}</span><br> <!--这样写 标签会直接显示出来--> <span v-html="dodo"></span> <!--有标签的数据可以这样写。但是不建议这么写，黑客会攻击，尤其在表单处。--> </div> </body> <script type="text/javascript"> new Vue({ el:"#app", data:{ message:'你好，caicai', dodo:"<h2>hello，蔡蔡</h2>", } }) </script> </html>