常用指令 : 扩展html标签功能,属性
v-model : 一般表单元素(input) 双向数据绑定
循环:
v-for = "v in arr" {{v}} {{$index}}
v-for = "v in json" {{v}} {{$key}} {{$index}}
v-for = "(k,v) in json" {{v}} {{k}}/{{$key}} {{$index}}
事件:
v-on:click="add()"
v-on:click/mouseout/mouseover/dblclick/mousedown.....
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
add:function(){ //方法
this(new出来的vue).arr(使用data里面的数据);
}
}
});
显示隐藏:
v-show=“true/false”
事件:
v-on:click/mouseover......
简写的:
@click=" " 推荐
事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true; 需要事件对象
b). @click.stop vue提供的(推荐)
默认行为(默认事件):
阻止默认行为:(鼠标右键的默认行为)
a). ev.preventDefault(); 需要事件对象
b). @contextmenu.prevent 推荐
键盘:
@keydown $event ev.keyCode
@keyup
常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
属性:
v-bind:src=""
width/height/title....
简写:
:src="" 推荐
<img src="{{url}}"> 效果能出来，但是会报一个404错误
<img v-bind:src="url"> 效果可以出来，不会发404请求
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是数据
:class="[red,b,c,d]"
:class="{red:a, blue:false}"
:class="json"
data:{
json:{red:a, blue:false}
}
--------------------------
data:{
c:{color:'red'},
b:{backgroundColor:'blue'} 注意: 复合样式，采用驼峰命名法
json:{color:'red', backgroundColor:'blue'}
}
style:
:style="[c]"
:style="[c,d]"
:style="json"
过滤器:-> 过滤模板数据
系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase 大写 eg: {{'welcome'| uppercase}}
lowercase 小写
capitalize 首字母大写
currency 钱 {{ 12 | currency ￥}}
{{msg| filterA 参数}}
....
交互
如果vue本身不支持，想做交互
需要引入: vue-resouce
get.php/post.php:
<?php
$a=$_GET['a'];
$b=$_GET['b'];
echo $a+$b;
?>
new Vue({
el:'#box',
data:{
myData:[],
t1:'',
now:-1 }
methods:{
get:function(){
获取一个普通文本数据:
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);
});
},
post:function(){
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true //必须要加上
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
}); },
get:function(){//jsonp 百度搜索框例子
if(ev.keyCode==38||ev.keyCode==40)return;//在按向上或向下的箭头的时候不会发送请求
if(ev.keyCode==13){//按回车键会自动在百度上搜索你选择的内容
window.open('http://www.baidu.com/s?wd=' + this.t1);
}this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1 },{
jsonp:'cb' //callback名字，默认名字就是"callback"，此时在百度接口中是cb
}).then(function(res){
this.myData=res.data.s;
},function(res){
alert(res.status);
}); },
changeDown:function(){
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.t1=this.myData[this.now]; }
changeUp:function(){
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
this.t1=this.myData[this.now]; }
}
<div id="box">
<input type="text" v-modal="t1" @keyup="get($event)" @keydown.down="changeDown()"
@keydown.up.prevent="changeUp()"> <ul>
<li v-for="value in myData" :class="{gray:$index==now}">
{{value}} </li> </ul>
<p v-show="myData.length==0">暂无数据。。。</p></div>
vue事件:
@click=""
数据:
添加一条留言：
获取某一页数据:
getPageData(1);
vue生命周期:
钩子函数(可以使用的函数) 执行的时期
created -> 实例创建好之后,编译之前 √
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √
vm.$destroy() 销毁实例
beforeDestroy -> 销毁之前
destroyed -> 销毁之后
用户会看到花括号标记:（闪烁）
v-cloak 防止闪烁, 比较大段落
v-text 也可以防止闪烁，但是不能转义html
v-html 转义html
<div class='v-cloak'><span>{{msg}}</span></div>
<span v-text='msg'></span>
<span v-html='msg'></span>
计算属性:
var vm = new Vue({
aa:11,
el:'#box',
data:{
a:1
},
computed:{
b:function(){ //默认调用get，b的值取决于返回值
return this.a+1;
},
b:{
get:function(){
return this.a+1;
},
set:function(val){
this.a=val;
}
}
}
})
document.onclick=function(){
vm.b=10;
}
computed里面可以放置一些业务逻辑代码，一定记得return
vm.$el -> 就是元素，相当于document.getElementById;
vm.$data -> 就是data,实例的数据
vm.$mount('#box') -> 手动挂载vue程序, 相当于el:’ ’
vm.$options.aa -> 获取自定义属性
vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态
循环：
v-for="value in data" 不可以添加重复数据
会有重复数据？
track-by='索引' 提高循环性能
track-by='$index/uid(数据id)'
过滤器:
vue提供的过滤器：
capitalize uppercase currency
debounce 延迟 配合键盘事件使用
@keyup="show|debounce 2000" 延迟2秒执行
limitBy 限制数量
limitBy num 取几个
limitBy num1 num2 从哪个位置开始
v-for="val in arr|limitBy 2"
filterBy 过滤数据
filterBy 'w' 过滤谁
orderBy 排序
orderBy ‘谁’ 1 正序排列
orderBy -1 到序排列
自定义过滤器: model ->过滤 -> view
{{ a | name 1 2}}
Vue.filter(‘name’,function(input, a, b){
a：参数1； b：参数2；
});
时间转化器：
双向过滤器:*（过滤html标记）
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},//（model -> view）
write:function(val){ //view -> model
return val; //未执行
} //(view -> model)
});
自定义指令:
属性:
Vue.directive(red-->指令名称,function(参数){
this.el -> 原生DOM元素
});
<div v-red="a-->参数"></div> * 注意: 必须以 v-开头
指令名称: v-red -> red
拖拽:
Vue.directive('drag',function(){
var oDiv=this.el;
oDiv.onmousedown=function(ev){
var disX=ev.clientX-oDiv.offsetLeft;
var disY=ev.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
};
<div id="box">
<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
</div>
自定义元素指令:（用处不大）
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
<zns-red></zns-red>
自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
监听数据变化:
vm.$el/$mount/$options/....
vm.$watch(name,fnCb); //浅度
fnCb 回调函数，监听的数据发生变化后执行的函数
vm.$watch(name,fnCb(){},{deep:true}); //深度监视 可以监视对象
vue过渡(动画) animate.css 动画库
本质和css3一样: transtion ,animation
1.首先规定动画的名称
<div id="box">
<button @click="show = !show">按钮</button>
<transition name="fade">
<div v-if="show">一个div</div>
</transition>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
2.定义Vue实例
new Vue({
el: '#box',
data: {
show: true
}
})
- 1
- 2
- 3
- 4
- 5
- 6
3.定义动画的样式
进去
.fade-enter-active {
animation: fade-in .5s;
}
出来
.fade-leave-active {
animation: fade-out .5s;
}
@keyframes fade-in {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes fade-out {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
4.过渡
.fade-enter-active {
transition: all .3s ease;
}
.fade-leave-active {
transition: all .8s ease;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
5.过渡和动画只有在定义样式的时候不一样，其他的都是一样的
定义一个组件:
1 全局组件
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json) 事例-Vue组件-其他
var Aaa=Vue.extend({
data(){
return{
msg:’我是标题…’
};
}
template:'<h3>{{msg}}</h3>'
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件，只在box里面才可以用
‘aaa’:Aaa
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
另一种编写方式:
Vue.component('my-aaa',{ //全局的，用的多些
template:'<strong>好</strong>'
});
var vm=new Vue({
el:'#box',
components:{ //局部的
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'<h2 @click="change">标题2{{msg}}</h2>'
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
配合template模板:
1. template:'<h2 @click="change">标题2->{{msg}}</h2>'
2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
b). <template id="aaa">//推荐
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
var vm=new Vue({
el:'#box',
components:{ //局部的
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
3 动态组件:
<input type="button" @click="a='aaa'" value="aaa组件">
<input type="button" @click="a='bbb'" value="bbb组件">
<component :is="a(组件名称)"></component>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2>',
},
'bbb':{
template:'<h2>我是bbb组件</h2>'
}
}
});
组件数据传递: vue默认情况下，子组件也没法访问父组件数据
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{//父组件
data(){
return{
msg:'我是父组件的数据‘’
}
},
template:'<h2>我是aaa组件--》{{msg}}</h2><bbb></bbb>',//父组件可以直接使用自己以及子组件的数据
components:{
'bbb':{//子组件
template:'<h3>我是bbb组件</h3>'
}
}
},
'bbb':{
template:'<h2>我是bbb组件</h2>'
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 子组件就想获取父组件data
在调用子组件：
<template id="aaa"> //只要在这个模板之重都可以拿到msg的数据
<h1>1111-->{{msg}}</h1>
<bbb :m="msg"></bbb>
</template>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{//父组件
data(){
return{
msg:'我是父组件的数据‘’
}
},
template:'#aaa',
components:{
'bbb':{//子组件
props:{'m':String},//props:['m']//多个数据：props:{'m':String,'myMsg':Number}
template:'<h3>我是bbb组件 {{m}}</h3>'
}
}
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
子组件之内:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
2. 父级获取子级数据
原理：子组件把自己的数据，发送到父级 -->vm.$emit(事件名,数据);
<template id="aaa"> //只要在这个模板之重都可以拿到msg的数据
<span>我是父级 -->{{msg}}</span>//一开始获取的是父组件的msg，点击按钮之后变成子组件的msg
<input type="button" value="按钮">
<bbb @child-msg="get"></bbb>//接受数据
</template>
<template id="bbb"> //只要在这个模板之重都可以拿到msg的数据
<h2>我是子组件</h2>
<input type="button" value="提交" @click="send">
</template>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{//父组件
data(){
return{
msg:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
get:(msg){
this.msg=msg;
}
},
components:{
'bbb':{//子组件
data(){
return{
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);
}
},
}
}
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
slot
<div id="box">
<aaa>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</aaa>
</div>
<template id="aaa">
<h2>XXXX</h2>
<slot>占个位置</slot>//在页面渲染的时候如果aaa标签里面有其他标签，slot标签里面的内容将被替代
<p>welcome vue</p>
</template>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa',
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
类似ng里面 transclude （指令）-> SPA应用，单页面应用
vue-resouce 交互
vue-router 路由
根据不同url地址，出现不同效果
咱上课: 0.7.13
主页 home
新闻页 news
html:
主页 跳转链接
展示内容:
<router-view></router-view>
- 1
- 2
- 3
js:
//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 启动路由
router.start(App,'#box');
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
跳转:
router.redirect({
‘/’:’/home’
});
路由嵌套(多层路由):
主页 home
登录 home/login
注册 home/reg
新闻页 news
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
6201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
