标签：asc 一个 div 程序 rip 引入 hello 括号 blog
一、vue的编写步骤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> //1.0与2.0是有区别的，但是 <script src="../libs/vue1026.js"></script> //1.引入的1.0的包 <script src="../libs/vue221.js"></script> //1.引入的2.0的包 </head> <body> <div id="app"> //引入的包一定要确定一个范围表明这个范围的指令都是被vue来解析 {{msg}} </div> </body> <script> //通过vue实例化一个对象，用这个对象来解析id=app中的指令 new Vue({ el:"#app", //表示vm对象将来操作的view的区域是app的这个div中的所有指令 data:{ msg:"hello world" //称为为mvvm中的model } }) </script> </html>
二、常用指令
1.插值表达式{{}}
这是数据常用的形式就是使用"Mustache"语法(双大括号)的文本插值，Mustache标签将会被替代为对应数据对象msg属性(定义在data中的值)
例如：
<span>{{mag}}</span>
对javascript表达式的支持
例如:
{{1+1}}
{{ok?‘yes‘:‘no‘}} //只支持三元表达式不支持if判断
但是只能绑定单个表达式
2.v-text和v-html的指令
共同点:都是将一个变量渲染到制定的表达式中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<script src="../libs/vue1026.js"></script> </head> <body> <div id="app"> {{name}} <span v-text="name"></span> <span v-html="name"></span> </div> </body> <script src="./libs/vue221.js"></script> <script src="./libs/vue1026.js"></script> <script> var vm = new Vue({ el:"#app", data:{ name:"<span>黑马程序员</span>"
} })
</script>
</html>
输出结果： <span>黑马程序员</span> 黑马程序员
不同点:v-html会解析标签而v-text则不会
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../libs/vue1026.js"></script> </head> <body> <div id="app"> <span v-text="name"></span> <br /> <span v-html="name"></span> </div> </body> <script src="./libs/vue221.js"></script> <script src="./libs/vue1026.js"></script> <script> var vm = new Vue({ el:"#app", data:{ name:"<h1>黑马程序员</h1>" } }) </script> </html>
输出结果： <h1>黑马程序员</h1> 黑马程序员
标签：asc 一个 div 程序 rip 引入 hello 括号 blog
原文地址：http://www.cnblogs.com/lichao123/p/7258456.html
