Vue.js学习总结（一）

本文章是在学习Vue.js课程后的个人总结，方便以后快速回顾。

学习网站：https://www.bilibili.com/video/BV17x411J73h

一、第一个Vue项目

index.html文件

    <div id="app">
        <div>
            <input type="text" v-model="name">
            <span v-show="name">你的名字是：{{name}}</span>
        </div>
        <div>
            <input type="text" v-model="age">
            <span v-show="age">你的年龄是：{{age}}</span>
        </div>
        <div>
            <input type="text" v-model="sex">
            <span v-show="sex">你的性别是：{{sex}}</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/vue.js"></script>

js/vue.js文件

var app = new Vue({
    el:'#app',
    data:{
        name:null,
        age:null,
        sex:null，
    }
})

运行结果：

总结：

1. 数据双向绑定，将html文件中需要利用的数据全部放到Vue中，注意其格式。
2. v-show的用法：name等属性有值时显示span标签中的内容。
3. name、age、sex是一个属性或者说一个变量。

二、v-for的用法

index.html文件

<div id="app">
     <ul>
          <li v-for="food in foodList">
              {{food.name}}:  ${{food.price * food.discount}}
          </li>
     </ul>
    </div>

js/vue.js文件

var app = new Vue({
    el:'#app',
    data:{
        foodList:[
            {
                name:'shallot',
                price:10,
                discount:.8
            },
            {
                name:'ginger',
                price:5,
                discount:0.7
            },
            {
                name:'garlic',
                price:6
            }
        ]
    }
})

运行结果：

个人总结：

1. v-for循环指令用于显示数组中的元素，其使用格式固定。foodList是源数据数组，food是数组元素迭代的别名。
2. v-for还有很多用法，这只是其中最常用的一种。以后有需求可参考这一篇。
3. {{}}中可以进行四则运算或者三目运算等。
4. 编写程序时一定要注意其格式，容易出错。