zoukankan      html  css  js  c++  java
  • vue.js入门操作

    1.vue框架是经典的MVVM模式, .vue文件是模板文件
    模板文件又分为3个部分
    一 <template></template>(html部分)
    二 <script>
    export default {
    }(这段代码相当与 new Vue({}) )
    </script>(js部分)
    三 <style scoped></style>(css部分,scoped代表css样式只对当前vue文件的template生效)

    2.router/index.js 是vue的路由文件
    import Vue from 'vue' //引入主角vue
    import Router from 'vue-router'//引入路由
    import HelloWorld from '@/components/HelloWorld' //引入组件模板
    export default new Router({
    routes: [
    {
      path: '/', //路由路径
      name: 'HelloWorld', //名称
      component: HelloWorld //模板名称
    }
    ]
    })

    /about

    完成的文件

    路由

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import About from '@/components/About'

    Vue.use(Router)

    export default new Router({
    routes: [
    {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
    },
    {
    path: '/about',
    name: 'About',
    component: About
    }
    ]
    })

    About.vue

    <template>
    <div class="about">
    <li>{{msg}}</li>
    </div>
    </template>
    <script>
    export default{
    name: 'About',
    data() {
    return {
    msg: 'hello world123'
    }
    }
    }
    </script>
    <style scoped>
    <style>

  • 相关阅读:
    JS中null与undefined的区别
    <div> <p> <span>的用法和区别
    <img>的title和Alt有什么区别?
    null undefined NaN
    JavaScript中判断为整数的多种方式
    将博客搬至CSDN
    flex
    webpack插件url-loader使用规范
    Cordova 项目 加载不出XML文件
    pandas读取xlsx
  • 原文地址:https://www.cnblogs.com/jasonxiaoqinde/p/8528199.html
Copyright © 2011-2022 走看看