vue.js1.0笔记

0332afac3bf2d60d72fe69db0cc263274290dd686145b-Xeebvn.jpeg

官网:http://cn.vuejs.org/
与angular类似的一个MVVM框架。
与DOM的行为驱动不同、vue以及angular是以数据作为驱动操作页面变化。

  • 基本格式

以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。

  new Vue({
       el:'#box',
        //数据
       data:{
             key:'welcome vue',
             arr:['apple','banana','orange','pear'],
             json:{a:'apple',b:'banana',c:'orange'}
       }
      //方法
      methods:{
            add:function(){
            //push 添加元素
                  this.arr.push('tomato');
            }
      }
      //计算属性
      computed:{
       //默认为get方法
           b:function(){
               //业务逻辑代码
               return 2;
          }
        //内部可以实现set、get两个方法
           c:{
               get:function(){
                   return this.a+2;
               },
               set:function(val){
                  this.a=val-2;
               }
           }
       },
       components:{ //局部组件---详见组件
        'my-aaa':Aaa
    }   
  });
  //钩子函数(生命周期)
  created:function(){
       alert('实例已经创建');
  }
  //自定义过滤器
  Vue.filter('toDou',function(val,a,b){
        return val<10?'0'+val:''+val;
  });
  //自定义指令
  Vue.directive('red',function(){
        this.el.style.background='red';
  });
  • 常用指令

  • 双向数据绑定v-model:"key"
     <input type="text" v-model="key">
    

将{key:value}于input双向绑定。
改动时其余部分的{{key}}也会随之替换。

  • 循环v-for
    <li v-for="value in arr">
    
       {{value}}
    </li>

value为内容、$index为索引、$key为字典(json)独有。
//针对json格式的数据还有以下写法
<li v-for="(k,v) in json">
{{k}} {{v}}
</li>
k为key、v为value
重复数据有事不予展示:track-by="$index/uid"添加索引
<li v-for="(k,v) in json" track-by="$index">
{{k}} {{v}}
</li>

  • 显示隐藏v-show
    data:{ //数据
    
        a:true
     }
    <input type="button" value="按钮" v-on:click="a=false">
    <div style="width:100px; height:100px; background: red" v-show="a">

v-show:true/false

false显示
  • 条件渲染v-if
    <div id="app" >
    
       <p v-if='ture'>{{message}}</p>
    </div>

v-if:true/false

true显示
  • 区别

v-if是真实的条件渲染、当进行条件切换时、它会销毁和重建条件块的内容,并且它支持<template>语法
v-show的条件切换时基于css的display属、所以不会销毁和重建条件块的内容

当你频繁需要切换条件时,推荐使用v-show;否则使用v-if;
  • v-else

v-else必须与v-show/v-if连用
当其处在非渲染状态下执行v-else中的代码块

  • 事件绑定v-on:
    <input type="button" value="按钮" v-on:click="show()">
    

click可以换成任意事件
v-on:click与@click等价

  • 自定义指令:directive

声明为red、调用时调用v-red

  • 无参数
    v-red
    Vue.directive('red',function(){
    //此处的this.el与vm.$el为同一个DOM元素。但是写法不同需要区分
    this.el.style.background='red';
    });
  • 有参数
    v-changeColor="'blue'"/"myColor"
    Vue.directive('changeColor',function(color){
    this.el.style.background=color;
    });
  • 元素指令
    Vue.elementDirective('zns-red',{
    bind:function(){
    this.el.style.background='red';
    }
    });
    <div id="box">
    <zns-red></zns-red>
    </div>
  • 事件对象

 <input type="button" value="按钮" @click="show($event)">

$event结构体内部与原生相同

  • 阻止事件冒泡

a).方法内部: ev.cancelBubble=true; (原生js)
b).@click.stop (vue功能)

  • 阻止默认行为

a). ev.preventDefault(); (原生js)
b). @contextmenu.prevent (vue功能)//contextmenu为右键点击

  • 键盘事件

  • 默认
    @keydown ------ $event    ev.keyCode
    @keyup
    回车 (a). @keyup.13(b). @keyup.enter
  • 自定义键盘事件
    Vue.directive('on').keyCodes.ctrl=17;
    Vue.directive('on').keyCodes.myenter=13;
    <input type="text" @keydown.myenter="show">
  • 属性

普通属性

<im src="{{url}}" alt=""> 数据双向绑定,但是会报一个404错误
<im v-bind:src="url" alt="">属性绑定,不会发404请求
v-bind:src="url"可以简写成:src="url"

class

1、
:class="[red]" red是数据 :class="[red,b,c,d]"
2、
:class="{red:a, blue:false}" a=true
3、
:class="json"
data:{
json:{red:true, blue:false}
}

style
 :style="json"
 backgroundColor:'gray'  //复合样式,采用驼峰命名法
  • 模板

{{msg}}----数据更新模板变化
{{*msg}}----数据只绑定一次
{{{msg}}}----HTML转意输出(< h3>aaa</ h3>)

  • 过滤器

过去模板中的内容并加以改变
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase --- 大写
lowercase --- 小写
capitalize --- 首字母大写
currency --- 美元符号
currency "人民币:" --- 自定义参数
debounce 2000--- 配合事件,延迟执行

  • 数组配合使用过滤器:
    limitBy 取几个/取几个 从哪开始
    filterBy'关键词' 过滤数据
    orderBy 排序
    json 展示json全部数据
          1 -> 正序
          -1 -> 倒序
  • 自定义过滤器
    Vue.filter('toDou',function(val,a,b){
    return val<10?'0'+val:''+val;
    });
  {{a | toDou 1 2}}
  • 禁止{{花括号}}显示

  • v-cloak
    <style>
    [v-cloak]{
    display:none;
    }
    </style>
    <div v-cloak> </div>
  • v-text:直接输出
    <span v-text="msg"></span>
  • v-html:转译输出
    <span v-html="msg"></span>
  • 交互

get
  • 获取普通文本数据
    this.$http.get('a.txt').then(function(res){
      alert(res.data);
    },function(res){
      alert(res.status);
    });
  • 给服务发送数据
    this.$http.get('url',paramsDic).then(function(res){
    alert(res.data);
    },function(res){
        alert(res.status);
    });
post
this.$http.post('post.php',{
      a:1,
      b:20
  },{
      emulateJSON:true
  }).then(function(res){
      alert(res.data);
  },function(res){
      alert(res.status);
  });
jsonp

jsonp采用的get方式
this.$http.jsonp(''https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su'',{
word:'a'
},{
//callback名字,默认名字就是"callback"

      jsonp:'cb'
  }).then(function(res){
      alert(res.data.s);
  },function(res){
      alert(res.status);
  });
简写
this.$http({
    url:地址
    data:给后台提交数据,
      //method默认为get
    method:'get'/'post'/'jsonp'
      //如果method改为jsonp、需要声明cbName
    jsonp:'cb' //cbName
  }).then(function(res){
       //成功
  },function(res){
      // 失败
  });
  • 生命周期(钩子函数)

1.0

created -> 实例已经创建
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √
beforeDestroy -> 销毁之前
destroyed -> 销毁之后

2.0

beforeCreate ->实例初始化之后。
created -> 实例已经创建。
beforeMount -> 编译之前
mounted -> 编译之后 √
activated -> keep-alive 组件激活时调用。
deactivated -> keep-alive 组件销毁时调用。
beforeUpdate -> 数据更新之前
update -> 数据更新之后
beforeDestroy -> 销毁之前
destroyed -> 销毁之后

通常在√时、vue.js已可以使用
created:function(){
       alert('实例已经创建');
  }
  • 计算属性:computed

computed:{
   //默认为get方法
        b:function(){
           //业务逻辑代码
           return 2;
        }
  //内部可以实现set、get两个方法
        c:{
          get:function(){
             return this.a+2;
                },
          set:function(val){
              this.a=val-2;
          }
        }
   }
  {{b}}

计算属性必须有返回值

  • vue实例简单方法

  • vm.$el -> 获取元素
    vm.$el.style.background='red';>

  • vm.$data -> 获取data数据对象
    console.log(vm.$data.a);

  • vm.$mount -> 手动挂载vue程序

     vm.$mount('#box');
    
  • vm.$options -> 获取自定义属性
    vm.$options.customMethods.show();

  • vm.$destroy -> 销毁对象
    vm.$destroy

  • vm.$log(); -> 查看现在数据的状态

  • vm.$watch ->监听数据变化

  • 浅度监听
    vm.$watch('a',function(){
    this.b=this.a+100;
    });

  • 深度监听
    vm.$watch('json',function(){
    alert('发生变化了');
    },{deep:true});

  • 过渡(动画)

<div id="div1" class="animated" v-show="bSign" transition="fade"></div>
  • 自定义动画
    <style>
    
          //动画总体设置
      .fade-transition{
          transition: 1s all ease;  
      }
          //动画进入
      .fade-enter{
          opacity: 0;
      }
          //动画移出
      .fade-leave{
        opacity: 0;
          transform: translateX(200px);
      }
    </style>
  • 利用animate.css实现动画

下载https://daneden.github.io/animate.css/
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
//需要做动画的控件需要一个专属className:animated
vue中
transitions:{ //定义所有动画名称(具体样式可以去animate.css官网查看)
bounce:{
//进入
enterClass:'zoomInLeft',
//离开
leaveClass:'zoomOutRight'
}
}

  • 组件

  • 注册组件
    var Aaa=Vue.extend({
    
        //直接显示
        template:"<h3 @click='change'>我是标题3</h3>",
        //显示数据
        //****data必须是函数的形式,函数必须返回一个对象(json)
        data(){
            return {
                msg:'数据MSG'
            }
        },
        //添加方法
        methods:{
          change(){
                this.msg="changed";
            }
        }
    });
  • 全局组件
    //参数1组件名、参数2组件对象
    Vue.component('aaa',Aaa);
  • 局部组件
    //在vue中
    components:{ //局部组件
    
        'aaa':Aaa
    }
html中均使用<aaa></aaa>即可
  • 模板使用
    template:'#aaa'
    
    • 配合js
      <script type="x-template" id="aaa">
        <h2 @click="change">标题2->{{msg}}</h2>
      </script>
    • 配合template-------推荐
      <template id="aaa">
        <h1>标题1</h1>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>
    • 动态组件
      //html中 :is="组件名称"
      <component :is="a"></component>
      //vue中
      
      data:{
      a:'aaa'
      },
      components:{
      'aaa':{
      template:'<h2>我是aaa组件</h2>'
      },
      'bbb':{
      template:'<h2>我是bbb组件</h2>'
      }
      }
  • 组件查看工具

vue-devtools

  • 父子组件

在父级控件中继续声明components即可
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2><bbb></bbb>',
components:{
'bbb':{
template:'<h3>我是bbb组件</h3>'
}
}
}
}
});

数据传递:

默认情况下,vue子组件没法访问父组件数据

    • 子级获取父级数据:
      //父组件中---绑定子组件属性
      //.sync可以让组件属性跟随子组件而同步
      <bbb :m="msg2" :my-msg.sync="msg"></bbb>
      //子组件中---在props中声明属性
      props:['m','myMsg']
      props:{
        'm':String,
        'myMsg':Number
      }
    • 父级获取子级数据:3步
      //子级方法中发数据记给父级
      this.$emit('child-msg',数据);
      //子控件标签中绑定数据名与方法
      <bbb @child-msg="get"></bbb>
      //父组件中声明方法
      get(msg){
      this.msg=msg;
      }
  • slot:组件占位标签(槽口)
    <aaa>
    <ul slot="ul-slot">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    </ul>
    <ol slot="ol-slot">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    </ol>
    </aaa>
    <hr>
    <aaa>
    </aaa>
    <template id="aaa">
        <h1>xxxx</h1>
         //上面的“ol-slot”会出现在此处
        <slot name="ol-slot">这是默认的情况</slot>
        <p>welcome vue</p>
         //上面的“ul-slot”会出现在此处
        <slot name="ul-slot">这是默认的情况2</slot>
    </template>
  • node.js

https://nodejs.org/en/#download
安装后可以使用npm命令
版本号用@----例:
npm install vue-router@0.7.13

  • bower

Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍。
npm install -g bower
bower info vue //查看vue版本

  • vue-router:路由

SPA单网页应用
https://unpkg.com/vue-router@2.0.0/dist/vue-router.js
<a v-link="{path:'/home'}">主页</a>
<a v-link="{path:'/news'}">新闻</a>
//路由组件展示位置
<router-view></router-view>
//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');
    //6. 跳转
    router.redirect({
        '/':'/home'
    });

点击的v-line按钮会添加class="v-link-active"

  • 多级路由(路由的嵌套)
    <a v-link="{path:'/home/login'}">登录</a>
    
    <a v-link="{path:'/home/reg'}">注册</a>

//在'home'中
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}

    }
  • 路由的其他信息
    <a v-link="{path:'/news/detail/001?a=1&b=2'}">新闻001</a>
    
    <a v-link="{path:'/news/detail/002'}">新闻002</a>
  subRoutes:{
      //'/:id'为可变参数:::detail/002
        '/detail/:id':{
            component:Detail
        }
    }
  <template id="detail">
    //参数信息
    {{$route.params | json}}
       <br>
    //路由地址:::/news/detail/001?a=1&b=2
    {{$route.path}}
      <br>
    //数据:::a=1&b=2
    {{$route.query | json}}
    </template>
  • vue.loader:模块开发

类似css-loader、style-loader、url-loader、html-loader...
简单的目录结构:
|-index.html

  • main.js ||-入口文件
    import Vue from 'vue'
    
    import App from './App.vue'
    new Vue({
    el:'body',
      components:{
       app:App
      }
    });
|-App.vue   vue文件,官方推荐命名法
  • package.json ||-工程文件(项目依赖、名称、配置)
    npm init --yes 生成
    "scripts": {
    
        //工程
        "dev": "webpack-dev-server --inline --hot --port 8082"
    },
  • webpack.config.js ||-webpack配置文件(关键)
    module.exports={
    
      //入口文件
      entry:'./main.js',
      //出口文件
      output:{
          //当前路径
          path:__dirname,
          //打包结束的名字叫build.js
          filename:'build.js'
      },
      module:{
        loaders:[
        //以.vue结尾的文件用vue.loader
        {test:/\.vue$/, loader:'vue'},
        //除node_modules的.js之外全部检查转换
        {test:/\.js$/, loader:'babel', exclude:/node_modules/}
        ]
      },
      babel:{
        presets:['es2015'],
        //实时刷新插件            
        plugins:['transform-runtime']
      }
    };
  • webpack准备工作
  • 下载webpack以及webpack-dev-server(带服务器版本)
     npm install webpack webpack-dev-server --save-dev
    
  • 下载vue.loader

App.vue -> 变成正常代码
npm install vue-loader@8.5.4 --save-dev

  • 下载vue-html-loader

编译.vue中<template>
cnpm install vue-html-loader --save-dev

  • 下载css-loader以及vue-style-loader --save-dev
     npm install css-loader vue-style-loader
    
  • 下载vue-hot-reload-api@1.3.2
     npm install vue-hot-reload-api@1.3.2 --save-dev
    
  • 下载babel以及准备工作
  • babel必要插件(用来转译ES6语法)
    //依旧是npm install xxxxx(可以连写)
    babel-loader
    babel-core
  babel-plugin-transform-runtime
  babel-preset-es2015
  babel-runtime
  • 如何运行
    1. npm install
    
    2. npm run dev --- ('dev'为在package.json中配置的名称)
  • vue-cli:vue脚手架

简要:

帮你提供好基本项目结构

本身集成很多项目模板:
simple ->  不太常用
webpack :可以使用(大型项目)、Eslint 检查代码规范、单元测试
webpack-simple  推荐使用, 没有代码检查    √
browserify  ->  不太常用
browserify-simple  ->  不太常用
基本使用流程:
1.安装vue命令环境
    npm install vue-cli -g  安装 vue命令环境
      验证安装ok?
      vue --version
  2.生成项目模板 
    vue init <模板名> 本地文件夹名称
  3. 进入到生成目录里面
    cd xxx
    npm install
  4.运行:
    npm run dev

推荐阅读更多精彩内容