vue.js精讲01
笔记及源码地址 ： https://github.com/wll8/vue_note
01
- 2017-09-13
view
一个 mvvm框架(库)，和 ag 类似。
比较小巧，容易上手。
mvc:
mvp
mvvm
mvx(mv*)
vue 和 ag 的区别。
不用纠结什么好，项目适合什么就用什么。
vue
简单
中文文档
指令： v-xxx
例子： html + json + vue实例
维护： 个人
适合： 移动
ag
上手难
英文文档
指令： ng-xxx
例子： 把所有属性和方法挂到 $scope 上
维护： 谷歌
合适： pc
共同点：
不兼容低版本ie
vue雏形
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<div id="box">{{msg}}</div> <!-- html -->
<script>
var json={ /*json*/
el:'#box',
data:{
msg:'vue'
}
}
var c=new Vue(json); // vue实例
</script>
常用指令
指令： 扩展 html 标签功能，属性。
v-model 一般用表单元素 input 上。
注，教程失效部分：
v-repeat 已改为 v-for
$index 弃用，改为 `(value, index) in arr` 得到 index 变量。
$key 弃用，改为 `(value, key) in obj` 得到 key 变量。
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<div id="box">
<input v-model="msg">
{{msg}} <br>
{{arr}} <br>
{{obj}} <br>
数组<hr>
<p v-for="value in arr">{{value}}</p>
下标，数组<hr>
<p v-for="(value, index) in arr">{{index}}{{value}}</p>
对象<hr>
<p v-for="value in obj">{{value}}</p>
key，对象<hr>
<p v-for="(value, key) in obj">{{key}}{{value}}</p>
</div>
<script>
var json={ /*json*/
el:'#box',
data:{
msg:'vue',
arr:[1,2,3],
obj:{a:1,b:2}
}
}
var c=new Vue(json); // vue实例
</script>
事件
所有事件都写在 methods 中。
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<div id="box">
<button @click="show()">alert</button>
</div>
<script>
var json={
el:'#box',
methods:{
show:function(){
alert(1);
console.log(this.$el);
}
}
}
var c=new Vue(json); // vue实例
</script>
vue + bootstrap 实现 todolist
todolist也被认为是留言版。
在线 bootstrap ，引入 -alpha 或 -beta 版本js会报错。
https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.js
Uncaught Error: Bootstrap dropdown require Popper.js
https://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js
Uncaught Error: Bootstrap tooltips require Tether
https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js
正常使用。
相关源码
01.vue雏形
<script src="https://unpkg.com/vue"></script>
<div id="box">{{msg}}</div> <!-- html -->
<script>
var json={ /*json*/
el:'#box',
data:{
msg:'vue'
}
}
var c=new Vue(json); // vue实例
</script>
02.常用指令
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<div id="box">
<input v-model="msg">
{{msg}} <br>
{{arr}} <br>
{{obj}} <br>
数组<hr>
<p v-for="value in arr">{{value}}</p>
下标，数组<hr>
<p v-for="(value, index) in arr">{{index}}{{value}}</p>
对象<hr>
<p v-for="value in obj">{{value}}</p>
key，对象<hr>
<p v-for="(value, key) in obj">{{key}}{{value}}</p>
事件<hr>
<button @click="show()">alert</button>
<button @click="add()">arr push</button>
v-show <hr>
<button @click="show_btn=!show_btn">显示隐藏</button>
<p v-show="show_btn">显示隐藏</p>
</div>
<script>
var json={ /*json*/
el:'#box', /*html元素*/
data:{ /*变量*/
msg:'vue',
arr:[1,2,3],
counter:0,
show_btn:true,
obj:{a:1,b:2}
},
methods:{ /*所有方法都放在里面，注意s*/
show:function(){
alert(1);
console.log(this.$el);
},
add:function(){
this.arr.push(1);
}
}
}
var c=new Vue(json); // vue实例
</script>
03.todolist
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
myData:[
],
username:'',
age:'',
nowIndex:-1, // 当前点击的数据
},
methods:{
add:function(){
this.myData.push({
name:this.username,
age:this.age
});
this.username='';
this.age='';
},
del:function(n){
if(n==-2){
this.myData=[];
}else{
this.myData.splice(n,1); // 删除数据中的第n位
}
}
}
})
}
</script>
<div class="conatiner" id="box">
<form role="form">
<div class="form-group">
<label for="username">用户名：</label>
<input v-model="username" type="text" id="username" class="form-control" placeholder="输入用户名">
</div>
<div class="form-group">
<label for="age">年 龄：</label>
<input v-model="age" type="text" id="age" class="form-control" placeholder="输入年龄">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<input type="reset" value="重置" class="btn btn-danger">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-info text-center">用户信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="(item, index) in myData">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=index">删除</button></td>
</tr>
<tr v-show="myData!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">删除全部</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据...</p>
</td>
</tr>
</table>
<!-- 模态框，弹出框 -->
<div role="dialog" class="modal fade" id="layer">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<div class="modal-title">确认删除{{nowIndex==-2 ? '全部' : ''}}么？</div>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" @click="del(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
