模拟数据

在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:1002.直接绑定对象 "{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:"{
   {a}}" })2.创建在

深入响应式原理

过渡效果

1.使用默认的或者重置的class:name-enter 出现时,立刻添加,然后立刻删除这个class,只是为transition添加初始状态name-enter-active 从enter过渡到这个状态,过渡时间完成后删除name-leavename-leave-active  这些只会在运动状态时添加上去,运动完后是默认的那些class
        
     
toggle
     
  --- class会添加到p上默认名字是v ,添加名字重置前缀2.使用自定义类名--用来搭配 如animated.css库
      
       3.使用js钩子函数--用来搭配 如velocity.js等js动画库等before-enterenter           ---done()回调 , 当仅通过js完成过渡效果时,为必须after-enterenterCancelledbefor-leaveleave            ---done()回调after-leaveleaveCancelled然后在methods里面注册,依然还是会在元素内添加类名,只是效果可以由js完成还可以自定义钩子和初始化渲染的过渡