下面操作是在main.js中操作
var sola = new Vue({
//装载到什么样的位置，这里先放入body
el: 'body',
//暂时不明
template: '<div>{{ solaname }}</div>',
data:{
solaname: 'sola';
}
})
————————————————————————————————————————————————————————
简单用实例引用写出一个helloworld
main.js
//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue'
//实例化一个组件
new Vue({
//设置一个名字 然后在前端页面div 指定id来引用
el: '#app',
template: '<p>hello world</p>'
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vuedemo02</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
main.js进阶一下
//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue'
//实例化一个组件
new Vue({
//设置一个名字 然后在前端页面div 指定id来引用
el: '#app',
template: '<p>{{ msg }}</p>' ,
data:{
msg : 'hello world',
}
})
————————————————————————————————————————————————————————
这个先这么写，还会改造
//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue'
//这样就直接建立个一个组件
Vue.component('my-header' , {
template:'<p>测试</p>',
})
new Vue({
el:'#app',
})一个三节点的结构，总的vue包含一个header，header里还包含着一个header-child
//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue'
var myHeaderChild = {
template:'<p>this is a header-child</p>'
}
var myHeader = {
template:'<p><my-header-child></my-header-child>this is a header</p>',
components:{
'my-header-child': myHeaderChild,
}
}
new Vue({
el:'#app',
/*template:'<p>hello world,{{word}}</p>',*/
data:function(){
return{
word:'hello world',
}
},
components:{
'my-header': myHeader,
}
})————————————————————————————————————————————————————————
首先建立一个A.vue,内容
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default{
data(){
return{
msg:'我是componentA'
}
}
}
</script>
<style lang="scss">
</style>然后再在app.vue中引用A组件
<template>
<div id="app">
{{hello}}
<componentA></componentA>
</div>
</template>
<script>
import componentA from './components/a.vue'
export default{
components:{componentA},
data(){
return{
hello:'world'
}
}
}
</script>
<style lang="scss">
</style>遍历组件，可以把遍历到的值传给引用的组件
<template>
<div id="app">
<p v-for="(item,key) in list">
{{item}}----{{key}}
</p>
<componentA v-for="(item,key) in list" key='key'></componentA>
</div>
</template>
<script>
import componentA from './components/a.vue'
export default{
components:{componentA},
data(){
return{
hello:'world',
list:{
name:'sola',
age:'99',
money:'5块'
}
}
}
}
</script>
<style lang="scss">
</style>