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>