1.双向绑定 v-model：通过指令v-model，实现双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<h1>{{address}}</h1>
<div id="app">
<h2>{{address}}</h2>
<h3>{{address}}</h3>
<h4>{{address}}</h4>
<h5>{{address}}</h5>
<h6>{{address}}</h6>
<input type="text" v-model="address"/>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
address: "北京*"
}
});
</script>
</html>
2.闪现 v-cloak：F12打开Chrome的调试窗口，选中NetWork，在选择Slow3G，观察问题。
遇到插值表达式加载时闪烁对用户不好的现象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
…
</div>
</body>
</html>
3.v-if：v-if指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue数据的写法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 用来判断,类似于java的if else if else,判断成立就显示不成立就不显示 -->
<p v-if="person.age>=18">成年人</p>
<p v-if="person.age<18">未成年人</p>
<p v-if="person.salary>=2000">金领</p>
<p v-else-if="person.salary>=1000">白领</p>
<p v-else>屌丝</p>
<!-- 和v-if一样也可以判断,只是条件不满足也会在页面加载,不显示而已 -->
<p v-show="person.age>=20">成年人</p>
</div>
<script>
new Vue({
el:"#app",
data:{
address:"北京",
name:"张三",
age:20,
person:{
name:"jack",
age:18,
salary:1100
},
hobby:["唱","跳","rap"],
url:"http://act.codeboy.com/"
}
});
</script>
</body>
</html>
4.循环 v-for：v-for 指令可以绑定数组的数据来渲染一个项目列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue数据的写法</title>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#app",
data:{
address:"北京",
name:"张三",
age:20,
person:{
name:"jack",
age:18,
salary:1100
},
hobby:["唱","跳","rap"],
url:"https://act.codeboy.com/"
}
});
}
</script>
</head>
<body>
<div id="app">
<p>地址:{{address}}</p>
<p>姓名:{{name}}</p>
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}} , 个数:{{hobby.length}}</p>
<p>数组的第一个元素:{{hobby[0]}} </p>
<p>数组的第最后一个元素:{{hobby[2]}} </p>
<!-- 数组的遍历:类似于java里的foreach循环,o表示每次获取到的数据 -->
<p v-for="o in hobby">{{o}}</p>
<!-- o是数据,i是下标 -->
<p v-for="o,i in hobby">下标是:{{i}}---数据是:{{o}}</p>
<p v-for="(o,i) in hobby">下标是:{{i}}---数据是:{{o}}</p>
</div>
</body>
</html>
5.v-on：
@click为v-on:click的缩写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<button @click="count++">点我</button>
<button onclick="show()">javascript 点我</button>
<button v-on:click="show()">v-on:click 点我</button>
<button @click="show()">简写的事件,点我</button>
</div>
</body>
<script>
function show(){
alert("old show");
}
new Vue({
el: "#app",
data:{
msg : "hello vue",
count:1
},
methods:{
show : function(){
console.log(this.msg)
}
}
})
</script>
</html>
6.绑定 v-bind：
当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理
全称: v-bind:href
简称： :href 冒号开头就说明后面跟的是变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<a href="http://act.codeboy.com">java培优</a>
<a v-bind:href="url" target="_blank">{{urlname}}</a>
<a :href="url" target="_blank">{{urlname}}</a>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{
name: "tony",
url: "http://act.codeboy.com",
urlname: "达内java培优"
}
})
</script>
</html>