Vue的框架的学习入门篇

最新推荐文章于 2023-05-23 15:00:52 发布

一直在报错跟解决报错的路上

最新推荐文章于 2023-05-23 15:00:52 发布

阅读量157

点赞数

文章标签： vue.js 学习 javascript html5

本文链接：https://blog.csdn.net/weixin_55887628/article/details/126084661

版权

Vue框架的学习

Vue的安装

引入vue框架

<script src="vue-2.4.0.js" type="text/javascript"></script>

建立一个被vue控制的元素区id属性会被vue引用

<body>
       <!--2.建立一个被vue控制的元素区，id属性值会被vue所引用-->
       <div id="app">
             <!-- 插值表达式  -->
             <p>qwe</p> 
             <p>{{str}}</p>
             <p>{{str1}}</p>
       </div>
     
</body>

创建一个Vue方法

<script type="text/javascript">
      
       var vm=new Vue({
           //el属性，指定为哪个标签进行相应的vue操作
           el:"#app",  
           //对数据的表达，数据约定俗称的是以json形式表现的
           //data中，存放的都是el中要使用的数据，也就是M
           data:{
              "str":"HelloWorld",
              "str1":"Hello Vue"
           }
             
       });

</script>

Vue的官网

Vue官网

用Vue编写计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="Calculator">
          <input type="radio"  value="1" v-model="suanfa"/>加法
          <input type="radio"  value="2" v-model="suanfa"/>减法
          <input type="radio"  value="3" v-model="suanfa"/>乘法
          <input type="radio"  value="4" v-model="suanfa"/>除法
          <ul>
            <li>
              第一个数字:<input type="text" v-model="str1">
            </li>
            <li>
              第二个数字:<input type="text" v-model="str2">
            </li>
            <li>
              <input type="button" value="计算" @click='Calculator()'>
            </li>
          </ul>
          <div class="result">结果：{{result}}</div>
        </div>    
      </div>
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            suanfa: '1',
            str1: '0',
            str2: '0',
            result: '0'
          },
          methods: {
            Calculator() {
              if (!this.str1 || !this.str2) {
                this.result = '输入的数不能为空'
              } else {
                if (this.suanfa == 1) {
                  this.result = parseInt(this.str1) + parseInt(this.str2)
                }
                if (this.suanfa == 2) {
                  this.result = parseInt(this.str1) - parseInt(this.str2)
                }
                if (this.suanfa == 3) {
                  this.result = parseInt(this.str1) * parseInt(this.str2)
                }
                if (this.suanfa == 4) {
                  this.result = parseInt(this.str1) / parseInt(this.str2)
                }
              }
            }
          }
        })
      </script>   
</body>
</html>