vue学习笔记1搭建cnpminstall-gvue-clivueinitwebpackmy-democdmy-demo

搭建

cnpm install -g vue-cli
vue init webpack my-demo
cd my-demo
npm start或者npm run dev

组件

全局组件创建

...
<script src="vue.js"></script>
<script>
    <!--var c = Vue.extend({-->
    <!--    template: '<h1>hello world</h1>'-->
    <!--})-->
    <!--Vue.component('Hello', c);-->
    <!-- 简写 -->
    Vue.component('Hello', {
        template: '<h1>hello world</h1>'
    })
    window.onload = function () {
        new Vue({
            el: '#app',
            data: {},
            component: { // 局部组件
                'my-btn': {
                    template: '<button>btn</button>'
                },
                'my-ul': {
                    template: '<button>btn</button>',
                    data(){
                        return {
                            lists: ['a1','a2','a3','a3']
                        }
                    }
                }
            }
        })
    }
</script>
<body>
    <template id="myUl">
        <ul>
            <li v-for="(items, i) in lists" :key="i">{{items}}</li>
        </ul>
    </template>
    <div id="app">
        <Hello></Hello>
        <my-btn></my-btn>
    </div>
</body>
...

路由

所谓‘路由’。是指把数据从一个地方传送到另一个地方的行为和动作。

1、定义

var Home = {
    template: '<h1>Home</h1>'
}
var News = {
    template: '<h1>News</h1>'
}
var User = {
    template: '<h1>User</h1>'
}

2、配置

var routes = {
    {path:'/home',component: Home},
    {path:'/news',component: News},
    {path:'/user',component: User}
}

3、创建router实例

var router = new VueRouter({
    routes
})

4、挂载、注入路由

window.onload = function () {
        new Vue({
            el: '#app',
            router,
            data: {},
        })
    }