vue2.0之初體驗

環境安裝

按官網（https://cn.vuejs.org/v2/guide...）一步步來，先安裝vue腳手架：

npm install -g vue-cli

命令行敲vue查看是否安裝成功

建立項目

vue init webpack-simple demo

接下來是一些初始化的設置，能夠選默認enter下去

cd demo
npm install
npm run dev

接下來你會看到這麼個頁面：

工程目錄以下：

打開項目工程，template 寫 html，script寫 js，style寫樣式

組件使用

如上工程目錄，title-bar.vue是共用的頂部欄，咱們在views文件裏的list.vue中引用：

<template>
    <div class="list">
        <title-bar></title-bar>
    </div>
</template>
<script>
export default {
    components: {
        'title-bar': require('./../components/title-bar.vue')
    }
}
</script>

組件通訊

1. 父組件向子組件通訊

在list.vue中的代碼以下：

<title-bar :titleBar="msg"></title-bar>
<script>
export default {
    data(){
        return {
            msg: '這個父組件向子組件傳的消息'
        }
    }
}
</script>

在title-bar.vue子組件中用props接收消息

props: ['titleBar']

2. 子組件向父組件通訊

在子組件的js裏的代碼是這樣的：

this.$emit('fromChildMsg', '這是子組件傳遞的消息');

在父組件接收的代碼以下：

<title-bar @fromChildMsg="listenChildMsg"></title-bar>

<script>
export default {
    methods: {
        listenChildMsg(msg){
            console.log(msg);
        }
    }
}
</script>

配置路由

npm install vue-router --save

而後在main.js里加以下代碼：

import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter);

const app = new Vue({
  router: new VueRouter(router),
  render: h => h(App)
}).$mount('#app')

在main.js同級目錄下建立個router.js，在這在加入路由配置信息：

export default {
    mode: 'history',
    base: __dirname,
    routes: [
        {
            path: '/',
            redirect: '/home'    //重定向
        },
        {
            path: '/home',
            component: require('./views/home.vue')
        },
        {
            path: '/list',
            component: require('./views/list.vue')
        },
        {
            path: '/details/:id',    //動態配置
            name: 'details',
            component: require('./views/details.vue')
        }
    ]
}

App.vue修改爲這樣：

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

連接是這樣寫的

<router-link to="/list">click to enter list page</router-link>

請求數據

npm install vue-resource --save

在main.js中引用並註冊

import VueResource from 'vue-resource'
Vue.use(VueResource);

在list.vue html中加入列表：

<ul>
    <li v-for="article in articles">
        {{article.title}}
    </li>
</ul>

在 data 裏面加入數組 articles 並賦值爲[]，而後在 data 後面加入加入鉤子函數 mounted

mounted(){
    this.$http.jsonp('https://api.douban.com/v2/movie/in_theaters?count=20').then(res => {
        this.articles= res.data.subjects;
    });
}

ps:
https://api.douban.com/v2/mov... 這是豆瓣公開的正在熱映電影接口

代碼分享

下面是github的源碼分享：
https://github.com/chenhaiwei...
demo效果如圖

歡迎拍磚！！！