Vue基础知识_结构和组件
vue结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({
el:"#app", //接管区域
data:{}, //数据仓库
methods:{} //方法仓库
});
</script>
</body>
</html>
如上是一个vue基本的结构。
- 需要引入vue.js;
- 创建vue对象;
- 使用el声明对象接管的区域，此处是 id=app的div;
vue组件
<div id="app">
<my-com></my-com>
</div>
<script>
Vue.component('my-com',{
template:`<div>{{n}}</div>`,
data(){
return {
n:1
}
},
methods:{
}
});
var vm = new Vue({
el:"#app",
data:{},
methods:{}
});
</script>
生成组件需要使用Vue.component，其中template中元素需要包裹在一个唯一的父元素中。
data这里因为是组件，所以要复用，那么就使用方法data()返回数据对象。
这种生成的组件是全局组件，直接在页面使用即可。
组件名使用 “-” 区别，避免使用驼峰，vue不识别大小写。
子组件
var myListItem = { //子组件
template:`<li>{{todo}}</li>`,
data(){
return {
todo:'吃饭'
}
},
methods:{
}
};
var myList = { //子组件中使用上面的子组件
template:`<ul>
<my-list-item></my-list-item>
<my-list-item></my-list-item>
</ul>`,
data(){
return {
}
},
components:{
myListItem
}
};
Vue.component('my-com',{ //使用子组件
template:`<div>
<my-list></my-list>
</div>`,
data(){
return {
}
},
methods:{
},
components:{
myList
}
});
子组件可以使用 var 声明变量，此处使用var声明的组件，就是一个局部子组件。
局部子组件就不能在页面直接使用，只能被页面可使用的组件引用。
子组件里面可以引用其他子组件。
如果是var 声明变量的子组件，那么需要注意顺序。
引用组件需要使用components声明。
