个人Vue-1.0学习笔记

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

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

关于Vue的数据绑定：

例子：

<div id="app">  {{a}}    </div>

new Vue({

        el:"#app",              //使用选择器找到绑定数据的模块

        data:{

            a:"hello world"    //数据内容

        }

})

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

[v-cloak]{

Display:none;

}

<span>{{msg}}</span>    ->   v-text       

{{{msg}}}    ->   v-html         // 转义HTML文本     

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

例子：

<div id="app">

  {{a}}

  <input type="text" v-model="a"/>

</div>

new Vue({

        el:"#app",             

        data:{

            a:"hello world"    //数据内容

        }

    })

如果不想页面上的数据随着输入值改变，可以加*   输入改变数据后，页面不会改变。数据只绑定一次   {{a*}}      页面加载的时候进行数据绑定，后面数据更改页面不变化

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

例子;

<div id="app">

  {{a*}}

  <input type="text" v-model="a"/>

</div>

关于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文件

例子：

<strong :class="json">文字...</strong>

 <strong :class="[e,red]">文字...</strong>

<strong :class="{red:true,blue:false}">文字...</strong>

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

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

例子：

    <ul>

        <li v-for="n in todos">{{n.text}}</li>

    </ul>

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: 绑定一个事件,后面跟随触发类型

例子：

 <button v-on:click="revr">Reverse Message</button>

var 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

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

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(){        //默认调用get

return 值

}

}

完整写法：

       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指使用该指令的元素

        });

 <span v-red>  内容  </span>       //指令名称为red，这里需要使用v-

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

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

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

Vue.elementDirective('zns-red',{    //自定义HTML标签zns-red

    bind:function(){

        this.el.style.background='red';   //定义该标签作用

    }

});

<zns-red></zns-red>

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

最基本的动画：

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

例子：

<div id="div1" v-show="bSign" transition="fade"></div>  

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

<style>

.fade-transition{  transition : 1s all ease; }   //定义动画时间

.fade-enter{ opacity: 0;  }    //进入的动画

.fade-leave{ opacity: 0; transform: translateX(200px); }  //离开的动画

</style>

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

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

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

例子：

<div id="div1" class="animated" v-show="bSign" transition="bounce"></div> 

//在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)；事件不变

<div id="box">  <aaa></aaa>  </div>   //自定义的HTML标签

<script>

var Aaa=Vue.extend({                 //  赋值给变量Aaa

data(){

return {    //组件内部的数据以对象的形式，需要return返回

msg:'ddddd'       //定义数据

}

}

template:'<h3>{{msg}}</h3>'    //使用Vue.extend定义一个模版，

});                                    

Vue.component('aaa',Aaa);        //使用Vue.component将aaa绑定到Aaa

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

绑定后页面使用<aaa></aaa>相当于<h3>我是标题3</h3>

var vm=new Vue({

el:'#box',

data:{

bSign:true

}

});

</script>

第二种书写方式：

Vue.component('my-aaa',{    //绑定

template:'<strong>好</strong>'   //定义模版

});

var vm=new Vue({

el:'#box'

});

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

var Aaa=Vue.extend({                 //  赋值给变量Aaa

data(){

return {    //组件内部的数据以对象的形式，需要return返回

msg:'ddddd'       //定义数据

}

}

template:'<h3>{{msg}}</h3>'    //使用Vue.extend定义一个模版，

});

var vm=new Vue({

el:'#box',

components:｛       //在new Vue里面将aaa绑定到Aaa，为局部组件

“aaa” : Aaa

｝

});

第二种书写方式：

var vm=new Vue({

el:'#box',

components:{

'my-aaa':{         //自定义的标签,<my-aaa></my-aaa>

data(){

return {

msg:'welcome vue'   

}

},

methods:{

change(){

this.msg='changed';

}

},

template:'<h2 @click="change">标题2->{{msg}}</h2>'

}     //定义模版

}

});

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

然后在template绑定id

两种书写方式：

第一种.

<script type="x-template" id="aaa">

<h2 @click="change">标题2->{{msg}}</h2>

</script>

第二种.

 <template id="aaa">

<h1>标题1</h1>

<ul><li v-for="val in arr">{{val} }</li> </ul>

</template>

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

<component :is="组件名称"></component>

<component :is="a"></component>

<script>

var vm=new Vue({

el:'#box',

data:{

a:'aaa'

},

components:{

'aaa':{  template:'<h2>我是aaa组件</h2>'  },  //定义模版

'bbb':{   template:'<h2>我是bbb组件</h2>' }

}

});

</script>

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

var vm=new Vue({

el:'#box',

components:{     //父级组件

'aaa':{

template:'<h2>我是aaa组件</h2><bbb></bbb>',  

 //子级组件定义的标签在父级模版使用

components:{    //子级组件

'bbb':{  template:'<h3>我是bbb组件</h3>' }

}

}

}

});

组件之间的数据交互：

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

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

<template id="aaa">           //父组件的模版

<h1>11111</h1>      

<bbb :mmm="msg2"></bbb>  //子组件的内容，msg2为父组件的数据，绑

</template>                                           定到自定义的名称上

components:{       //这个为子组件

'bbb':{

props:['mmm'],         //使用props 自定义名称  mmm

template:'<h3>我是bbb组件->{{mmm}}</h3>' //使用自定义的名称

}

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

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

<template id="aaa">

<span>我是父级 -> {{msg}}</span>

<bbb @child-msg="get"></bbb>  //使用定义的事件名，触发父组件的方法

</template>

<template id="bbb">

<h3>子组件-</h3>

<input type="button" value="send" @click="send">  //触发事件发射数据

</template>

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值一致

例子：

<ul slot="ul-slot"></ul>    <slot name="ul-slot"></slot>

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

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

例子：

<div id="app">

  <p>

    <!-- 使用 router-link 组件来导航. -->

    <!-- 通过传入 `to` 属性指定链接. -->

    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

    <router-link to="/foo">Go to Foo</router-link>  

    <router-link to="/bar">Go to Bar</router-link>

  </p>

  <!-- 路由匹配到的组件将渲染在这里 -->

  <router-view></router-view>

</div>

<script>

const Foo = { template: '<div>foo</div>' }   // 定义（路由）组件并编写HTML内容

const Bar = { template: '<div>bar</div>' }  // 可以从其他文件 import 进来

// 2. 定义路由

const routes = [

  { path: '/foo', component: Foo },  //定义路由的名称，以及路由跳转的位置

  { path: '/bar', component: Bar }

]

// 3. 创建 router 实例，然后传 `routes` 配置

const router = new VueRouter({

  routes               // （缩写）相当于 routes: routes，后面也可以跟一个对象数组

})

// 4. 创建和挂载根实例。页面的data数据内容以及methods方法在这里面编写

const app = new Vue({

  router

}).$mount('#app')

</script>

关于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>标签里面

例子：

<template>

  <div id="app">                                

    <router-link to="/bar">Go to Bar</router-link>

    <router-link to="/">Go to main</router-link>

  </div>

</template>

<script>

export default {

  name: 'app',

  data () {

    return {

             todos:[

            {text:"sddfsdf"},

            {text:"dsf"},

            {text:"sdfsdf"},

        ],

   message:"IS my work"

    }

  },

methods:{

    revr: function () {

      this.message = this.message.split('').reverse().join('')   

    }

}

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

}

</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">

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import { Watch } from 'vue-property-decorator'
  @Component
  export default class Hello extends Vue {
    msg: string = 'this is a type'

  get productIdsString() {
    const arr = [1,2,3,4]
    return arr.join('_')
  }

  @Watch('msg')
    onSidChange() {
    this.tets()
  }

    tets() {
      alert('dsdsd')
    }

    cheng() {
      this.msg = '45654654654'
    }
  }
</script>

如何将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'