dVue.js是类似于angular.js的一套构建用户界面的渐进式框架，只关注视图层， 采用自底向上增量开发的设计。

Vue.js的代码需要放置在指定的HTML元素后面。

关于Vue的数据绑定：

例子：

     
        {
   {a}}    
     
new Vue({        el:"#app",              //使用选择器找到绑定数据的模块        data:{            a:"hello world"    //数据内容        }})

 

防止刷新看到花括号的方法：在父元素添加v-cloak  是一个样式，添加后在CSS里定义

[v-cloak]{Display:none;}{
   {msg}}    ->   v-text       {
    {
    {msg}}}    ->   v-html         // 转义HTML文本

 

关于Vue的双向数据绑定：使用v-model

例子：

     
        {
    {a}}  
      
     
new Vue({        el:"#app",                     data:{            a:"hello world"    //数据内容        }    })

 

如果不想页面上的数据随着输入值改变，可以加*   输入改变数据后，页面不会改变。数据只绑定一次   {

{a*}}      页面加载的时候进行数据绑定，后面数据更改页面不变化

HTML转意输出   {

{

{msg}}}   在js中定义的HTML语法，会直接在页面生成

例子;

     
        {
    {a*}}  
      
     

 

关于Vue的事件绑定：使用v-on

 

后面跟各种事件：v-on:click/mouseout/mouseover/dblclick/mousedown.....

可以简写为   @click=""

例子：v-on:click="函数"

 

 

事件对象:       $event    封装了的事件event  表示当前鼠标点击对象

@click="show($event)"

事件冒泡:

阻止冒泡:  在事件后面加上         .stop

ev.cancelBubble=true;   使用 $event 后定义在方法中   

@click.stop推荐         @click.stop=“方法” 原生写法

默认行为(默认事件):         在事件后面加上   .prevent

阻止默认行为:

ev.preventDefault();

@contextmenu.prevent推荐       

键盘事件:

@keydown  敲打键盘任意键触发（显示前） 后面可以直接.序号表示按某个键@keyup       敲打键盘任意键触发（显示后）

$event.keyCode   键盘触发事件对象，即该按键的序号在方法中传入事件对象

常用键:

回车

a). @keyup.13      //  13表示按键的键盘序号

b). @keyup.enter    推荐

上、下、左、右

@keyup/keydown.left

@keyup/keydown.right

@keyup/keydown.up

@keyup/keydown.down

.....

自定义键盘信息:

Vue.directive('on').keyCodes.ctrl=17;       //  ctrl 是按键名称

 //声明某个按键的序号，即可以在后面使用@keydown /@keyup .按键名调用

关于Vue的事件绑定：使用v-bind

v-bind:src=""  后面跟各种属性，如src/class/style.....

简写:       :src="url"     后面可以直接写data里的数据名称

Class后面带的可以是一个数组，也可以是一个对象，或者直接一个json文件

例子：

文字... 文字...文字...

 

关于Vue的列表输出：使用v-for

相当于angular的ng-repeat，不过不需要var

例子：

     
        
      
{
   {n.text}}
    
     

 

new Vue({    el:".app",    data:{        todos:[            {text:"第一个数据"},            {text:"第二个数据"},            {text:"第三个数据"},        ]    }})

 

$index :表示遍历的索引下标，默认从0开始

$key：表示遍历json数组时的key值

v-for="(k,v) in json"    这样的写法会在页面同时输出key值和value值

当数组数据有重复时，使用v-for会报错，需要添加track-by='$index/uid'

关于Vue的条件判断：使用v-if  v-else  控制元素显示或者隐藏

例子：

<div v-if="true">为true时显示</div>

<div v-else>否则这个显示</div>

v-show:类似于v-if  不过隐藏时也会占据页面空间

v-on: 绑定一个事件,后面跟随触发类型

例子：

Reverse Messagevar app5 = new Vue({  el: '#app-5',  methods: {    revr: function () {      this.message = this.message.split('').reverse().join('')   //使用Vue内部的变量，需要使用this    }  }})

 

 

关于Vue的过滤器：跟angular一样也是使用  数据|格式

vue提供过滤器 : capitalizeuppercasecurrency....

数组数据配合使用的过滤器:

limitBy：限制几个 即数组遍历显示的时候限制显示几个，后面带两个参数

limitBy 取几个  从哪个下标开始     如：limitBy 2 3

 

filterBy：过滤数据，将包含某个数据的内容显示

filterBy 包含的内容          如：filterBy a

 

orderBy：排序，将数组内容排序显示，后面两个参数   

1表示正序，-1表示倒序

   orderBy 按照什么排序 1/-1    如：  orderBy 'o'

例子：

{
    {data | uppercase}}     //转化为大写val in arr | limitBy 2   //只显示两个数据val in arr | filterBy a   //只显示包含数据a的内容val in arr | orderBy 'o'   //以o数据位置为标准进行排序显示

 

 

Vue.filter:自定义转化格式,，需要在js中使用Vue.filter定义，可以改变数据的格式、内容等

Vue.filter('name', function (value) {       //定义格式转化名称name，传入参数值value

    return value.split('').reverse().join('')   //重新定义数据内容并return 返回

})

时间过滤器：

Vue.filter('date',function(input){            var oDate=new Date(input);            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();        });

 

双向过滤器：使用在v-modul 绑定数据的过滤

Vue.filter('filterHtml',{            read:function(input){                          //model-view                    return input.replace(/<[^<]+>/g,'');            },            write:function(val){                       //view -> model                   return val;            }});

 

关于Vue的数据交互： 引入: vue-resource

引入vue-resource.js文件，使用this.$http

 

get方式:

获取一个普通文本数据：不需要传参数的时候

this.$http.get('aa.txt').then(function(res){    alert(res.data);},function(res){    alert(res.status);});

 

then（） :   里面跟两个方法，第一个为请求成功，第二个为失败

res：     传入方法内，表示请求返回的数据

res.data：表示请求返回的数据内容

 

给服务发送数据：需要传参数的时候  

 

this.$http.get(this.$root.api+'/Index/Staff/training',{params:{    //传递的参数必须为一个对象，使用params    subject_field_id:1,        //表示传参数过去，值为1    train_state:2}}).then(function(res){     console.log(res.data);},function(res){    alert(res.status);});

 

 

 

get():请求方式括号内带一个对象，对象内容为传过去的参数

post方式：在请求方式括号内增加一个对象   {   emulateJSON:true  }

this.$http.post('post.php',{    a:1,    b:20},{    emulateJSON:true}).then(function(res){    alert(res.data);},function(res){    alert(res.status);});

 

jsonp方式：跨域请求，请求地址为外域网站

https://sug.so.360.cn/suggest?callback=suggest_so&word=a

 

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{    wd:'a'      //传过去的参数},{    jsonp:'cb'    //更改callback名字，默认名字就是"callback"}).then(function(res){    alert(res.data.s);},function(res){    alert(res.status);});

 

第四种方式：默认是get提交

this.$http({url:地址data:给后台提交数据,method:'get'/post/jsonp    提交方式jsonp:'cb'       //cbName       如果是jsonp提交方式，声明名称});

 

关于Vue的生命周期：vue内部执行过程

new Vue({})声明了一个对象，也叫钩子函数

Vue内部会自己经历四个阶段：可以在后面跟方法

created：            当new Vue执行后，即实例已经创建时执行

beforeCompile：当开始编译HTML页面所有的Vue语法之前执行

compiled：        当编译HTML页面所有的Vue语法结束之后执行

ready：              当编译结束后把所有元素挂到Dom树，即插入到文档中后执行

Vue可以通过new声明创建，也可以进行销毁，使用$destroy

销毁后会经历两个阶段：

beforeDestroy: 销毁之前

destroyed:   销毁之后

例子：

var vm=new Vue({ });        document.onclick=function(){               vm.$destroy();      /*点击页面销毁vue对象*        };

 

关于Vue的计算属性：类似data数据

同样是一个数据，不过后面跟的是function的写法，放置逻辑代码，使用return返回值，没有使用return返回值，则该数据为空

一般情况下，只使用get返回的数据，无法在后期通过其他办法更改值

* computed里面可以放置一些业务逻辑代码，一定记得return

有两种写法：

computed:{b:function(){        //默认调用getreturn 值}}

 

完整写法：

computed:{                b:{                    get:function(){                               return this.a+2;                    },                    set:function(val){      //必须传入一个值                        this.a=val;                    }                }            }

 

监听数据变化 : vm.$watch   监听某个数据，发生改变时执行方法

vm.$watch(name,function);   //name表示监视的数据名称，后面带方法

vm.$watch(name,fnCb,{deep:true});  //深度监视 ，监视对象是数组

 

关于Vue的实例简单方法：

因为var vm=new Vue({})等于实例化一个对象，所以可以通过 . 访问它的各个值

vm.$el->  就是元素，可以直接获取el后面选择器的整个元素内容

vm.$data  ->  就是data，获取data里的所有数据，返回数组

vm.$destroy->   销毁对象

vm.$log();->  查看现在数据的状态，即在控制台输出所有数据

vm.$mount ->  手动挂在vue程序，当没有声明el:”控制器”时使用

例子：   

var vm=new Vue({            data:{                a:1,                b:2            }        }).$mount('#box');

 

vm.$options->   获取自定义属性，即定义的各个数据或方法写在外部

例子：

 

var vm=new Vue({            aa:11,                 //自定义属性,            show:function(){                alert(1);            },            data:{                a:1            }        }).$mount('#box');        vm.$options.show();        console.log(vm.$options.aa);

 

 

 

关于Vue的自定义指令：Vue.directive

类似v-text  v-for  v-html 都称为Vue的指令，即扩展的html语法

可以通过Vue.directive自定义这些指令

Vue.directive('red',function(a){            //red为自定义的指令的名称            this.el.style.backgrund='red';   //this.el指使用该指令的元素        });   内容         //指令名称为red，这里需要使用v-

 

 指令后面可以带参数，例如 v-text=“a”    

a相当于在自定义的function传入的参数  

       

自定义元素指令:（用处不大）  Vue.elementDirective

Vue.elementDirective('zns-red',{    //自定义HTML标签zns-red    bind:function(){        this.el.style.background='red';   //定义该标签作用    }});
     

 

关于Vue的动画：引入animate.css

最基本的动画：

//给需要添加动画的元素添加transition="名称"

例子：

     
  //在css样式里面进行定义

 

推荐使用的动画：引入animate.css

animate.css是一个css动画库，可以在百度上直接下载，在页面引入

//给需要添加动画的元素添加transition="名称"  class=”animated”

例子：

 

//在new Vue里面声明transitions对象并定义动画

new Vue({el:'#box',transitions:{           bounce:{         //动画的名称enterClass:'zoomInLeft',     //进入时使用的动画的class，参考animate.css书册leaveClass:'zoomOutRight'    //离开时使用的动画的class}}});

 

关于Vue的组件：Vue.extend    Vue.component

vue组件:其实就是一个大的对象，例如new Vue就是一个组件

1. 全局组件  Vue.component定义在外部为全局组件

两种书写方式：

*组件里面放数据 : data必须是函数的形式，函数必须返回一个对象(json)；事件不变

     
  
        
     
   //自定义的HTML标签

 

第二种书写方式：

Vue.component('my-aaa',{    //绑定template:'好'   //定义模版});var vm=new Vue({el:'#box'});

 

2. 局部组件      Vue.component定义在某个组件为局部组件

var Aaa=Vue.extend({                 //  赋值给变量Aaadata(){return {    //组件内部的数据以对象的形式，需要return返回msg:'ddddd'       //定义数据}}template:'
{
   {msg}}
'    //使用Vue.extend定义一个模版，});var vm=new Vue({el:'#box',components:｛       //在new Vue里面将aaa绑定到Aaa，为局部组件“aaa” : Aaa｝});

 

     第二种书写方式：

var vm=new Vue({el:'#box',components:{'my-aaa':{         //自定义的标签,
     data(){return {msg:'welcome vue'   }},methods:{change(){this.msg='changed';}},template:'
标题2->{
   {msg}}
'}     //定义模版}});

 

配合模版：定义的模版比较复杂时，可以在其他位置定义，

      然后在template绑定id

两种书写方式：

 

第一种.

 

第二种.

 

动态组件：可以通过js动态更改页面上的组件模版

 

组件的嵌套：组件里面可以嵌套另一个组件

var vm=new Vue({el:'#box', components:{     //父级组件'aaa':{template:'
我是aaa组件
     ',   //子级组件定义的标签在父级模版使用components:{    //子级组件'bbb':{  template:'
我是bbb组件
' }}}}});

 

组件之间的数据交互：

子组件获取父组件的数据：props

 :mmm.sync表示同步数据，即子组件数据改变，父组件数据也改变

                                                定到自定义的名称上

 

 

components:{       //这个为子组件'bbb':{props:['mmm'],         //使用props 自定义名称  mmmtemplate:'
我是bbb组件->{
   {mmm}}
' //使用自定义的名称}

 

父组件获取子组件的数据：vm.$emit(事件名,数据);  

需要子组件自己触发事件发射数据

 

methods:{   get(msg){ this.msg=msg;} //父组件的方法，接收子组件发射的数据methods:{         send(){  this.$emit('child-msg',this.a);  } //子级组件内的一个方法，使用$emit}                            // child-msg为事件名，this.a为子组件的数据

 

<slot></slot> ：  保留组件模版内原本的HTML文本

组件内部的HTML文本默认会被定义的模版内容覆盖，使用slot可以保留原本的HTML文本，当需要多个slot分别代表多个HTML文本时，可以设置slot值和name值一致

例子：

 

 

 

 

 

关于Vue的路由跳转：<router-view></router-view>

需要在页面引入vue-router文件，然后在自定义的js文件中配置路由

例子：

     
  
      
    
           
           
           
       
        Go to Foo
             
       
        Go to Bar
         
  
        
      
     

 

 

关于Vue使用了脚手架后自动创建环境的路由跳转：

Vue.js提供了自己的脚手架vue-cli，用于自动生成vue.js模板工程。即使用该脚手架会自动安装好webpack打包需要的所有模块等等。安装vue-cli之前，需要先安装了vue和webpack。

 

安装vue-cli步骤：在命令行输入以下指令

npm install -g vue-cli                       //全局安装vue-cli

vue init webpack projectName               //生成项目名为projectName的模板，这里的项目名可以自定义

cd projectName                              //打开模板

npm install                                  //初始化安装依赖

npm run dev                            //运行项目 可自动打开项目并实时更新

npm run build                       //执行发布打包  为代码编写完成后的最后步骤

 

代码编写：

初始化安装依赖后项目目录如下：

 

 

Index.html文件为总页面。需要从外部引入的css等文件在这里引入

打开src文件夹，

 

Components文件夹内的各个vue文件为各个单页面，各单页面在这个文件夹里面编写，样式和js代码全部写在一起。

 

//HTML代码编写在<template>标签的div内，必须使用一个div作为父容器

//js代码编写在<script>标签的export default 对象里面，data数据需要return到外部才可以使用，事件对象还是写在methods对象里面

//该页面的样式全部写在<style>标签里面

 

例子：

 

 

 

 

 

 

Router文件内有一个index.js文件，里面编写的是该项目的路由

使用import从外部引入各个单页面文件（vue文件），不需要加vue后缀

在routes对象数组内设置路由，每个路由为一个对象

 

例子：

import Vue from 'vue'import Router from 'vue-router'import Hello from 'components/Hello'import Foo from 'components/Foo'     //引入单页面文件import Bar from 'components/Bar'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'Hello',      component: Hello,    },{  path: '/foo',      name: 'Foo',      component: Foo },{                               //配置路由  path: '/bar',                    //路由的链接      name: 'Bar',                        component: Bar                  //路由的名称 }  ]})

 

 

App.vue文件为页面默认跳转页面。可以根据情况修改内容

 

关于如何在vue-cli里面配置默认路径的简写方式：

 在build文件夹中的webpack.base.conf.js中，alias里进行相关配置

resolve: {    extensions: ['.js', '.vue', '.json'],    alias: {      'vue$': 'vue/dist/vue.esm.js',      '@': resolve('src'),      'base': path.resolve(__dirname, '../src/sass/base/_base.scss')    }  },

 

 

 

 集成vue+ts 开发环境配置

1.完成vue-cli 下载后，安装TypeScript相关依赖和项目其余依赖

# npm install typescript ts-loader --save-dev# npm install

 

 

安装官方插件vue-class-component，vue-property-decorator

npm install vue-class-component，vue-property-decorator --save-dev

 

 

2.修改目录下bulid/webpack.base.conf.js文件，在文件内module>rules添加以下规则

{  test: /\.tsx?$/,  loader: 'ts-loader',  exclude: /node_modules/,  options: {    appendTsSuffixTo: [/\.vue$/],  }},

 

修改入口文件

entry: { app: './src/main.ts'}

 

resolve部分

extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

 

 

3.在src目录下新建一个文件vue-shims.d.ts，用于识别单文件vue内的ts代码

declare module "*.vue" {  import Vue from "vue";  export default Vue;}

 

 

4.在项目根目录下建立TypeScript配置文件tsconfig.json

{ "include": [ "src/**/*" ], "exclude": [ "node_modules" ], "compilerOptions": { "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "allowJs": true, "module": "es2015", "target": "es5", "moduleResolution": "node", "experimentalDecorators": true, "isolatedModules": true, "lib": [  "dom",  "es5",  "es2015.promise" ], "sourceMap": true, "pretty": true }}

 

 

5.重命名src下的main.js为main.ts， .vue文件的<script>改为 <script lang="ts">

 

 如何将vue文件中的css 和 js 分离

1. js中引入 Component 和vue文件

import { Watch, Component } from 'vue-property-decorator'

　import Template from './HelloWorld.vue'　　　　

 

 2.在 Component中声明引入的vue文件

@Component({  mixins: [Template],})

 

3 路由引入直接指定到目录即可

import HelloWorld from '@/components/Hello'