Vue学习03

vue的开发模式

SPA(single page application 单页应用–只有一个页面)，它的业务多用组件(一个一个的业务模块)
​

var vm = new Vue({
    // data: function() {
    data() {
        return {
            list: Array(10).fill('').map((_, i) => {
                 return {id: `ID-${i}`, name: `我的电脑0${i}`, temp: (Math.random() * 100).toFixed(2)}
            })
       }
     }
 })
// 在Vue中有一个规则：凡是要使用Vue中的原生方法，都必须在这个方法前添加一个"$"修饰符
vm.$mount('#root')

​

为什么vue中的data要用一个函数返回一个数据？

    vue中的data必须是一个工厂函数，因为vue的开发模式是组件模式，意味着这个组件会被多个页面使用，
    每个页面使用的组件必须是唯一的，因此这个组件的实例是多例
     因此数据也应用是多个才对，因为数据对象是一个Object引用数据类型，因此需要使用工厂函数来创建一份数据
​

设计模式之工厂模式：https://www.runoob.com/design-pattern/factory-pattern.html
​

在Vue中在html中获取变量的值

标签间： {{变量}}

<td>{{item.name}}</td>

标签里：“变量”

<td v-text="item.temp"></td>

Vue中的指令

Vue中的指令有很多可以类比于js的语法：
1、遍历指令: for…in 机制， v-for =“(value, index) in arrName”
2、条件指令: v-if （或v-else-if 、v-else ）= “条件” 如果这个节点不展示（不满足条件），则不会加载这个节点
3、控制按钮是否显示指令：v-show = “条件” 如果不显示使用display:none样式设置隐藏掉
​

面试题：
v-if和v-show谁好？
答： 如果需要频繁切换显示用v-show，否则用v-if
​

Vue指令的使用演示：

Vue中的数据是很重要的，所以，以下的演示与上方的js部分是一个整体，请结合起来理解。

 <div id="root">
        <h2>数据遍历</h2>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>编码</th>
                    <th>温度</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 在vue中可以使用遍历指令: for...in 机制， v-for -->
                <!-- forEach((item,index) => {}) -->
                <!-- forEach(item => {}) -->
                <tr v-for="(item, index) in list">
                    <td>{{index}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <!-- 条件：js -> if...else if...else -->
                        <!-- 条件指令 v-if v-else-if v-else 如果这个节点不展示，则不会加载这个节点 -->
                        <span v-if="item.temp > 70" style="color: red">{{item.temp}}</span>
                        <span v-else-if="item.temp < 40" style="color: rgb(7, 202, 7)">{{item.temp}}</span>
                        <span v-else style="color: rgb(235, 162, 79)">{{item.temp}}</span>
                    </td>
                </tr>
                <tr>
                    <hr>
                </tr>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td v-text="item.temp"></td>
                    <td>
                        <!-- 控制按钮是否显示，可以使用一个指令：v-show 如果不显示使用display:none样式设置隐藏掉 -->
                        <button v-show="item.temp > 70">处理</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>