Infi-chu: http://www.cnblogs.com/Infi-chu/ 一、什麼是Vue1.Vue.js是一個構建數據驅動的Web界面的漸進式框架2.Vue.js的目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件3.核心是一個響應的數據綁定系統二、基本使用eg.<!DOC ...
Infi-chu:
http://www.cnblogs.com/Infi-chu/
一、什麼是Vue
1.Vue.js是一個構建數據驅動的Web界面的漸進式框架
2.Vue.js的目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件
3.核心是一個響應的數據綁定系統
二、基本使用
eg.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
<!-- 01.導包 -->
<script src="./js/vue.js"></script>
<script>
// 03. 監聽
window.onload = function () {
// 04:創建vue
var vm = new Vue({
// 綁定操作對象
el:'.box',
data: {
content: 'Vue的基本使用'
}
});
}
</script>
</head>
<body>
<!-- 02:div標簽(設置模板變數)-->
<div class="box">{{content}}</div>
</body>
</html>
【註】
1.開發包
vue.js
2.生產包
vue.min.js
三、基本語法
eg.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>操作數據</title>
<script src="./js/vue.js"></script>
<script>
window.onload = function () {
// uve對象
var vm = new Vue({
// 標簽對象
el:'.box',
// 數據和屬性
data:{
content:'操作數據',
linkdata:'百度鏈接',
url:'http://www.baidu.com',
count:0
},
// 方法
methods: {
fnAddClick:function () {
// 跨域
this.count += 1;
}
}
});
}
</script>
</head>
<body>
<div class="box">
<!-- 第一種.v-on: -->
<!-- <button v-on:click='fnAddClick'>計數器:{{count}}</button> -->
<!-- 第二種.@ -->
<button @click='fnAddClick'>計數器:{{count}}</button>
<a v-bind:href="url" target="_blank">{{linkdata}}</a>
<p>{{content}}</p>
</div>
</body>
</html>
四、條件渲染
eg.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>條件渲染</title>
<script src="./js/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:'.box',
data:{
flag:4
}
});
}
</script>
</head>
<body>
<div class="box">
<!-- 01:v-if -->
<!-- <p v-if='flag==1'>01:v-if</p> -->
<!-- 02:v-else-if -->
<!-- <p v-else-if='flag==2'>02:v-else-if</p> -->
<!-- 03:v-else-if -->
<!-- <p v-else-if='flag==3'>03:v-else-if</p> -->
<!-- 04:v-else -->
<!-- <p v-else>04:v-else</p> -->
<!-- 05:v-show -->
<!-- <p v-show='flag==3'>05:v-show</p> -->
</div>
</body>
</html>
【註】
1.v-show用法和v-if大致一樣，但是不支持v-else，他和v-if的區別是，它製作元素樣式的顯示和隱藏，元素一直是存在的
2.在vue中使用v-show，原來的css代碼不能設置display屬性，會導致衝突
五、列表渲染
1.js部分
<script>
window.onload = function () {
var vm = new Vue({
el:'.box',
data:{
// 01: 普通列表
itemList:[1, 2, 3, 4, 5],
// 02: 列表下標
indexList:['a','b','c','d'],
// 03: 有且只有一個對象
objData:{
name:'小明',
age:19
},
// 04: 對象列表
objList:[
{
name:'小明',
age:20
},
{
name:'小紅',
age:21
}
]
}
});
}
</script>
2.普通列表
<li v-for='item in itemList'>{{item}}</li>
3.列表下標
<li v-for='(item,index) in indexList'>角標{{index}}==數值{{item}}</li>
4.有且僅有一個對象
<li v-for='item in objData'>{{item}}</li>
<li v-for='(obj,key) in objData'>屬性值{{obj}}-----屬性名{{key}}</li>
5.對象列表
<li v-for='obj in objList'>屬性值1:{{obj.name}}==屬性值2:{{obj.age}}</li>
六、表單輸入綁定（雙向綁定數據）
可以用 v-model 指令在表單\ <input> 及 \<textarea> <select> 元素上創建雙向數據綁定
eg.
<!-- 01.單行文本框 -->
<input type="text" v-model='content'>
<p>{{content}}</p>
<!-- 02.多行文本框 -->
<textarea v-model='content'></textarea>
<p>{{content}}</p>
<!-- 03.單選框 -->
<input type="radio" name="sex" value="男" v-model='content'>男
<input type="radio" name="sex" value="女" v-model='content'>女
<p>{{content}}</p>
<!-- 04.多選框 -->
<input type="checkbox" name="lk" value="吃飯" v-model='like'>吃飯
<input type="checkbox" name="lk" value="睡覺" v-model='like'>睡覺
<input type="checkbox" name="lk" value="打豆豆" v-model='like'>打豆豆
<p>{{like}}</p>
<!-- 05.下拉框 -->
<select name="addr" v-model='address'>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
</select>
<p>{{address}}</p>
【註】js部分見五
