1、vue初体验

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)增加一个删除事件

<div   id=" "> 

 

 </div>