Vue-框架模板的源代码注释

// 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'                      　　 //调取vue.js文件(使用import命令加载的Vue构建版本)
import App from './App'                    　　 //引入App.vue文件
import router from './router'             　　  //引入路由文件？
import Xingorg1 from './components/Xingorg1'　　//引入自定义的Xingorg1的子组件，注意区分大小写。(他被注册为了全局组件，任何页面都可以像这样引入)
Vue.config.productionTip = false

// 注册全局组件
Vue.component('zujianName',Xingorg1);　　　　　　//第一个参数是自定义的、调用组件用的、标签的名字，第二个参数是组件文件的名字，注意大小写，不然找不到这个组件文件
　　　　　　　　　　　　　　　　　　　　　　　　　　// 注意全局组件的写法，component没有s，【你可以这么想，他是全局的只能有一个，所以不能加s ！！】

/* eslint-disable no-new */
/*实例化一个Vue对象 */
new Vue({  	　　　　　　//实例化对象
  el: '#app',	　　　　//当前vue要控制的容器元素（这里是index.html中的id为app的div）
  router,  	　　  　　　//配置路由？
  template: '<App/>',  //模板：对应的组件调用的标签
  components: { App }  //组件注册：components。App就是注册的文件，来源于App.vue
})

<!-- 第一部分： 模板 -->
<!-- <template>标签不会被渲染出来，就和小程序里边的block一样。所以用途上可以去包裹一些内容，或者放一些循环指令在外部，以避免循环指令放在html的标签上然后渲染出不必要的标签 -->
<!-- template里边，有且只能有一个根标签！ 也就是说和div#app有并列的标签时会报错-->
<template>
  <!-- 当前组件名字是什么，class的name就是什么(在App.vue中是id) -->
  <div id="app">
    <!-- 使用子组件第(3)步：调用一下引用进来并经过注册的helloworld组件 -->
    <HelloWorld></HelloWorld><!-- 调用了 HelloWorld子组件文件里自定义的组件标签 HelloWorld-->
    <zujianName>hh</zujianName><!-- 调用了 zujianName 子组件文件里自定义的组件标签 zujianName-->
  </div>
</template>

<!-- 第二部分： 行为 、处理逻辑-->
<script>
// 使用子组件第(1)步：引入 components文件夹下的helloworld.vue 组件:
import HelloWorld from './components/HelloWorld'
// 可以把组件理解为一个功能的页面，可以是小功能，可以是大功能。开发中一个项目会分为多个组件
export default {
  name: 'app',//name与组件名字一致
  components: {//注册局部组件。局部注册组件这里，可能会定义多个组件，所以component这个单词加上“s”
    HelloWorld//使用子组件第(2)步：注册，因为引进来了这个组件，所以在这里必须需要注册这个组件
  }
}
</script>

<!-- 第三部分： 解决样式 -->
<!-- 样式的写法 和css中一样-->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <div class="helloworld">
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'helloworld',
  data () {//自己写的组件，data这里是一个方法，return出来的一定是一个对象
    return {
      msg: "Hello Xing.org1^!"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 翻译：加上"scoped"属性，可以仅将本页面的CSS限制为该组件（私有作用域的概念） -->
<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>

<template>
<!-- 组件 -->
  <div class="xingorg1">
   <ul>
     <li v-for="user in users">
       {{user}}
     </li>
   </ul>
  </div>
</template>

<script>
export default {
  name: 'xingorg1',
  data () {
    return {
     users: ["x","i","n","g","o","r","g","1"]
    }
  }
}
</script>

<style scoped>
/*本组件专用样式*/
  li{
    padding: 5px;
    text-align: left;
    font-size: 18px;
    list-style-type: none;
  }
  li:nth-child(even){
    background: #dedede;
  }
</style>