Vue基础语法

最新推荐文章于 2022-03-23 23:39:11 发布

落花流雨

最新推荐文章于 2022-03-23 23:39:11 发布

阅读量175

点赞数

分类专栏： # vue2.0全家桶文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44666644/article/details/107454300

版权

vue2.0全家桶专栏收录该内容

31 篇文章 3 订阅

订阅专栏

Vue基础语法

v-cloak指令的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <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">
    /*
    1.什么是指令？
    * 指令的本质就是自定义属性；
    * 指令的格式：以v 开始（比如：v-cloak）
    .............................................
      v-cloak指令的用法
      * 插值表达式存在的问题：“闪动”
      * 如何解决该问题：使用v-cloak指令
      * 解决该问题的原理：先隐藏，替换好值之后再显示最终的值
    ..................................................
      1、提供样式
        [v-cloak]{
          display: none;
        }
      2、在插值表达式所在的标签中添加v-cloak指令

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

v-show 和 v-if 分支判断

<!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 样式的变化
    // v-if 页面是否渲染到页面 

    var vm = new Vue({
      el: '#app',
      data: {
        score: 10,
        flag: false
      },
      methods: {
        handle: function () {
          this.flag = !this.flag;
        }
      }
    });
  </script>
</body>

</html>

v-once指令的用法

v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。

<!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>

v-bind基本用法

属性绑定–基本用法

<!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>

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;
    }
  </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">
    /*
                注意：这种做法不好，应该采用简化版（具体看代码中的案例）

      样式绑定: 就是控制类名是否添加到div中
      通过 v-bind指令来绑定class属性，它的值通过对象的方式控制类名是否显示    对象的属性名就是样式类名；属性值通过true、false控制
      如果值为true,显示
      如果值为false,隐藏
    要想控制多个类名，在对象中用逗号分开，添加多个键值对
    ..........................................................
      isActive  以is开头的标识类，true 或者 false

    */
    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>

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;
    }
  </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">
    // 样式绑定:数组形式
    // 直接定义相关的属性，属性的值就是实际的类名
    // 要想加多个类名，在数组中添加多个属性，值会作为类名渲染到标签的class属性中
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'error'
      },
      methods: {
        handle: function () {
          this.activeClass = '';
          this.errorClass = '';
        }
      }
    });
  </script>
</body>

</html>

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>

style样式绑定

<!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 :style='objStyles'></div>
    <div :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>

v-model双向数据绑定


  <!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>

v-model本质解析

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

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

<body>
  <div id="app">
    <div>{{msg}}</div>
    <input type="text" :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指令的本质: 属性绑定 + 事件绑定

      <input type="text" v-bind:value="msg" v-on:input='handle'>

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

</html>

v-text 和 v-html 和 v-pre

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

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

<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片段填充到标签中，
                但是可能有安全问题  (ajax 加载数据中包含html内容 我们需要直接显示html内容)
                
            3、v-pre用于显示原始信息，跳过编译过程；
                如页面直接显示  {{内容}}
         */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                msg1: '<h1>HTML</h1>'
            }
        });
    </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>
      <!-- 1.如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
      <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); //  <button>点击1</button>
          console.log(event.target.innerHTML); // 点击1
        },
        handle2: function (p, p1, event) {
          console.log(p, p1)
          console.log(event.target.innerHTML)
          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 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">
    // 事件绑定-事件修饰符
    // v-on:click.prevent='handle2'  阻止默认行为
    // v-on:click.stop='handle1'     阻止冒泡
    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>

自定义事件修饰符

<!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>按键修饰符</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.f1='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">
    // 事件绑定-按键修饰符
    // 在密码输入框： 输入a（keyCode=65） 会触发 handleSubmit 事件
    Vue.config.keyCodes.f1 = 65
    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">
    <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])
    // }

    // ............................................................

    /*
      循环结构:
      v-for 遍历对象  <div v-for='(value,key,index) in object'></div>
      v-if 和 v-for 结合使用
      <div v-if='value==12' v-for='(value,key,index) in object'></div>
      v-if可以做条件判断，在遍历的时候使用那些条件满足了，才进行渲染；如果条件不满足就不渲染数据

    */
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          uname: 'zhangsan',
          age: 13,
          gender: 'female'
        }
      }
    });
  </script>
</body>

</html>

tab切换案例：

<!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
    }

    .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>
<!-- 
  案例实现步骤：
  1.实现静态UI效果：用传统的方式实现标签结构和样式
  
  2.基于数据重构UI效果
      将静态的结构和样式重构为基于Vue模板语法的形式
      处理事件绑定和js控制逻辑

  重难点解析：
   通过v-for进行遍历数组的时候：如果需要索引，就将索引一并传过去  v-for='(item,index) in list'
   进行遍历操作的时候：绑定key属性 :key='item.id'

   active：控制标题 和 current：控制图片
   选中哪个元素：哪个元素就添加active 和 current 类名 通过遍历当中的索引和当前索引(自定义)进行对比，从而决定是否显示类名
   需要自定义，记录选项卡当前的索引 currentIndex: 0, 默认是第一个

   点击li的时候触发change事件，并且将数组的索引index通过change事件传递过去,然后赋值给当前的索引 this.currentIndex = index;
   从而实现data数据中：currentIndex 的数值变化

   声明式编程：模板的结构和最终显示的效果基本一致。
   解析：页面呈现的效果：DOM元素对应的结构 和 代码结构 基本一致。
        传统的js拼字符串的方式，拼DOM然后再追加到页面中。

 -->

<body>
  <div id="app">
    <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>

落花流雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础语法

Vue基础语法v-cloak指令的用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> [v-cloak]{ display: none; } </style></head><body&
复制链接

扫一扫