vue电商实战笔记（第二章和第三章的内容）

1.vue需要掌握的大体知识：

 

2.vue实例的示意图：

3.以下是直接在vue-cli脚手架上直接改动的内容：

main.js文件：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },//这里是es6的写法，实现的是将App组件注册为根组件的子组件
  template: '<App/>'
})

App.vue文件中：

<template>
  <div>
    <!--例子1-->
    <!--{{hello}}-->
    <!--<p v-html="hello"></p>-->
    <!--<p v-text="hello"></p>-->

    <!--例子2-->
    <ul>
      <!--对于index % 2的解释，当index为奇数时，index % 2=1,结果返回true，所以有class='odd'属性，当index为偶数，则返回0，即false，就没有odd属性-->
      <!--下面是进行数组的渲染-->
      <li v-for="(item,index) in items" :class="{odd:index % 2}">{{item.name}}-{{item.price}}-{{index}}</li>
    </ul>
    <!--例子四，添加方法-->
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(value,key) in list">{{value}}-{{key}}</li>
    </ul>
    <!--例子3-->
    <!--等价于component-a的写法-->
    <componentA v-for="item in items"></componentA>
  </div>
</template>
<script>
  import Vue from 'vue'
//  例子3，将componentA引入
  import componentA from './components/a.vue'
  export default{
    components:{
      componentA//这是es6的写法
    },
    data(){
      return {
//        例子1
//        hello:'<span>你好</span>'

        //例子2
        items:[
          {
            name:'Apple',
            price:12
          },
          {
            name:'Banana',
            price:23
          }
        ],
        list:{
          test1:'test1',
          test2:'test2'
        }
      }
    },
    methods: {
//      addItem(){
      //例子四
//        this.items.push({//注意有些方法不会触发视图的更新
//          name:'pear',
//          price:30
//        })
//    }
//        在vue中直接赋值是不会更新视图的，强制更新视图可通过set方法
        addItem(){
          Vue.set(this.items,1,{name:'pear',price:30})//注意这里因为使用到vue，所以要先将vue引入
        }
    }
  }
</script>
<style>
  html{
    height:100%;
    background:red;
  }
</style>

router文件夹下的index.js：

import Vue from 'vue'//引入vue
import Router from 'vue-router'//引入vue-router
import App from '../App.vue'//引入App.vue

//使用Router
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',//这里为根组件
      name: 'App',
      component: App//注册组件
    }
  ]
})

component文件夹下的a.vue文件：

<template>
  <div>
    {{hello}}
  </div>
</template>
<script>
  export default{
    data(){
      return{
        hello:'I am componentA'
      }
    }
  }
</script>