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本书的书名：

1. {{ 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函数式等目前主流计算机语言。

根据读者的需要有和人工智能相关的计算机科学与技术、电子技术、芯片技术等基础学科通俗易懂的文章。