Vue.component 来定义全局组件
new Vue({ el: '#container '}) 在每个页面内指定一个容器元素
缺点：
*全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
*字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
*不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
*没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如Pug(formerly Jade) 和 Babel
html：
{{ message }}
</div>
js：var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="jie">
{{msg}}
{{num}}
{{obj}}
{{arr}}
</div>
<script>
new Vue({//vue实例
el:'#jie',//element
data:{
msg:'hello vue',
num:7,
obj:{name:'劫',age:'18'},
arr:[3,9,18]
}
})
</script>
</body>
</html>
[条件与循环]
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<script src="js/vue.js"></script>
<div id="jie">
<ul>
<table border=1 cellspacing="0">
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
</tr>
<tr v-for="(value,index) in arrs">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
</table>
</ul>
</div>
<script>
new Vue({
el:'#jie',
data:{
// arr:[1,2,3],
// obj:{name:'jie',age:'18'}
arrs:[
{num:1,name:'apple',price:3},
{num:2,name:'banana',price:5},
{num:3,name:'orange',price:4}
]
}
})
</script>
</body>
</html>
代码2
网友评论