知識點(diǎn)：
- css之nth-child()，first-child()，last-child()
例子：nth-child(2){background:#fff} 把父元素的第二個子元素的背景設(shè)置為白色；
first-child():選擇父元素的首個子元素
last-child():選擇父元素的最后一個子元素
- eval()
eval()函數(shù)可以計(jì)算字符串，并執(zhí)行javascript代碼
例子：eval("2+3") // 返回 5
- vuex建立store倉庫
const store = new Vuex.Store( {
state: {
result: ' ';
enter: ' '
},
mutations: { //相當(dāng)于vue實(shí)例中的computed計(jì)算屬性
}，
getters: {
},
actions: {
},
modules:{
}
} );
- this.$store 獲取store倉庫中的數(shù)據(jù)
例子：this.$store.state.result 獲取state中的常量result的值
- this.$store.commit(‘calculate',value)
提交一個名為calculate的mutation給store倉庫，并將參數(shù)一起提交過去。
- vue組件樣式
component('組件名'，{ template:`里面寫模板的內(nèi)容`, // 引用組件：<組件名></組件名>
data:{
},
computed:{
},
methods:{
},
filters:{
}
...
})
- dataset 獲取某個data屬性中的值
例子：
html部分：
<div id="aa" data-drink="coffee" data-food="sushi" datameal="lunch">￥20.12</div>
javascript部分:
var m = document.getElementById("aa");
var n = m.dataset.drink; // 獲取data-drink屬性中的值，得到n的值為coffee
- taget事件屬性
event.target 獲得觸發(fā)事件的元素：
<html>
<head>
<script type="text/javascript">
function getEventTrigger(event)
{
x=event.target;
alert("The id of the triggered element: " + x.id);
}
</script>
</head>
<body >
<p id="p1" onmousedown="getEventTrigger(event)">
Click on this paragraph. An alert box will show which element triggered the event.</p>
</body>
</html>
輸出結(jié)果為：The id of the triggered element:p1
計(jì)算器.jpg
計(jì)算器實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#app{
width: 400px;
background:#FFE4E1;
}
.result{
font-size: 30px;
padding:60px;
text-align: right;
}
.enter{
font-size: 20px;
margin: 10px auto;
padding:0 60px 20px 0;
text-align: right;
}
.template{
background:#FFF8DC;
width:100px;
height:120px;
display: inline-block;
font-size: 30px;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height:120px;
color:#7A378B;
}
.template:nth-child(1){
color:red;
}
.template:last-child{
background:#C6E2FF;
}
</style>
<body>
<div id="app">
<div class="result">{{result}}</div>
<div class="enter">{{enter}}</div>
<div class="key">
<div class="list">
<keybord v-for="item in keys" v-bind:value="item"></keybord>
</div>
</div>
</div>
<script type="text/javascript" src="./vue.min.js"></script>
<script type="text/javascript" src="./vuex.min.js"></script>
<script type="text/javascript">
//建立倉庫store
const store = new Vuex.Store({ //這里注意V和S都要大寫
state: {
result: ' ', //result變量用來存 結(jié)果
enter: ' ' // enter變量用來存 輸入的值
},
mutations: {
calculate(state, value) {
if(value === '='){
state.result = eval(state.enter);
//eval() 函數(shù)可計(jì)算某個字符串，并執(zhí)行其中的的 JavaScript 代碼。
}else if(value === 'clear'){
state.result = state.enter =' ';
}else{
state.enter += value;
}
}
}
});
//建立keybord組件
Vue.component('keybord',{
props:['value'], //從dom中的<keybord></keybord>組件中傳過來value屬性的值；
template:
`<div class="template" v-on:click="getkeybordvalue(value)"> {{value}} </div>`,
// 把從父組件傳過來的value值作為參數(shù)傳給click事件；
methods: {
getkeybordvalue(value) {
var value = value;
this.$store.commit('calculate',value);
// 在Vuex中不能任意修改應(yīng)用層的狀態(tài)，要修改，就得用它提供的唯一途徑：通過commit提交mutations。
}
}
});
//實(shí)例化vue
new Vue({
el:"#app" , //掛載點(diǎn)
data:{
keys: [
'clear','+','-','*',
'7','8','9','/',
'4','5','6','0',
'1','2','3','='
]
},
store,
computed: { // 計(jì)算屬性
result() {
return this.$store.state.result;
//this指向的是實(shí)例化中的store
//this.$store.state.resule訪問vuex中store倉庫中的state中的常量；
},
enter() {
return this.$store.state.enter;
}
}
});
</script>
</body>
</html>
