vue学习笔记1

·  阅读 72

搭建

  • 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: {},
        })
    }
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改