Vue學習(6)————————例項物件，元件概念，元件的引用（其他vue檔案的引用）
阿新 • • 發佈：2018-11-24
下面操作是在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>