vue概览

1.vue的生命周期

beforeCreate:组件刚刚被创建

created:组件创建完成

beforeMount:挂载之前

mounted:挂载之后

beforeDestory:组件销毁前使用

destoryed:组件销毁后调用

2.安装

安装node->安装npm->安装vue->安装git

#全局安装vue-cli

npm install --global vue-cli

#创建一个基于webpack模板的新项目

vue init webpack my-project

#安装依赖包

cd my-project

npm install

npm run dev

3.选项数据

data

computed

methods

4.模板语法

data

模板中直接嵌入js代码

指令 v-html,v-on,v-bind等

计算属性

过滤器

5.计算属性

在模板中放入太多的逻辑会让模板过重且难以维护

计算属性下所有函数可以放到computed中

6.class与style绑定

v-bind指令:动态的绑定一个或多个特性;缩写':'   缩写写法   :class

class绑定

绑定1:{active:isActive,'text-danger':hasError}

绑定2:classObject

绑定3:[activeClass,errorClass]

style绑定

绑定1:{color:activeColor,fontSize:'16ps'}

绑定2:styleObject

绑定3:[baseStyles,overridingStyles]

7.条件渲染

v-if

v-if v-else

v-if v-else-if v-else

8.列表渲染

v-for指令

用法1: v-for="items in items"数组

用法2: v-for="(item,index) in items"数组

用法3:v-for="(valuse,key) in object"对象

9.事件处理器

v-on指令,缩写@

v-on:click @click

10.表单控件绑定

v-model指令在表单控件元素上创建双向数据绑定

复选框

多个勾选框

选择列表

11. 自定义组件

组件写到components文件夹下

自定义一个倒计时组件

组件基本要素:props,$emit等

12. vue中DOM操作

this.$refs

13.过渡效果

过渡transition

通过样式方式写过渡

14. 路由vue-router

npm install引入vue-router

页面跳转功能

用法1:<router-link to="demo1">demo1</router-link>

用法2: to="{name:'demo9',params:{userId:123}}"

用法3:this.$router.push({path:'/demo1'})

用法4:this.$router.push({name:'demo1',params:{userId:123}})

15.状态管理vuex

npm install引入vuex包

全局状态管理,所有页面共享数据

设置数据:this.$store.dispatch('increment',100000);

获取数据:this.$store.state.num

 

vuex是外部插件,先安装    npm install vuex --save

在main.js中引入store    import store from './store/'

在src目录下创建store文件夹

在store下新建index.js 文件

在index.js中引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

export default new Vuex.Store({
    // 要共享的数据
    state:{
        count:0,
        number:1
    },
    mutations: {
        increment(state,num){
            state.count++;
            state.num=num;
        }
    },
    actions: {
        // 调用mutations的方法
        inc({commit},obj){
            commit('increment',obj);
        }
    }
})

应用

<template>
    <div>
        <div>状态管理vuex</div>
        <div>------------------------</div>
        <div>{{msg}}</div>
        <button @click="change">change</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'123'
        }
    },
    methods:{
        change(){
            // vuex取数据
            // this.msg=this.$store.state.count;
            // 修改公共数据
            //调用action中的函数->执行mutations中的函数
            this.$store.dispatch('inc',100000);
            this.msg=this.$store.state.num;
        }
    }
}
</script>

<style>

</style>

16. slot插槽

常用于组件调用中

17.vue-resource请求

npm install引入vue-resource

this.$http.get('./someURL')

this.$http.post('./someURL',{foo:'bar'})

<template>
    <div>
        <div>vue-resource请求</div>
        <div>--------------------------------</div>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    mounted(){
        this.$http.get('/someUrl').then(response =>{
            //get body data
            console.log(response.body);
        },response =>{
            //error callback
        });

        this.$http.post('someUrl',{foo:'bar'}).then(response =>{
            console.log(response.body);
        },response =>{
            //error callback
        });

        this.$http.get('./someUrl',{params:{foo:'bar'},headers:{
            'X-Custom':'...'
        }}).then(response =>{
            //success callback
        },response =>{
            //error callback
        });

    }
}
</script>

<style>

</style>

18.移动组件库Mint UI

官网:http://mint-ui.github.io/#!/zh-cn