vue总结
模拟数据
在dev-server中,使用express提供的接口
var appData = require("./xxx.josn");
var dataClassify1 = appData.dataClassify1;
...
获取接口
var apiRoutes = express.Router();
配置接口
apiRouters.get("/dataClassify1",function(req,res){
res.json({
erron:0, (自定义的返回值,标识错误或者权限等)
data: dataClassify
})
});
使用配置
app.use("/api",apiRoutes);
当路由为api/dataClassify1时,返回虚拟后台数据
guide
vue实例
1.通过new vue({})实例化,extend来创建可复用已经预定义的vue组件
2.实时监控的data属性通过两种方式添加:
.通过return
.通过 datas = {},然后在vue实例里面 data=datas,data将代理 datas,两者等价
3.实例的方法属性通过$来辨别
```
关于数据绑定
分为:
一次性绑定 v-once
单向绑定 大部分的绑定 通过v-bind 或者 {{}}
双向绑定 存在与data中的,通过v-model绑定input等可输入控件的值与data中数据
```
模版
一.插值:
1.{{}}
2.v-once 该节点所以插值只是一次性插值
3.v-html 插入html文本(安全问题)(此时不能通过{{}}绑定值,只能通过v-bind:xx=""来绑定)
4.模版内可使用表达式(被放在沙盒中),但是只能使用是单条语句且只能访问全局变量的一个白名单,如Math,Date,不能访问用户自定义的全局变量
二.过滤器:
1.添加在mustache的尾部,由管道符 | 指引
2.使用实例方法filter或者类中filters中去注册
3.{{a|filterA()|filterB()}}--a值通过两个过滤器
指令:
1.v-bind:xx="xxx" v-bind: 缩写 :
2.v-on:click.prevnet="xx" 指令:参数.修饰符 v-on: 缩写 @
计算属性
当{{a}} {{ a*xxx+xx }} {{c}} 而 第二个中计算太多时,可以将第二个替换为计算属性 {{b}}
computed : {
b : function (){ ---默认是get
return a*xxx...
},
c :{
set : function(newc){
this.a=newc...;
},
get :function(){
return axxx...
}
}
值是被缓存的 , 只有当依赖数据改变时,才会去更新通过computed更新值
对比methods
return this.a + new Date();
--- computed(计算属性) 只有在a变化才会变化
--- methods(触发方法) 在两个任意变化都会变化
--- watch(监听数据) watch执行异步或者更昂贵的操作,如,知道操作停止才计算属性等...
class与style绑定
绑定class
1.直接绑定值
v-bind:class="active"
2.判断+复合
:class="{a:isa , b:isb}" class="else" data中设置isa,isb,渲染class="a,b,else"
3.设置为对象
:class="{{classobj}}" data中设置classobj:{a:true,b:true},渲染class="a,b";
4.设置为返回对象的函数
computed:{
class_obj:function(){
...处理...
return {
a:isa,
b:isb
}
}
}
5.设置为数组
[{a:isa},b,c]
绑定style
1.{color:color,fontSize:size+'px'} data中 color:"red",size:100
2.直接绑定对象 "{classobj1,classobj2}"
classobj1:{
color:"red"
}
Vue自动添加前缀
条件列表渲染
条件渲染
v-if="istrue" v-show="ok"
v-else
列表渲染
1.数组arr:[{a:1},{b:2}]
v-for="(item,index) in/of arr"
2.对象obj:{a:1,b:2}
v-for="(value,key,index) in obj"
3.整数迭代
v-for="n in 10"
事件处理器
通过v-on/@ 参数 修饰符 绑定methods中的方法
一:获得event对象
1: @click="fn" fn:function(e){e是evnet对象}
2: @click="fn(parm,$event)" fn:function(parm,evnet){}...
二:事件修身符
1.stop 阻止继续往上冒泡
2.prevent 阻止默认事件
3.capture 使用事件捕获模式
4.self 只有在该元素本身触发,才会执行回调
三:按键别名...
表单控件
v-model是根据类型自动绑定数据的
修饰符:
lazy---实事改为change事件中同步
number---能转为数字的转数字,为NaN的,为原值,配合type=number(值为字符串)
trim---过滤空格 , 多个空格合为一个
组件
一:注册
1.创建在template中
vue.component("app",{
data:datas,
template:"<i>{{a}}</i>"
})
2.创建在<script type="text/x-template"> ... </>
3.创建在<template>...</>
然后 vue.component("app",{
teplate:"#app"
})
---其中,分为两步,先生vue.extend({}),创建一个组件构造器,然后用vue.component({})注册,这里是用语法糖将两步合在一起,这些是全局注册的
4.父子组件
vue.component("app",{
data:datas,
template:"<i>{{a}}<app2></app2></i>",
components:{
"app2":app2
}
})
5.局部子组件
var app = {
template:"#app"
}
new vue({
component{
"app":app
}
})
**组件中的data和el必须使用函数
二.props组件数据传递
1.props-down
*子组件内 props:{} 注册
子组件元素 <子组件 :msg="变量"></> -- 动态绑定
*msg="xx" xx会作为字符串常量传下去 -- 静态传值
*初始化传值:通过data return msg = this.parentMsg
*不能在子组件中直接改变props的值,可以通过computed
msg:fn(){
return this.parentMsg+msg2 == msg2改变时改变值
} ---> computed的值,不能再直接更改,如methods中使用 this.msg = "xx" ,不起作用
props的验证属性:
props:{
a:{
dafault:"默认值",
required:true 必要性
type:Numner/String/Object... ,[string,number] === 原生验证
validator:fn(val){return val>0} ===自定义验证
}
}
2.event-up
子组件上:
1. <模版里面 v-on:click="childEvent">
methods:{
childEvent:function(){
this.$emit("self_difine_evnet")
}
} --- 当子组件触发事件,发出emit定义的事件
2. <子组件 v-on:self_difine_evnet = "parentEvent"> --父组件触发事件
或者子组件触发原生事件
<子组件 v-on:click.native="parentEvent"> --当子组件内点击时,触发父组件事件
3.非父子组件通信通过空vue实例,更复杂的通过状态管理插件;
三.slot -- 内容分发(父组件往子组件内插入html代码)
子组件中:slot 也可以加name
父组件中 子组件元素内加元素 也可以元素上加slot="xx"
默认下,在父组件中 往子组件内加的元素 ,是不会被显示的
如果加了slot ,则将这些元素插入slot中,如果有name,则按照name分别插入
动态组件
通过 <keep-alive><component v-bind:is="组件"></></keep-alive>
父组件内
data:{组件:a}
components:{"a":a,"b":b}
通过改变data.组件来在同一个挂载点上切换组件
<keep-alive> 保存了组件在内存中,避免重新渲染
四.杂项
异步组件(按需加载)
递归组件
组件命名约定
深入响应式原理
过渡效果
1.使用默认的或者重置的class:
name-enter 出现时,立刻添加,然后立刻删除这个class,只是为transition添加初始状态
name-enter-active 从enter过渡到这个状态,过渡时间完成后删除
name-leave
name-leave-active 这些只会在运动状态时添加上去,运动完后是默认的那些class
<transition name="xx">
<p>toggle<p> --- class会添加到p上
</transition>
默认名字是v ,添加名字重置前缀
2.使用自定义类名--用来搭配 如animated.css库
<transition
enter-class=""
enter-active-class="animated tada"
leave-active-class=""
leave-class="" >
3.使用js钩子函数--用来搭配 如velocity.js等js动画库等
before-enter
enter ---done()回调 , 当仅通过js完成过渡效果时,为必须
after-enter
enterCancelled
befor-leave
leave ---done()回调
after-leave
leaveCancelled
然后在methods里面注册,依然还是会在元素内添加类名,只是效果可以由js完成
还可以自定义钩子和初始化渲染的过渡
