Vue入门

Vue入门_第1张图片

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

 

Vue入门_第2张图片

Vue入门_第3张图片

data  中return 的都是用到的定义的数据

Vue入门_第4张图片

Vue入门_第5张图片

过滤器

filters:{

}

Vue入门_第6张图片

 

输出字符倒序

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

Vue入门_第7张图片

 

Vue入门_第8张图片

Vue入门_第9张图片

Vue入门_第10张图片

Vue入门_第11张图片

Vue入门_第12张图片

Vue入门_第13张图片

Vue入门_第14张图片

Vue入门_第15张图片

Vue入门_第16张图片

Vue入门_第17张图片

Vue入门_第18张图片

OK 可以展示

 

Vue入门_第19张图片

 

列表渲染

Vue入门_第20张图片

Vue入门_第21张图片

Vue入门_第22张图片

 

Vue入门_第23张图片

返回数组下标

Vue入门_第24张图片

Vue入门_第25张图片

Vue入门_第26张图片

Vue入门_第27张图片

Vue入门_第28张图片

Vue入门_第29张图片

 

Vue入门_第30张图片

事件冒泡,触发两次,stop阻止事件冒泡,防止向上继续运行

Vue入门_第31张图片

 

Vue入门_第32张图片

Vue入门_第33张图片

Vue入门_第34张图片

 

选择项

Vue入门_第35张图片

Vue入门_第36张图片

 

Vue入门_第37张图片

 

页面代码


组件代码 命名要一致



可以使用重命名的格式

改变组件颜色

Vue入门_第38张图片

其中prop是在组件的文件中

组件中

代表接受了页面中参数

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

Vue入门_第39张图片

 

Vue入门_第40张图片

Vue入门_第41张图片

 



路由

npm install vue-router

Vue入门_第42张图片

 

跳转后传参数

Vue入门_第43张图片

 

Vue入门_第44张图片

 

Vue入门_第45张图片

 

 

 

共享数据池

首先在工程页面下安装

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插槽

 

Vue入门_第46张图片

npm  install vue-resource --save

main.js加入

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

Vue入门_第47张图片

Vue入门_第48张图片

Vue入门_第49张图片

 

 

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'

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(前端入门)