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完成
还可以自定义钩子和初始化渲染的过渡