android应用案例开发大全_vue.js入门及经典应用案例总结（前端开发必看）
《大數據和人工智能交流》頭條號向廣大初學者新增C 、Java 、Python 、Scala、javascript 等目前流行的計算機、大數據編程語言，希望大家以后關注本頭條號更多的內容。
一、vue.js入門案例
示例-1：向頁面輸出大名鼎鼎的“hello world”：
#s001{
width:100px;
height:100px;
border:5px #3F6 solid;
}
{{ message }}
示例-2：vue.js的對象的應用
自己生命一個商品goods，屬性有商品編號，商品名稱；定義個方法為showPrice用于展現商品價格，如下圖所示：
table{
width:350px;
border:1px #ccc solid;
}
td{
border:1px #999 solid;
text-align:center;
}
p{
color:red;
}
| 商品編號 | 商品名稱 | 商品價格 |
| {{goods_id}} | {{goods_name}} | {{ShowPrice()}} |
二、vue.js模板案例
向兩個div域中分別寫入文本屬性和html屬性，如下：
#s001{
width:100px;
height:100px;
border:5px #3F6 solid;
}
#s002{
width:100px;
height:100px;
border:5px red solid;
}
{{ text_value }}
三、vue.js的流程控制
案例1：選擇結構練習
有如下商品表數據：
要求：如果商品編號為goods001，則顯示價格為100元，如果商品編號為goods002，則顯示價格為200元，如果商品編號為goods003，則顯示價格為300元，否則顯示“沒有標價”，如下所示：
table{
border:1px #999 solid;
width:350;
text-align:center;
}
td{
border:1px #999 solid;
}
.c01{
background:#ccc;
}
| 商品編號 | 商品名稱 | 商品價格 | |||
| goods002 | vue.js | 100元 | 200元 | 300元 | 沒有標價 |
案例2：循環結構
在一個無序標簽里面，循環輸出3本書的書名：
{{ goods.goodsName }}
案例3：將對象中的數據循環輸出到無序標簽
{{ v }}
四、vue.js的樣式處理
如下列圖片所示，使用v-bind:class屬性實現點擊《加邊框》按鈕，給圖片加一個藍色的邊框：
.c001 {
width: 300px;
height: 220px;
background: green;
border:5px blue solid;
}
img{
width: 300px;
height: 220px;
}
五、vue.js的事件處理
使用vue.js事件綁定實現將一段文字改變顏色，如下所示：
.c_red{
color:red;
}
.c_blue{
color:blue;
}
大漠孤煙直
變紅
變藍
六、vue.js表單處理
使用vue.js對復選框進行數據綁定，自動計算商品總價格，如下圖所示：
商品列表：
《大數據導論》￥100元
《機器學習導論》￥200元
《智能傳感器》￥300元
總價格為：{{calculatePrice()}}元
《大數據和人工智能交流》的宗旨
1、將大數據和人工智能的專業數學：概率數理統計、線性代數、決策論、優化論、博弈論等數學模型變得通俗易懂。
2、將大數據和人工智能的專業涉及到的數據結構和算法：分類、聚類 、回歸算法、概率等算法變得通俗易懂。
3、最新的高科技動態：數據采集方面的智能傳感器技術；醫療大數據智能決策分析；物聯網智慧城市等等。
根據初學者需要會有C語言、Java語言、Python語言、Scala函數式等目前主流計算機語言。
根據讀者的需要有和人工智能相關的計算機科學與技術、電子技術、芯片技術等基礎學科通俗易懂的文章。
總結
以上是生活随笔為你收集整理的android应用案例开发大全_vue.js入门及经典应用案例总结（前端开发必看）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实数系的基本定理_初中篇1|知实数-为什
- 下一篇： vue前端架构文档_Dubbo分布式架构