计算器案例
计算器案例介绍，实现两个数值相加的功能。
知识点
计算属性
computed
在计算属性里面写方法，监听定义的变量，返回值为computed属性值。
类比python语言中的方法属性的定义，@property然后，定义方法，作为属性来使用。
前期准备
项目文件创建
vue环境导入
模板文件的创建
前期准备：
模板文件代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
})
</script>
</html>
具体步骤：
1、在挂载点的标签内写标签，定义属性与变量
1-1、写两个输入框input标签，输入框输入类型为数字，用num1和num2来接收这两个变量
1-2、写一个p标签，p标签内写差值运算{{}}的sum,用sum来接收num1和num2的运算结果，
<input type='number' v-model='num1'>+
<input type='number' v-model='num2'>=
<button>{{ sum }}</button>
2、数据初始化
new Vue({
el:'#app',
data:{
num1:0,
num2:0,
},
})
3、写计算属性的方法
与vue中的其他实例成员是同一个级别的数据
根据语法写sum(){},在函数体内先进行一个逻辑判断，也就是如果两个输入框中都有数值传入，就计算出两个数值相加的结果，否则写结果两个字显示在按钮上，
computed:{
sum(){
if(this.num1 && this.num2)
return +this.num1 + +this.num2;
return '结果';
}
}
逻辑
有两个输入框的值，把这两个输入框的值相加，只要里面有两个输入框的值，都可以得到相加，最后得到一个结果，显示在按钮的标签中，当有其中一个数值已经确定，另外一个输入框中的数值更新，就会触发computed方法中被监听的变量，从而方法更新一遍，结果更新一遍。
整个代码手撸一遍如下：
<!DOCTYPE html>
<html lang='zh'>
<head>
<meta charset='UTF-8'>
<title>计算器案例</title>
</head>
<body>
<div id='app'>
<input type='number' v-model='num1'>+
<input type='number' v-model='num2'>=
<button>{{ sum }}</button>
</div>
</body>
<script src='js/vue.js'></script>
<script>
new Vue ({
el:'#app',
data:{
num1:0,
num2:0,
},
computed:{
sum(){
if(this.num1 && this.num2){
return +this.num1 + +this.num2;
}
return '结果'
}
}
})
</script>
</html>
后记与总结
注意点
1、new vue({}),这样的语法格式不要写错，在大括号内写相应的逻辑体代码
2、if条件判断的语法是怎么样的？
if(){}这样的格式，不需要写else这样的关键字，大括号外面直接就是else的逻辑代码。
3、if判断条件里面的num1和num2是否都存在怎么判断？
用&&这样来判断，这是一个逻辑判断，如果两个变量值都存在，那么逻辑值就为真。
4、num初始值为设置的为字符串的0。
5、数值与字符串的相加转换？
也就是用到了整数与字符串的转换，用+来转换。
感想：
代码不多，主要是知识点的运用，理解实践一遍就好。能自己敲出来，没有问题，就是掌握了。
延伸的阅读就是：
Q:为什么要有这个计算属性？
A:一个变量依赖多个变量。
Q:一个变量依赖于多个变量的逻辑运算的应用场景是什么？
A:本次计算器案例是的。
实践发现的问题
1、所写的代码，不会都显示在页面代码中。
里面有一个用vue指令就只会渲染到页面中，但是不会再页面的HTML代码中显示出来，这个就是v-model的指令的内容，
2、监听与不监听的概念是什么？
在这个方法中，有任何一个值更新，方法就会被调用一次，会监听方法中的变量值。
3、一个是数据渲染的一次的概念，跟内存的联系是什么？
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
