知识点：
- css之nth-child()，first-child()，last-child()
例子：nth-child(2){background:#fff} 把父元素的第二个子元素的背景设置为白色；
first-child():选择父元素的首个子元素
last-child():选择父元素的最后一个子元素
eval()函数可以计算字符串，并执行javascript代码
例子：eval("2+3") // 返回 5
const store = new Vuex.Store( {
state: {
result: ' ';
enter: ' '
},
mutations: { //相当于vue实例中的computed计算属性
}，
getters: {
},
actions: {
},
modules:{
}
} );
- this.$store 获取store仓库中的数据
例子：this.$store.state.result 获取state中的常量result的值
- this.$store.commit(‘calculate',value)
提交一个名为calculate的mutation给store仓库，并将参数一起提交过去。
component('组件名'，{ template:`里面写模板的内容`, // 引用组件：<组件名></组件名>
data:{
},
computed:{
},
methods:{
},
filters:{
}
...
})
例子：
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 获得触发事件的元素：
<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>
输出结果为：The id of the triggered element:p1
计算器.jpg
计算器实现
<!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变量用来存 结果
enter: ' ' // enter变量用来存 输入的值
},
mutations: {
calculate(state, value) {
if(value === '='){
state.result = eval(state.enter);
//eval() 函数可计算某个字符串，并执行其中的的 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值作为参数传给click事件；
methods: {
getkeybordvalue(value) {
var value = value;
this.$store.commit('calculate',value);
// 在Vuex中不能任意修改应用层的状态，要修改，就得用它提供的唯一途径：通过commit提交mutations。
}
}
});
//实例化vue
new Vue({
el:"#app" , //挂载点
data:{
keys: [
'clear','+','-','*',
'7','8','9','/',
'4','5','6','0',
'1','2','3','='
]
},
store,
computed: { // 计算属性
result() {
return this.$store.state.result;
//this指向的是实例化中的store
//this.$store.state.resule访问vuex中store仓库中的state中的常量；
},
enter() {
return this.$store.state.enter;
}
}
});
</script>
</body>
</html>
网友评论