01. Vue.JS 第一课 02:51
Vue 1.0.21 Sublime Text
1 、vue:
读音: v-u-e
view
2、vue到底是什么?
一个mvvm框架(库)、和angular类似
比较容易上手、小巧
mvc:
- mvp
- mvvm
- mv*
- mvx
3、网址:
官网：http://cn.vuejs.org/
手册： http://cn.vuejs.org/api/
4、vue和angular区别?
共同点: 不兼容低版本IE
vue——简单、易学
指令以 v-xxx
一片html代码配合上json，再new出来vue实例
个人维护项目
适合: 移动端项目,小巧
vue的发展势头很猛，github上start数量已经超越angular
angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护
合适: pc端项目
5、vue基本雏形:
angular展示一条基本数据:
var app=angular.module('app',[]);
app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
})
html:
div ng-controller="xxx"
{{msg}}
vue:
html:
<div id="box">
{{msg}}
</div>
var c=new Vue({
el:'#box', //选择器 class tagName
data:{
msg:'welcome vue'
}
});
6、常用指令:
指令: 扩展html标签功能,属性
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show
$scope.show=function(){}
Vue:
- v-model 一般表单元素 双向数据绑定
实例：
- v_model01.html
<!-- 一片html代码配合上json,再new出来vue实例 -->
<div id="box">
<input type="text" v-model="msg"/>
{{msg}}
</div>
<script type="text/javascript" src="vue.js"></script> <!-- v1.0.21 -->
<script type="text/javascript">
var c = new Vue({ //{}--json形式；c可取任意名字
el: '#box',
data: {
msg: 'Welcome vue'
}
});
</script>
- v_model02.html
<div class="box">
<input type="text" v-model="msg"/>
{{msg}}
</div>
<script type="text/javascript" src="vue.js"></script> <!-- v1.0.21 -->
<script type="text/javascript">
var vm = new Vue({ //{}--json形式；vm可取任意名字
el: '.box', //类选择器亦可
data: {
msg: 'Welcome vue'
}
});
</script>
- v_model03.html
<input type="text" v-model="msg"/>
{{msg}}
<script type="text/javascript" src="vue.js"></script> <!-- v1.0.21 -->
<script type="text/javascript">
var vm = new Vue({ //{}--json形式；c可取任意名字
el: 'body', // **标签选择器**亦可
data: {
msg: 'Welcome vue'
}
});
</script>
new Vue data:里面的数据可以是string,number,boolean,array,json
示例：5 vue_data数据类型-
循环： v-for
a-循环数组：<ul> <li v-for="value in arr"> {{$index}} {{value}} <!-- 索引值 值 --> </li> </ul>
b--循环json
<ul>
<li v-for="items in json">
{{$index}}--{{$key}}: {{items}} <!-- 索引、键、值 -->
</li>
</ul>
<ul>
<li v-for="(k,v) in json2">
{{$index}}--{{k}}: {{v}} <!-- 索引、键、值 -->
</li>
</ul>
4）事件：配合methods使用
v-on:click= ""
v-on:mouseover= ""
v-on:mouseout=""
v-on:mousedown=""
v-on:dblclick=""
实例见 8 vue_基础事件02.html
<input type="button" value="按钮" v-on:click="add()" />
<script type="text/javascript">
var vm = new Vue({ //{}--json形式；c可取任意名字
el: '#box', //标签选择器亦可
data: {
arr: ['apple','orange','banana'], //数组
},
methods: { //务必记得加s
add: function(){
// alert(this.arr);
this.arr.push('pear'); //this指vm
}
}
});
</script>
5）显示隐藏:
v-show=“true/false”
bootstrap+vue简易留言板(todolist):
bootstrap: css框架 跟jqueryMobile一样
只需要给标签 赋予class，角色
依赖jquery
确认删除？和确认删除全部么?
FAQ：
- Bootstrap3--JavaScript插件中的模态框
- 优化：将讲师设置的“取消”与“确认”所在的div的类名modal-body设置为
modal-footer就直接右对齐，无需再设置text-right; - 什么情况下“暂无数据呢...”?
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据....</p>
</td>
</tr>
- 什么情况下“删除全部”显示?
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm">删除全部</button>
</td>
</tr>
- 动态设置 序号、名字、年龄、操作,
data: {
myData: [
{name:'xxx',age:'xxx'}
]
}
<tr class="text-center" v-for="items in myData">
<td>{{$index}}</td>
<td>{{items.name}}</td>
<td>{{items.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">删除</button>
</td>
</tr>
效果图如下：
效果图01.gif
- 添加按钮：
- 难点:
删除按钮 01:12:00
7、事件:
v-on:click/mouseover......
简写的:
@click="" 推荐
例子：
<input type="button" value="按钮" v-on:click="show()" />
<input type="button" value="按钮" @click="show()" />
8、事件对象:
@click="show($event)"
示例：
<div id="box">
<input type="button" value="按钮" @click="show($event)" />
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
window.onload = function() {
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(ev){
alert(ev.clientX);
}
}
});
}
</script>
9、事件冒泡:
实例：点击按钮 会以此弹出1和2，说明出现了事件冒泡
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click="show()" />
</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
window.onload = function() {
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(){
alert(1);
},
show2: function(){
alert(2);
}
}
});
}
</script>
阻止冒泡:
a). ev.cancelBubble=true; [原生JS]
<div @click="show2()">
<input type="button" value="按钮" @click="show($event)" />
</div>
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(ev){
alert(1);
ev.cancelBubble=true;
},
show2: function(){
alert(2);
}
}
});
b). @click.stop 推荐
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click.stop="show($event)" />
</div>
</div>
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(ev){
alert(1);
},
show2: function(){
alert(2);
}
}
});
10、默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault(); [原生JS]
<div id="box">
<input type="button" value="按钮" @contextmenu="show($event)" />
</div>
var c = new Vue({
el: "#box",
data: {
},
methods: {
show: function(ev){
alert(1);
ev.preventDefault();
}
}
});
}
</script>
b). @contextmenu.prevent 推荐
<div id="box">
<input type="button" value="按钮" @contextmenu.prevent="show()" />
</div>
11、键盘:
@keydown $event ev.keyCode
@keyup
示例1：
<div id="box">
<input type="button" value="按钮" @keydown="show()" />
</div>
示例2：
<div id="box">
<input type="text" @keydown="show($event)" />
</div>
methods: {
show: function(ev){
alert(ev.keyCode);
}
}
常用键:
回车(ev.keyCode == 13)
a). @keyup.13
<input type="text" @keydown.13="show()" />
b). @keyup.enter
<input type="text" @keydown.enter="show()" />
c). 上、下、左、右
- @keyup/keydown.left
- @keyup/keydown.right
- @keyup/keydown.up
- @keyup/keydown.down
.....
12、属性:
v-bind:src=""
width/height/title....
简写:
:src="" 推荐
 效果能出来，但是会报一个404错误
 效果可以出来，不会发404请求
vue_属性01.jpg
特殊属性：class和style:
1、class
:class=""
v-bind:class=""
:style=""
v-bind:style="":class="{red:true, blue:true}"
<div id="box">
<strong :class="{red: true,big:true}">class属性</strong>
</div>
<style type="text/css">
.red{
color: red;
}
.big{
font-size: 30px;
}
</style>
效果图：
vue_class属性01.jpg
:class="{red:a, blue:false}"
<div id="box">
<strong :class="{red:a,blue:false}">class属性</strong>
</div>
<style type="text/css">
.red{color: red;}
.blue{background-color: blue;}
</style>
var vm=new Vue({
el: '#box',
data: {
a: true
}
});
-
:class="[red]" //red是data里面的数据
:class="[red,b,c,d]" //多个class的情况
![]()
vue_class属性02.jpg
vue_class属性02.jpg
- :class="json"
new Vue({
el:'#box',
data:{
json:{
red:true,
blue:true
}
}
});
<div id="box">
<strong :class="json">文字...</strong>
</div>
2、style:
<strong :style="{color:'red'}">style属性</strong>
<!-- 注意:red加引号 -->
- :style="[c]"
vue_style01.jpg
- :style="[c,d]"
注意: 复合样式，采用驼峰命名法
vue_style02.jpg
- :style="json" --官方推荐
vue_style03.jpg
模板:
- {{msg}} 数据更新模板变化
- {{*msg}} 数据只绑定一次
vue_msg01.jpg
- {{{msg}}} HTML转义输出
vue_转义输出.jpg
过滤器:-> 过滤模板数据
系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize --首字母大写
currency 钱
{{msg| filterA 参数}}
....
实例如下：
过滤器01.jpg
交互:
Angular:$http （ajax对象）
如果vue想做交互
引入: vue-resouce (库)
get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
PHP我不会也~~呜呜
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
案例：百度下拉列表
作业:
1. 简易留言板-> 确认删除? 确认删除全部 （模态框标题更改）
2. 用vue get 写个例子 weibo