《大数据和人工智能交流》头条号向广大初学者新增C 、Java 、Python 、Scala、javascript 等目前流行的计算机、大数据编程语言，希望大家以后关注本头条号更多的内容。
一、vue.js入门案例
示例-1：向页面输出大名鼎鼎的“hello world”：
<style>
#s001{
width:100px;
height:100px;
border:5px #3F6 solid;
}
</style>
<script src="js/vue-2.5.17.js"></script>
<div id="s001">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#s001',
data: {
message: 'Hello World'
}
})
</script>
示例-2：vue.js的对象的应用
自己生命一个商品goods，属性有商品编号，商品名称；定义个方法为showPrice用于展现商品价格，如下图所示：
<script src="js/vue-2.5.17.js"></script>
<style>
table{
width:350px;
border:1px #ccc solid;
}
td{
border:1px #999 solid;
text-align:center;
}
p{
color:red;
}
</style>
<table id = "t001">
<tr style="background:#ccc">
<td>商品编号</td>
<td>商品名称</td>
<td>商品价格</td>
</tr>
<tr>
<td>{{goods_id}}</td>
<td>{{goods_name}}</td>
<td>{{ShowPrice()}}</td>
</tr>
</table>
<script type="text/javascript">
var vm = new Vue({
el: '#t001',
data: {
goods_id: "g001",
goods_name: "大数据概论",
goods_price: "100元"
},
methods: {
ShowPrice: function() {
return this.goods_price ;
}
}
})
</script>
二、vue.js模板案例
向两个div域中分别写入文本属性和html属性，如下：
<style>
#s001{
width:100px;
height:100px;
border:5px #3F6 solid;
}
#s002{
width:100px;
height:100px;
border:5px red solid;
}
</style>
<script src="js/vue-2.5.17.js"></script>
<div id="s001">
<p style='text-align:center'>{{ text_value }}</p>
</div>
<div id="s002">
<p style='text-align:center' v-html="html_value"></p>
</div>
<script>
new Vue({
el: '#s001',
data: {
text_value: "text"
}
})
new Vue({
el: '#s002',
data: {
html_value: "<h2>html</h2>"
}
})
</script>
三、vue.js的流程控制
案例1：选择结构练习
有如下商品表数据：
要求：如果商品编号为goods001，则显示价格为100元，如果商品编号为goods002，则显示价格为200元，如果商品编号为goods003，则显示价格为300元，否则显示“没有标价”，如下所示：
