Vue学习之路(1)-创建对象和组件

引言

测试基于vue初始化的脚手架,不加router等其他的,使用index.html,编辑的入口main.js,结合控制台和页面观察输出结果,学习选项的使用

定义组件

var 组件名={
    组件配置
} 

var HelloWorld={
  template:'<div>Hello World</div>',
  data: function () {
    return {
      msg:'Hello World'
  }
}

通过.vue文件定义组件
<template>

</template>

<script>
    export default {
        name: "test"
    }
</script>

<style scoped>

</style>


<template>
    <div class="app">{{msg}}}</div>
</template>

<script>
    export default {
        name: "HelloWorld",
        data:function () {
          return {
            msg:'Hello World'
          }
        }
    }
</script>

<style scoped>
    .app{
      font-size: large;
      color: red;
    }
</style>

新建Vue对象

new Vue(Component)
说明: Component 组件


import Vue from 'vue'

// 直接创建一个Vue实例
var vm = new Vue({
    //组件配置
    //此次填入组件相应的key-value参数
    //没有一个参数是必须的均为可选
})

//相应参数均可在对象之后用加$和_前缀访问到

import Vue from 'vue'
import HelloWorld from './components/HelloWorld'
var vm = new Vue(HelloWorld)