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阻止事件冒泡，防止向上继续运行

 

 

选择项

 

 

页面代码

组件代码 命名要一致

可以使用重命名的格式

改变组件颜色

其中prop是在组件的文件中

组件中

代表接受了页面中参数

其中ending为自定义函数  methods方法中定义

 

 

路由

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'