vue全家桶与vue-router 知识点01

vue

vue全家桶

vue框架
请求数据：vue-resource ,替代我们的jquery，或者原生ajax封装
单页面路由： vue-router ,替代我们原生的路由
懒加载： vue-load-lazy ，优化页面图片加载
通讯机制： vuex，解决vue原生组件件通讯成本高的问题

脚手架安装vue2.0

安装教授vue-cli
安装：npm install -g vue-cli
vue init webpack 项目名
eg: vue init webpack vue-tuan

脚手架安装项目过程

PS D:\bwclass\1506webB\examples\vue1023> vue init webpack vue-tuan
? Project name vue-tuan
? Project description 组件化开发我们之前的团购
? Author daxiang
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
   vue-cli · Generated "vue-tuan".
   To get started:
     cd vue-tuan
     npm install
     npm run dev
   Documentation can be found at https://vuejs-templates.github.io/webpack

vue-router 路由使用

分三步：第一步引入路由

import Router from 'vue-router'

第二步：启用用来

Vue.use(Router)

第三步：创建路由配置

new Router({
    routes: [//代表多个组件
        {//代表映射一个组件
            path:'',//组件路径
            component: List //注意组件大写
        }
    ]
})

组件化开发，使用组件分几步

大概三步
第一步： 定义组件 .vue文件

<template>
  <section>
      home
  </section>
</template>
<script>
export default {
}
</script>
<style>
</style>

第二步： 引入组件

import Home from '@/components/Home'

第三步：使用组件

export default new Router({
  routes: [
    {
      path: '/home',
      component: Home
    }
  ]
})

注意：使用组件作为路由配置，也可以直接使用

组件化开发，组件结构是什么样

简化版的组件

<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

详细版的组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
     <li>内容</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '1506'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

yinxiang_4314245_1508981654147