Vue学习（一） ：入门案例

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/

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