Vue入門

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install --global vue-cli

vue init webpack my-project

cd my-project 

cnpm install

npm run dev

 

data  中return 的都是用到的定義的數據

過濾器

filters:{

}

 

輸出字符倒序

msg.split(' ').reverse().join(' ')

 

OK 可以展示

 

 

列表渲染

 

返回數組下標

 

事件冒泡，觸發兩次，stop阻止事件冒泡，防止向上繼續運行

 

 

選擇項

 

 

頁面代碼

<template>
    <div>
        <div>倒計時組件</div>
        <countdown></countdown>
        <div>倒計時</div>
    </div>
</template>
<script>
    import countdown from '@/components/countdown.vue'

    export default{
        data(){
            return{
                msg: '存儲數據',
                num: 1
            }
        },
        components:{
            countdown
        }
    }
</script>

組件代碼 命名要一致

<!-- 倒計時組件 -->
<template>
    <div>
        <p>{{time}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                time: 10
            }
        },
        mounted(){
            var vm= this;
            var t = setInterval(function(){
                vm.time--;
                if(vm.time ==0){
                    clearInterval(t);
                    vm.$emit('end');
                }
            },1000)
        }

    }
</script>

可以使用重命名的格式

改變組件顏色

其中prop是在組件的文件中

組件中

代表接受了頁面中參數

其中ending爲自定義函數  methods方法中定義

 

 

<template>
    <div>
        <div>過度效果</div>
        <div>--------------------</div>
        <div id="demo">
            <button v-on:click="show = !show">
                toggle
            </button>
            <!-- 標籤用來過渡 -->
            <transition name="fade">
                <p v-if="show">hello!!!!!!!!!</p>
            </transition>
        </div>
    </div>
</template>
<script>
    export default{
        date(){
            return{
                show: true
            }
        }
    }

</script>
<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }
    .fade-enter, .fade-leave-to
    {
        opacity: 0
    }
    .fade-enter-to {
        opacity: 1;
    }
</style>

路由

npm install vue-router

 

跳轉後傳參數

 

 

 

 

 

共享數據池

首先在工程頁面下安裝

cnpm install vuex --save

main.js中  import store from './store/'

然後src中創建 store文件夾

並創建你的index.js

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

export default new Vuex.Store({
    state: {
        count:0,
        num:1
    },
    mutations:{
        increment(state,num){
            state++
            state.num = num;
        }
    },
    actions:{
        inc ({commit},obj){
            commit('increment',obj)
        }
    }

})

slot插槽

 

npm  install vue-resource --save

main.js加入

import VueResource from 'vueresource'
Vue.use(VueResource);

 

 

cnpm install  --save  mint-ui

main.js

import    MintUi  from 'mint-ui'

Vue.use(MintUi)

import 'mint-ui/lib/style.css'

 

 

使用如下

import {Toast} from 'mint-ui'