2.Vue第二章
2017-10-09 本文已影响6人
西瓜炒苦瓜
1.vue创建对象
1.png
2.Vue的组件图
2.png
3.Vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuedemo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
el: "#app",
template: "<p>aaaaa {{ word }}</p>",
data: {
word: "222"
}
})
</script>
</body>
</html>
4.第一种vue组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuedemo</title>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
Vue.component('my-header',{
template: "<p>aaaaa</p>"
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
4.第二种vue组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuedemo</title>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
var myHeaderChild = {
template: '<p>I am myHeaderChild</p>'
}
var myHeader = {
template: '<p><my-header-child></my-header-child>this is my header</p>',
components: {
'my-header-child': myHeaderChild
}
}
new Vue({
el: "#app",
components: {
'my-header': myHeader
}
})
</script>
</body>
</html>
5.vue基本概念
3.png
