1、在页面上引用 vue.mim.js 文件，有个 min 的是压缩的意思。
<script tppe="../vue.min.js"></script>
2、在页面上添加 div 元素,然后添加一个列表,让产品展示出来
<div id="showPage">
<h1> 系统名称:{{ title }} </h1>
<ul>
<li v-for="item in products">名称：{{item.name}} <span> {{item.number}} </span> </li>
</ul>
</div>
<script>
// 创建一个构造函数
var testVue=new Vue（{
el:"#showPage", // 作用于哪个元素
data:{ // 数据
title:"库存管理系统"，
products:[{ name:"iphone", number:10 },{name:"xiaomi", number:5},{ name:"huawei", number:8},] }
}）
</script>
在浏览器中我们可以通过代码修改页面的数据：
// 插入新数据
testVue.products.push({ name:"apple", number:65})
// 删除第一条iPhone的数据
testVue.products.splice(0,1)
(3)增加一个删除事件
标签：初体验,name,number,vue,products,testVue,页面 From： https://www.cnblogs.com/dreamhouse/p/17867520.html