引言
测试基于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)