Vue学习（一） ：入门案例
2024-10-07 04:50:05
1. 开始前的准备
IDE：VSCode（推荐）或者Sublime Text
前导技术：JavaScript中级
2. 官方提供的product例程
product.html页面代码：
<div id="app">
<ul>
<li v-for="product in products">
<input type="number" v-model.number="product.quantity">
{{ product.name }} <!--使用{{<your expression>}}定义表达式-->
<span v-if="product.quantity === 0"> <!--v-if是vue的条件指令-->
- OUT OF STOCK
</span>
<span v-if="product.quantity < 0 || product.quantity % 1 != 0">
- INVALID NUMBER
</span>
<button @click="product.quantity += 1">
Add
</button>
<button @click="product.quantity -= 1">
Minus
</button>
</li>
</ul>
<h2>Total Inventory: {{ totalProducts }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <!--引入vue-->
<script>
const app = new Vue({ <!--Vue实例是ViewModel-->
el: '#app', <!--el即element对象，绑定DOM进行View和ViewModel的交互-->
data: {
products: [] <!--定义products数组属性-->
},
computed: {
totalProducts () { <!--totalProducts()是computed对象的属性-->
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0)
}
},
created () {
fetch('https://api.myjson.com/bins/clqnb')
.then(response => response.json())
.then(json => {
this.products = json.products
})
}
})
</script>
3. 返回json数据的API
json测试数据：
{
"products":[
{"id":1,"quantity":1,"name":"Compass"},
{"id":0,"quantity":2,"name":"Jacket"},
{"id":3,"quantity":5,"name":"Hiking Socks"},
{"id":4,"quantity":2,"name":"Suntan Lotion"}
]
}
json托管（提供API）：http://myjson.com/
注意：此处需能够访问外网的代理服务器！
最新文章
- .NET基础拾遗（7）Web Service的开发与应用基础
- C#定义类型转化 及 格式化字符串
- Windows群集安装
- css的计数器
- union 中可以存储的是不带构造函数的类对象
- 你不知道的JavaScript（作用域和闭包）
- 【转】silverlight 跨域访问
- 介绍Foundation框架
- mysql 从一个表中查数据，插入另一个表
- nodejs的package.json依赖dependencies中 ^ 和 ~ 的区别
- c# webapi上传、读取、删除图片
- OO第二单元单元总结
- macbook air 2012 mid 安装 windows10 双系统遇到错误 no bootable device insert boot disk and press any key
- Python爬虫【四】Scrapy+Cookies池抓取新浪微博
- vue实践中的狗血事件之：mock数据引发的血坑
- hdu 5784 How Many Triangles 计算几何，平面有多少个锐角三角形
- java JDK JRE 1.6,1.7,1.8各个版本版本下载链接
- Python高阶函数（Map、Reduce、Filter）
- Guava学习笔记：Preconditions优雅的检验参数（java）
- mongodb/python3.6/mysql的安装