vue.js菜鸟学习之
Posted zjj123456
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js菜鸟学习之相关的知识，希望对你有一定的参考价值。
这次利用闲余时间了解使用了v-model组件，v-model是一个双向绑定的组件，所谓双向绑定就是交互双方都可绑定。v-bind属性绑定是单向绑定
废话少说，上代码。以下实例主要是做了一个简易计算器。主要用意在于体验一下v-model双向绑定，其他的不重要。
要是小白拿来调试，其中有几个注意的点：
@1 建议使用VScode
@2 将vue.js引用文件的路径换为自己的，就是以下的路径，该路径为相对路径。
<script src="vue.js"></script>
@3 其中有一些逻辑语句，如果不理解，建议学一下原生js。很容易理解 vue中调用通过this关键字，parseInt是将获取双向绑定的值转换为Int类型
methods:{
calc(){//计算器操作
switch (this.opt) {
case ‘+‘:
this.result=parseInt(this.n1)+parseInt(this.n2);
break;
case ‘-‘:
this.result=parseInt(this.n1)-parseInt(this.n2);
break;
case ‘*‘:
this.result=parseInt(this.n1)*parseInt(this.n2);
break;
case ‘/‘:
this.result=parseInt(this.n1)/parseInt(this.n2);
break;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el:‘#app‘,
data:{
n1:0,
n2:0,
result:0,
opt:‘+‘
},
methods:{
calc(){//计算器操作
switch (this.opt) {
case ‘+‘:
this.result=parseInt(this.n1)+parseInt(this.n2);
break;
case ‘-‘:
this.result=parseInt(this.n1)-parseInt(this.n2);
break;
case ‘*‘:
this.result=parseInt(this.n1)*parseInt(this.n2);
break;
case ‘/‘:
this.result=parseInt(this.n1)/parseInt(this.n2);
break;
}
}
}
});
</script>
</body>
</html>
以上是关于vue.js菜鸟学习之的主要内容，如果未能解决你的问题，请参考以下文章
菜菜菜鸟学习之JavaWeb 入门1（自己的学习理解，不对之处请大神们多多指教啊）