1.Vue入门
1.1下载Vuejs
[https://cn.vuejs.org]
1.2Vue入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }} {{name}} {{pwd}}
<br/>
<span>
{{name}}
<h1>{{msg}}</h1>
<h2>{{pwd}}</h2>
</span>
</div>
<script src="../static/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg: "欢迎学习vue!",
name:"sunyun",
pwd:"11111",
},
});
</script>
<div id="app">
<h3>{{msg}}</h3>
<h3>{{user.name}} {{user.msg}}</h3>
<h3>{{age}}</h3>
<h3>{{lists[0]}} {{lists[1]}}</h3>
<h3>{{users[0].age}}</h3>
</div>
<script src="../static/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg: "欢迎学习vue!",
user:{name:"sunyun",msg:"handsomeBoy!"},
age:23,
lists:["jiangxi","shangrao","yushan"],
users:[{name:"sy",age:"20"},{naem:"hauhau",age:"21"}]
},
});
</script>
<div id="app">
<h3>{{msg.toUpperCase()}}</h3>
</div>
<script src="../static/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg: "vue",
},
});
</script>
</body>
</html>
#总结
1.vue实例对象中的el属性: 代表Vue的作用范围 日后Vue的用作范围都可以用Vue语法
2.Vue实例中的data属性: 用来给Vue实例绑定一些相关的数据,绑定的数据可以通过{{变量名}}在Vue作用范围内去取出来
3.在使用{{}}取值可以书写表达式以及逻辑运算,调用相关的方法
4.el属性可以书写任意的css选择器,在Vue开发时候推荐使用id选择器
2. v-text和v-html
2.1 v-text
#总结
1.使用v-text取值会覆盖标签中原有的数据,使用{{}}则不会覆盖
2.使用v-text可以避免在网络环境差的情况下出现插值闪烁
2.2 v-html