0332afac3bf2d60d72fe69db0cc263274290dd686145b-Xeebvn.jpeg

• 基本格式

以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