VUE模板语法+vue常用特性+vue组件化开发+vue前端交互+vue前端路由

最新推荐文章于 2024-07-10 13:57:52 发布
最新推荐文章于 2024-07-10 13:57:52 发布
阅读量418 收藏
点赞数
文章标签： vue.js 前端 交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45129167/article/details/121674551
版权
本文详细介绍了Vue.js的模板语法，包括属性绑定、样式绑定、分支循环结构等，同时讲解了Vue的常用特性如响应式原理、表单操作、事件修饰符等。此外，文章还探讨了Vue的组件化开发，如全局和局部组件的注册，并通过实际案例展示了组件的使用。在前端交互方面，文章涵盖了Vue的路由概念，包括Vue Router的使用，动态匹配路由和路由重定向。最后，文章讨论了多种处理异步请求的方法，如Promise和axios，并展示了如何在Vue应用中实现前后端交互。
摘要由CSDN通过智能技术生成

什么是VUE

在这里插入图片描述
在这里插入图片描述

VUE的基本使用

在这里插入图片描述

<body>
    <div id="app">
        <div>{
   {
   msg}}</div>
        <div>{
   {
   1 + 2}}</div>
        <div>{
   {
   msg + '----' + 123}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              Vue的基本使用步骤
              1、需要提供标签用于填充数据
              2、引入vue.js库文件
              3、可以使用vue的语法做功能了
              4、把vue提供的数据填充到标签里面
            */
        var vm = new Vue({
   
            el: '#app',
            data: {
   
                msg: 'Hello Vue'
            }
        });
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

完成
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
完成
关于指令

在这里插入图片描述
在这里插入图片描述

<style type="text/css">
  [v-cloak]{
   
    display: none;
  }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>{
   {
   msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-cloak指令的用法
      1、提供样式
        [v-cloak]{
          display: none;
        }
      2、在插值表达式所在的标签中添加v-cloak指令

      背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        msg: 'Hello Vue'
      }
    });
  </script>

完成
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<body>
  <div id="app">
    <div>{
   {
   msg}}</div>
    <div v-text='msg'></div>
    <div v-html='msg1'></div>
    <div v-pre>{
   {
   msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
      2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
      3、v-pre用于显示原始信息
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        msg: 'Hello Vue',
        msg1: '<h1>HTML</h1>'
      }
    });
  </script>
</body>

在这里插入图片描述
在这里插入图片描述

完成
在这里插入图片描述
响应式在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{
   {
   msg}}</div>
    <div v-once>{
   {
   info}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        msg: 'Hello Vue',
        info: 'nihao'
      }
    });
  </script>
</body>
</html>

改msg变，改info不变
在这里插入图片描述

完成
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述


  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{
   {
   msg}}</div>
      <div>
        <input type="text" v-model='msg'>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        双向数据绑定
        1、从页面到数据
        2、从数据到页面
      */
      var vm = new Vue({
   
        el: '#app',
        data: {
   
          msg: 'Hello Vue'
        }
      });
    </script>
  </body>
  </html>

表单和输入域中的值改变后，相应改变
在这里插入图片描述
在这里插入图片描述

完成
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{
   {
   num}}</div>
        <div>
            <button v-on:click='num++'>点击</button>
            <button @click='num++'>点击1</button>
            <button @click='handle'>点击2</button>
            <button @click='handle()'>点击3</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
   
            el: '#app',
            data: {
   

                num: 0

            }, // 注意点： 这里不要忘记加逗号 
            // methods  中 主要是定义一些函数
            methods: {
   

                handle: function() {
   
                    // 这里的this是Vue的实例对象+
                    console.log(this === vm)
                        //   在函数中 想要使用data里面的数据 一定要加this 
                    this.num++;
                }

            }

        });
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

完成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{
   {
   num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
   
            el: '#app',
            data: {
   
                num: 0
            },
            methods: {
   
                handle1: function(event) {
   
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
   
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

完成
事件修饰符

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{
   {
   num}}</div>
    <div v-on:click='handle0'>
      <button v-on:click.stop='handle1'>点击1</button>
    </div>
    <div>
      <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-事件修饰符
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        num: 0
      },
      methods: {
   
        handle0: function(){
   
          this.num++;
        },
        handle1: function(event){
   
          // 阻止冒泡
          // event.stopPropagation();
        },
        handle2: function(event){
   
          // 阻止默认行为
          // event.preventDefault();
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

按键修饰符

<!-- 键修饰符，键代码 -->
<input @keyup.delete="">
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <form action="">
            <div>
                用户名：
                <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
            </div>
            <div>
                密码：
                <input type="text" v-on:keyup.enter='handleSubmit' v-model='pwd'>
            </div>
            <div>
                <input type="button" v-on:click='handleSubmit' value="提交">
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              事件绑定-按键修饰符
            */
        Vue.config.keyCodes.f1 = 113
        var vm = new Vue({
   
            el: '#app',
            data: {
   
                uname: '',
                pwd: '',
                age: 0
            },
            methods: {
   
                clearContent: function() {
   
                    // 按delete键的时候，清空用户名
                    this.uname = '';
                },
                handleSubmit: function() {
   
                    console.log(this.uname, this.pwd)
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

自定义按键修饰符
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-on:keyup.aaa='handle' v-model='info'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
    Vue.config.keyCodes.aaa = 65
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        info: ''
      },
      methods: {
   
        handle: function(event){
   
          console.log(event.keyCode)
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

完成
案例：简单计算器
在这里插入图片描述
在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>简单计算器</h1>
    <div>
      <span>数值A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>数值B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click='handle'>计算</button>
    </div>
    <div>
      <span>计算结果:</span>
      <span v-text='result'></span>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      简单计算器案例 
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        a: '',
        b: '',
        result: ''
      },
      methods: {
   
        handle: function(){
   
          // 实现计算逻辑
          this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
  </script>
</body>
</html>

重点代码：

 <input type="text" v-model='a'>
  <input type="text" v-model='b'>
   <button v-on:click='handle'>计算</button>
     <span v-text='result'></span>
      <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      简单计算器案例 
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        a: '',
        b: '',
        result: ''
      },
      methods: {
   
        handle: function(){
   
          // 实现计算逻辑
          this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });

在这里插入图片描述

属性绑定

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <a v-bind:href="url">百度</a>
    <a :href="url">百度1</a>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      属性绑定
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        url: 'http://www.baidu.com'
      },
      methods: {
   
        handle: function(){
   
          // 修改URL地址
          this.url = 'http://itcast.cn';
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
双向数据绑定的三种方式
v-model=v-bind+v-input

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{
   {
   msg}}</div>
    <input type="text" v-bind:value="msg" v-on:input='handle'>
    <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
    <input type="text" v-model='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-model指令的本质

    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        msg: 'hello'
      },
      methods: {
   
        handle: function(event){
   
          // 使用输入域中的最新的数据覆盖原来的数据
          this.msg = event.target.value;
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
完成

样式绑定

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
   
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
   
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class="{active: isActive,error: isError}">
      测试样式
    </div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        isActive: true,
        isError: true
      },
      methods: {
   
        handle: function(){
   
          // 控制isActive的值在true和false之间进行切换
          this.isActive = !this.isActive;
          this.isError = !this.isError;
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
完成
对于数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
   
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
   
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class='[activeClass, errorClass]'>测试样式</div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        activeClass: 'active',
        errorClass: 'error'
      },
      methods: {
   
        handle: function(){
   
          this.activeClass = '';
          this.errorClass = '';
        }
      }
    });
  </script>
</body>
</html>

效果同上
在这里插入图片描述
完成
/*
样式绑定相关语法细节：
1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class如何处理？默认的class会保留

*/
混合绑定的用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .active {
   
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        
        .error {
   
            background-color: orange;
        }
        
        .test {
   
            color: blue;
        }
        
        .base {
   
            font-size: 28px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
        <div v-bind:class='arrClasses'></div>
        <div v-bind:class='objClasses'></div>
        <div class="base" v-bind:class='objClasses'></div>

        <button v-on:click='handle'>切换</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              样式绑定相关语法细节：
              1、对象绑定和数组绑定可以结合使用
              2、class绑定的值可以简化操作
              3、默认的class如何处理？默认的class会保留
              
            */
        var vm = new Vue({
   
            el: '#app',
            data: {
   
                activeClass: 'active',
                errorClass: 'error',
                isTest: true,
                arrClasses: ['active', 'error'],
                objClasses: {
   
                    active: true,
                    error: true
                }
            },
            methods: {
   
                handle: function() {
   
                    this.isTest = false;
                    this.objClasses.error = false;
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
完成
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
    <div v-bind:style='objStyles'></div>
    <div v-bind:style='[objStyles, overrideStyles]'></div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定之内联样式Style：
      
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        borderStyle: '1px solid blue',
        widthStyle: '100px',
        heightStyle: '200px',
        objStyles: {
   
          border: '1px solid green',
          width: '200px',
          height: '100px'
        },
        overrideStyles: {
   
          border: '5px solid orange',
          backgroundColor: 'blue'
        }
      },
      methods: {
   
        handle: function(){
   
          this.heightStyle = '100px';
          this.objStyles.width = '100px';
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

完成

分支循环结构

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score<90&&score>=80'>良好</div>
    <div v-else-if='score<80&&score>60'>一般</div>
    <div v-else>比较差</div>
    <div v-show='flag'>测试v-show</div>
    <button v-on:click='handle'>点击</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      分支结构

      v-show的原理：控制元素样式是否显示 display:none
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        score: 10,
        flag: false
      },
      methods: {
   
        handle: function(){
   
          this.flag = !this.flag;
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

完成

分支循环结构

在这里插入图片描述
注意区分对象和数组的区别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div>水果列表</div>
    <ul>
      <li v-for='item in fruits'>{
   {
   item}}</li>
      <li v-for='(item, index) in fruits'>{
   {
   item + '---' + index}}</li>
      <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{
   {
   item.ename}}</span>
        <span>-----</span>
        <span>{
   {
   item.cname}}</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      循环结构-遍历数组
    */
    var vm = new Vue({
   
      el: '#app',
      data: {
   
        fruits: ['apple', 'orange', 'banana'],
        myFruits: [{
   
          id: 1,
          ename: 'apple',
          cname: '苹果'
        },{
   
          id: 2,
          ename: 'orange',
          cname: '橘子'
        },{
   
          id: 3,
          ename: 'banana',
          cname: '香蕉'
        }]
      }
    });
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
完成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div v-if='v==13' v-for='(v,k,i) in obj'>{
   {
   v + '---' + k + '---' + i}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 使用原生js遍历对象
        var obj = {
   
            uname: 'lisi',
            age: 12,
            gender: 'male'
        }
        for (var key in obj) {
   
            console.log(key, obj[key])
        }
        /*
          循环结构
        */
        var vm = new Vue({
   
            el: '#app',
            data: {
   
                obj: {
   
                    uname: 'zhangsan',
                    age: 13,
                    gender: 'female'
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述
完成
基本案例：Tab选项卡
通过vue循环展示图片和名称

  var vm = new Vue({
   
            el: '#app',
            data: {
   
                list: [{
   
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
   
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
   
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            },
      :key='item.id' v-for='(item,index) in list'>{
   {
   item.title}}
 :key='item.id' v-for='(item, index) in list'     
 <img :src="item.path">

对于选中对象进行索引的设置

 <ul>
                <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{
   {
   item.title}}</li>
            </ul>
            <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
                <img :src="item.path">
                 currentIndex: 0, // 选项卡当前的索引

给添加点击事件，并调用点击事件来改变选中的类名

  methods: {
   
                change: function(index) {
   
                    // 在这里实现选项卡切换操作：本质就是操作类名
                    // 如何操作类名？就是通过currentIndex
                    this.currentIndex = index;
                    <li v-on:click='change(index)'

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .tab ul {
   
            overflow: hidden;
            padding: 0;
            margin: 0;
        }
        
        .tab ul li {
   
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            line-height: 45px;
            list-style: none;
            text-align: center;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }
        
        .tab ul li:first-child {
   
            border-left: 1px solid blue;
        }
        
        .tab ul li.active {
   
            background-color: orange;
        }
        
        .tab div {
   
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid blue;
            border-top: 0px;
        }
        
        .tab div.current {
   
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>
            增加tab栏 <input type="text">
        </p>
        <div class="tab">
            <ul>
                <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{
   {
   item.title}}</li>
            </ul>
            <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
                <img :src="item.path">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
                                                                      
                                                                    */
        var vm = new Vue({
   
            el: '#app',
            data: {
   
                currentIndex: 0, // 选项卡当前的索引
                list: [{
   
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
   
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
   
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            },
            methods: {
   
                change: function(index) {
   
                    // 在这里实现选项卡切换操作：本质就是操作类名
                    // 如何操作类名？就是通过currentIndex
                    this.currentIndex = index;
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
DAY01vue的模板语法完
VUE的常用特性
在这里插入图片描述

表单操作

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  
  form div {
   
    height: 40px;
    line-height: 40px;
  }
  form div:nth-child(4) {
   
    height: auto;
  }
  form div span:first-child {
   
    display: inline-block;
    width: 100px;
  }
  </style>
</head>
<body>
  <div id="app">
    <form action="http://itcast.cn">
      <div>
        <span>姓名：</span>
        <span>
          <input type="text" v-model='uname'>
        </span>
      </div>
最低0.47元/天 解锁文章
旺旺妙脆角
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue模板语法概述（指令，事件、属性、样式绑定，分支、循环结构）
Yueqin0512的博客
11-14 298
Vue模板语法 如何理解前端渲染 把数据填充到html中（模板+数据=前端渲染（静态html内容）） 前端渲染方式 原生js拼接字符串 使用前端模板引擎 使用Vue特有的模板语法 模板语法概述 插值表达式 指令 事件绑定 属性绑定 样式绑定 分支循环结构 v-cloak指令语法 插值表达式存在的问题：闪动 如何解决该问题：使用v-cloak指令 解决该问题的原理，先通过样式隐藏内容，然后在内存中进行值的替换，替换好了之后再显示最终的结果 提供样式，再在插值表达式所在的标签中添加v-cloak
VUE基础
weixin_42688411的博客
11-26 747
【代码】VUE基础。
vue3+ts 使用parseInt报错Argument of type ‘number‘ is not assignable to parameter of type ‘string‘.
最新发布
qq_56042158的博客
07-10 322
在之前习惯使用javascript开发的时候，直接使用parseInt将数字转为整数。而在使用typescript开发时，却出现了报错。报错内容：Argument of type 'number' is not assignable to parameter of type 'string'.
变量取整的方式
04-28 3299
一、直接取整 1.parseInt(number) （常用） (1).parseInt()可以处理Number类型、还可以处理字符串类型 (2).使用parseInt() 处理字符串时， 如果第一个是负号或者不是数字的字符串时，会返回NaN, 如果是数字则一直处理到不是数字为止 注意：parseInt()还可以识别各种整数格式 ( 十进制、八进制、十六进制) var num1 = parseInt("2015aa"), //2015 num2 = parseInt(...
vue入门
zy2303201381的博客
04-25 1084
目录 1. Vue.js是什么？ 2. 库和框架的区别 3. MVVM的介绍 4. 安装Vue 5.示例演示 6.实例生命周期钩子(了解即可) 1. Vue.js是什么？ Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 易用 html css javascript 高效 开发前端页面 非常高效 灵活 开发灵活 多样性 官网：Vue.js Vue作者：尤雨溪/中国无锡...
parseInt()+parseFloat()注意事项
weixin_43856548的博客
12-12 889
一、parseInt() parseInt() 函数可解析一个字符串，并返回一个整数。 parseInt(string, radix); string 必需。要被解析的字符串。 radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。 如果该参数小于 2 或者大...
前端 Vue+Node+MongoDB高级全栈开发
09-11
在本篇内容中，我们将深入探讨“前端 Vue+Node+MongoDB 高级全栈开发”的核心知识点。通过本文的学习，您将能够更好地理解如何利用这些技术构建高效、灵活且可扩展的应用程序。 ### 一、Vue.js简介 **Vue.js** 是...
前端开发-基于ts+vue的随机头像生成器前端实现.zip
04-02
在本项目中，我们探讨的是如何使用TypeScript（TS...它涵盖了前端开发的多个重要知识点，包括组件化、响应式编程、类型安全、路由管理以及状态管理。这样的实践有助于提升开发者对现代Web开发工具和技术的理解和掌握。
基于vue3+elementPlus的后台管理系统模板
02-18
Vue3和ElementPlus是当前前端开发领域中备受瞩目的技术栈。Vue3是Vue.js的最新版本，带来了诸多性能优化和开发体验改进，而ElementPlus则是一个基于Vue3的组件库，提供了丰富的UI组件，使得开发者能够快速构建出美观...
知识图谱可视化，前端 vue.js + d3.js.zip
04-03
Vue.js是一款轻量级的JavaScript框架，它以其易用性、可维护性和组件化特性在前端开发中广受欢迎。而D3.js（Data-Driven Documents）是一个强大的数据可视化库，能够创建各种复杂的图表和图形，特别适合构建动态和...
毕业设计基于Vue3.0+Ts的医疗服务平台前端
11-02
8. **前端路由Vue Router**：Vue Router是Vue.js官方的路由管理器，用于处理页面跳转和组件的懒加载，对于构建单页应用至关重要。 9. **最佳实践和代码规范**：遵循良好的编码规范和项目结构，例如采用ESLint和...
vue 实现强制类型转换 数字类型转为字符串
10-16
今天小编就为大家分享一篇vue 实现强制类型转换 数字类型转为字符串，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
web前端之vue实现选项卡的不同实现方式、parseInt、find
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
06-06 600
web前端之vue实现选项卡的不同实现方式、parseInt、find
vue下拉框字典映射转换失败 字符转数字parseInt :value 下拉框无法选择 el-select默认选中 设为只读 input输入框设为只读 el-table字典转换 vue普通文字标签
tanzongbiao的专栏
05-24 839
2、:value="parseInt(dict.dictValue)" 字符串转int试试 parseInt()1、value="0" 与 :value="0" 不同，家冒号:试试。
parseInt转化的坑
zhangxuekang的博客
12-23 3758
parseInt() 函数解析一个字符串参数，并返回一个指定基数的整数 (数学系统的基础)。---MDN 划重点: 当第一个参数不是字符串时, 会先转成字符串(toString)再进行转化.  第二个参数是一个介于2和36之间的整数(数学系统的基础). 当不指定第二个参数时, 不同的环境可能会有不同的转化结果, 请务必使用第二个参数. 转出的数字是整数. 说一些parseInt的坑. ...
vue将数字变为字符串_js将某个值转换为String字符串类型或转换为Number数字类型...
weixin_39880328的博客
12-18 9315
将某个值转换为String类型1. value.toString()toString()方法返回一个表示该对象的字符串var a = 123a.toString() // '123'2. "" + value一元加法运算符的作用是数值求和，或者字符串拼接。有字符串，则是字符串拼接。其他是数字相加求和。var a = 123'' + a // '123'3. String(value)String...
parseInt()详解
热门推荐
糖长老莫小贝的博客
04-07 8万+
可能绝大多数学过js的就知道parseInt()函数，这里对小伙伴来说是有一个难点或者说是误区的（好吧……说的就是我），那就是在官方给的解释中我们能看到其中一个参数“radix”,文中多次说他为基数，千万不要把它理解为要转换的进制 看上面的这些可能不太好理解，直接忽略上图即可O(∩_∩)O哈哈~ 先来看几组样例： parseInt(“10”); //返回 10 parseInt(“19...
javascript:parseInt（）、Number（）和+对比
k_shl_2011的博客
04-12 5139
看书时看到Number（）和+转换数字速度要比parseInt（）快的多，所以闲来无事我就试了试。
Vue全家桶+Electron打造跨三端应用实战
Vue全家桶，包括Vue 2、Vuex、Vue Router和Webpack，构成了项目的前端开发基础，它们共同实现了组件化开发和高效的模块管理。ES6的语法被用于提升代码的可读性和简洁性，axios作为网络请求库提供了与后端的交互。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值