Vue基础
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部分见五
