一、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>
黑马程序员