用做菜比喻,
比如炒鸡蛋
库,工具库, 提供各种工具, 锅碗盆瓢,煤气灶,菜单,等等.
框架,有工具,但提供全套的流程,
还会根据炒鸡蛋的菜单,把需要的步骤和工具都定好.
也许只需要你提供一些关键的量, 比如鸡蛋放几个,
那他就自动完成一系列的步骤,返回一个炒鸡蛋?
参考百度搜索第一条,
https://blog.csdn.net/jessise_zhan/article/details/80129755
命令式: how 重点在于设计怎么做
声明式: what 重点在于想要什么
插值语法,模板语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div id="app">
<div></div>
<div v-once></div>
<div v-text="msg"></div>
<div v-html="htmlVal"></div>
<div></div>
<div></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data : {
msg : "hello Vue",
flag : true,
show : "content",
htmlVal : "<span>hello everyone </span>",// 这里无法实现数据绑定.
money : 1
},
computed : {
usd () {
return this.money * 6;
}
},
watch : {
msg (newVal, oldVal) {
console.log(newVal,oldVal);
}
}
template : "<div>content </div>"
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
<button v-on:click="(val<10) && val++">+</button>
<span></span>
<button @click="minuse(2,$event)">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data : {
val : 0
},
methods : {
minuse (num,e) {
(this.val > 0) && this.val -= num;
}
}
});
</script>
事件修饰符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
<span></span>
<button @click.left="minuse" @click.right.prevent="plus">+-</button>
<button @click.once.stop="minuse"></button>
<input type="text" @keyup.13="show" />
<input type="text" @keyup.enter="show" />
<input type="text" @keyup.space.enter="show" />
<input type="text" @keyup.esc="show" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data : {
val : 0
},
methods : {
minuse () {
(this.val > 0) && this.val--;
},
plus () {
(this.val < 10) && this.val++;
},
show (e) {
console.log(e.target.value);
}
}
});
</script>
