Vue
Vue 借鉴了 AngulaJS 的模块化开发和 React 的虚拟 Dom ，所谓虚拟 Dom
就是把 Dom 操作放到内存中执行
基础知识
SoC 关注度分离原则
自定义事件分发
this.$emit('事件名', [参数])
计算属性
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销。
双向绑定
下拉框的特殊处理
针对 iOS 用户，需要加一个“请选择”的默认选项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div id="vue">
下拉框:
<select v-model="selected" >
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选中的值: {{ selected }}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#vue'，
data: {
selected: ''
}
});
</script>
|
模板传参绑定
模板 qinjiang 绑定了 #app 的 items 字段，同时使用 for
循环去读取每一个 item 的值，并将这个值传递给模板 qinjiang 的 props 中的
qin 字段，并在列表中显示出来。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="app">
<qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>
<script src="https://cdn,jsdelivr,net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("qinjiang", {
props: ['qin'],
template: '<li>({qin}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
items: ["Java","Linux","前端"]
}
});
</script>
|
rimraf
npm install rimraf -g rimraf