Vue学习 ：入门案例

Posted 2022-01-04 xsjzhao

开始前的准备

IDE：VSCode（推荐）或者Sublime Text
前导技术：javascript中级

案例

页面代码：

<div id="app">
    <ul>
        <li v-for="product in products">
            <input type="number" v-model.number="product.quantity">
               product.name  <!--using double  to define an expression-->
            <span v-if="product.quantity === 0">
                - 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>
<script>
    const app = new Vue(
        el: '#app', 
        data: 
            products: []
        ,
        computed: 
            totalProducts ()  // Here totalProducts() is a property of 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>

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/

注意：此处需能够访问的代理服务器！