当前位置：首页 » 《随便一记》 » 正文

Vuejs第二篇（Vue基础语法）_m0_57249797的博客

21 人参与  2021年12月26日 13:08  分类 : 《随便一记》  评论

点击全文阅读


一、内容概述：

  • 插值操作
  • 绑定属性
  • 计算属性
  • 事件监听
  • 条件判断
  • 循环遍历
  • 阶段案例
  • v-model

二、插值操作-mustache语法（掌握）

如何将data中的文本数据，插入到HTML中呢？

  • 我们已经学习过了，可以通过Mustache（{{}}）语法（也就是双大括号）
  • Mustache：胡子/胡须

mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},welcome you</h2>
    <!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName + '   ' + lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const vue = new Vue({
    el: '#app',
    data: {
      message: 'hello Vue!',
      firstName: '你好',
      lastName: 'Vue',
      counter: 100
    }
  });
</script>

</body>
</html>

结果：
在这里插入图片描述

三、插值操作-其他指令使用（掌握）

v-once //值只能使用一次
在这里插入图片描述

在这里插入图片描述

v-html //解析带有标签的字符串
在这里插入图片描述

结果：
在这里插入图片描述

v-text //展示文本不解析标签，且会覆盖标签中原有的文本
在这里插入图片描述

结果：
在这里插入图片描述

v-pre //原封不动的显示文本（不解析）
在这里插入图片描述

结果：
在这里插入图片描述

v-cloak //未解析的情况不会显示（解决闪烁问题）

了解即可

四、v-bind的基本使用（掌握）

前面我们学习的指令主要作用是将值插入到我们模板的内容当中
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定

  • 比如动态绑定a元素的href属性
  • 比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写：：
预期：any（with argument）| Object（without argument）
参数：attrOrProp（optional）

下面，我们就来具体学习v-bind的使用

v-bind基础

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值（这个学到组件时再介绍）
在开发中，有哪些属性需要动态进行绑定呢？

  • 还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

比如通过Vue实例中的data绑定元素的src和href，代码如下：
在这里插入图片描述
语法糖简写：（用 ：代替）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--错误的做法：这里不可以使用mustache语法-->
    <!--<img src="{{imgURL}}" alt="">-->
    <!--正确的做法:使用v-bind指令-->
    <img :src="imgURL" alt="">
    <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL:'https://img2.baidu.com/it/u=2464877933,1986620259&fm=26&fmt=auto',
      aHref:'http://www.baidu.com'
    }
  });
</script>   
</body>
</html>

结果：
在这里插入图片描述

五、v-bind动态绑定class【对象语法】（掌握）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--<h2 :class="active">{{message}}</h2>-->
        <!--<h2 :class="{类名1:true,类名2:boolean}">{{message}}</h2>-->
        <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
        <button v-on:click="btnClick">按钮</button>//按钮来控制类是否绑定
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          isActive:true,
          isLine:false
        },
        methods:{
          btnClick:function () {
            this.isActive=!this.isActive
          }
        }
      });
    </script>
</body>
</html>

在这里插入图片描述
不需要通过vue动态改变的class可以直接写出来：

<h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2>//不需要通过vue动态改变的class可以直接写出来

改进：
在这里插入图片描述

总结：
请添加图片描述

六、v-bind绑定class【数组语法】（掌握）

通过上述案例，我们知道绑定class有两种方式：

  • 对象语法
  • 数组语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 class="title" :class="['active','line']">{{message}}</h2>
    <h2 class="title" :class="[active,line]">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active:'aa',
      line:'bb'
    },
    methods:{
      getClasses:function () {
        return [this.active,this.line]
      }
    }
  });
</script>
</body>
</html>

在这里插入图片描述

七、v-bind和v-for结合的作业布置（完成）

请看后续。。。

八、v-bind绑定style(一)【对象语法】（掌握）

也有两种语法：对象语法与数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<h2 :style="{key(css属性名):value(属性值)}">{{message}}</h2>-->
    <!--'50px'必须加上引号，否则是当做一个变量去解析两种写法皆可，如果不用驼峰命名法就必须加引号，否则-将被解析为减号-->
    <h2 :style="{'font-size':'50px'}">{{message}}</h2>
    <h2 :style="{fontSize:'50px'}">{{message}}</h2>
    <!--以变量名传入，两种方式-->
    <h2 :style="{fontSize:finalSize}">{{message}}</h2>
    <h2 :style="{fontSize:finalSize2+'px'}">{{message}}</h2>
    <!--多属性-->
    <h2 :style="{fontSize:finalSize2+'px',color:finalColor}">{{message}}</h2>
    <!--抽象为方法-->
    <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize:'50px',
      finalSize2:50,
      finalColor:'red'
    },
    methods:{
      getStyles:function () {
        return {fontSize:this.finalSize2+'px',color:this.finalColor}
      }
    }
  });
</script>
</body>
</html>

结果：
在这里插入图片描述

九、v-bind绑定style(二)【数组语法】（了解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          baseStyle:{backgroundColor:'red'},
          baseStyle2:{fontSize:'20px'}
        }
      });
    </script>
</body>
</html>

在这里插入图片描述

十、计算属性的基本使用（掌握）

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

  • 比如我们有fristName和lastName两个变量，我们需要显示完整的名称
  • 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}

我们可以将上面的代码换成计算属性：

  • 计算属性是写在实例的computed选项中的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
     firstName:'小',
     lastName:'明'
    },
    computed:{//写计算属性的函数
      fullName:function () {
        return this.firstName+' '+this.lastName
      }
    }
  });
</script>
</body>
</html>

十一、计算属性的复杂操作（掌握）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>总价格:{{totalPrice}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          books:[
            {id:110,name:'Unix编程艺术',price:119},
            {id:111,name:'代码大全',price:105},
            {id:112,name:'深入理解计算机原理',price:98},
            {id:113,name:'现代操作系统',price:87}
          ]
        },
        computed:{//相比于methods（methods调用几次就执行几次，是没有缓存的，性能较低）computed只执行一次，有缓存(起名字尽量为名词)
          //高阶函数：filter、map、reduce
          totalPrice:function () {
            let result=0;
            for (let i=0;i<this.books.length;i++){
              result+=this.books[i].price;
            }
            return result;
          }
        }
      });
    </script>
</body>
</html>

结果：
在这里插入图片描述

十二、计算属性setter和getter（理解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>{{fullName}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          firstName:'Kobe',
          lastName:'Bryant'
        },
        computed:{
         /* fullName:function () {//这是简写
            return this.firstName+' '+this.lastName;
          }*/
          fullName:{//完整写法（理解即可）
            // set:function () {//计算属性一般是没有set方法，只读属性
            //
            // },
            get:function () {
                return this.firstName+' '+this.lastName;
            }
          }
        }
      });
    </script>
</body>
</html>

十三、计算属性和methods的对比（掌握）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--1.直接拼接,语法过于繁琐-->
        <h2>{{firstName}} {{lastName}}</h2>
        <!--2.通过定义methods-->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <!--3.通过计算属性-->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>

    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          firstName:'Kobe',
          lastName:'Bryant'
        },
        methods:{
          getFullName:function () {
            console.log('getFullName')
            return this.firstName+' '+this.lastName;
          }
        },
        computed:{
          fullName:function () {
            console.log('fullName')
            return this.firstName+' '+this.lastName;
          }
        }
      });
    </script>
</body>
</html>

在这里插入图片描述
很明显计算属性效率高（只会执行一次，有缓存）！！！！

十四、块级作用域-let和var（掌握）

事实上var的设计可以看成JavaScript语言设计上的错误，但这种错误多半不能修复和移除，需要向后兼容

  • 大概十年前，Brendan Eich就决定修复这个问题，于是他添加了一个新的关键字：let
  • 我们可以将let看成更完美的var

块级作用域

  • JS中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关
  • 针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    //ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们必须借助于function的作用域来解决应用外面变量的问题
    //ES6中，加入了let，let它是有if和for的块级作用域
    // //1.变量作用域：变量在什么范围内是可用的
    // {
    //   var name='why';//var没有块级作用域
    //   console.log(name);
    // }
    // console.log(name)//原则上不能访问
    //2.没有块级作用域引起的问题(if的块级)
    // var func;
    // if(true){
    //   var name='why';
    //   func=function () {
    //     console.log(name);
    //   }
    //   // func();
    // }
    // name='kobe'
    // func();
    // // console.log(name)

    //for循环也是没有作用域的
    // var btns=document.getElementsByTagName('button');
    // for(var i=0;i<btns.length;i++){
    //     btns[i].addEventListener("click",function () {
    //       console.log('第' + i + '个按钮被点击');
    //     })
    // }
    //为什么闭包可用解决（因为函数是一个作用域）
    // var btns=document.getElementsByTagName('button');
    // for(var i=0;i<btns.length;i++){
    //   (function (i) {
    //     btns[i].addEventListener("click",function () {
    //       console.log('第' + i + '个按钮被点击');
    //   })
    //   })(i)
    // }
    //正确写法:
    const btns=document.getElementsByTagName('button');
    for(let i=0;i<btns.length;i++){
      (function (i) {
        btns[i].addEventListener("click",function () {
          console.log('第' + i + '个按钮被点击');
        })
      })(i)
    }
</script>
</body>
</html>

十五、三种方案对比-ES5没有闭包-有闭包-ES6的let（理解）

var声明的是全局变量，let是局部变量

十六、const的使用和注意点

const关键字

  • 在很多语言中已经存在，比如c/c++中，主要的作用是将某个变量修饰为常量
  • 在JavaScript中也是如此，使用const修饰的标识符为常量，不可以再次赋值

什么时候使用const呢？

  • 当我们修饰的标识符不会被再次赋值的时，就可以使用const来保证数据的安全性
  • 建议在ES6开发中，优先使用const，只有需要改变某一标识符的时候才使用let

const的注意：
一、不可再次赋值
二、const修饰的标识符必须赋值
三、常量的含义是指向的对象不能修改，但是可以改变对象内部的属性

十七、ES6对象字面量增强写法（掌握）

ES6中，对对象字面量进行了很多增强
什么叫字面量呢？

<script>
    const obj={};//这样的写法就叫对象的字面量
</script>

属性简写

ES5的写法:

    const name='why';
    const age=18;
    const height=1.88;
    //将上面属性写入对象中
    //曾经的写法
    const obj={
      name:name,
      age:age,
      height:height
    }
    console.log(obj)

在这里插入图片描述
ES6增强写法：

 const obj={
      name,age,height
    }
    console.log(obj)

在这里插入图片描述
函数简写：

    //函数的增强写法
    //ES5:
    const obj={
      run:function () {

      },
      eat:function () {

      }
    }
    //ES6:
    const obj2={
      run(){
        
      },
      eat(){
        
      }
    }

JavaScript仍然存在缺陷，有以下升级版:
Angular---->google
TypeScript---->microsoft—>（类型检测功能）
flow---->(facebook)

十八、v-on的基本使用和语法糖（掌握）

在前端开发中，我们需要经常和用户交互

  • 这个时候，我们就必须监听事件发生的时间，比如切换，拖拽，键盘事件等等
  • 在Vue中如何监听事件呢？使用v-on指令

v-on介绍

  • 作用：绑定事件监听器
  • 缩写：@
  • 预期：Function| Inline Statement| Object
  • 参数：event
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{counter}}</h2>
    <button @click="increment()">+</button>
    <button @click="decrement()">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods:{
      increment(){
        this.counter++;
      },
      decrement(){
        this.counter--;
      }
    }
  });
</script>
</body>
</html>

十九、v-on的参数传递问题（掌握）

  • 当通过methods中定义方法，以供@click调用时，需要注意参数问题：

  • 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加

    • 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去

  • 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--事件调用的方法没有参数-->
        <button @click="btn1Click()">按钮1</button>
        <button @click="btn1Click">按钮2</button>

        <!--在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，
        Vue会默认将浏览器产生的event事件对象作为参数传入到方法-->
       <!-- <button @click="btn2Click(123)">按钮2</button>
        <button @click="btn2Click()">按钮2</button>-->
        <button @click="btn2Click(111)">按钮2</button>

        <!--方法定义时，我们需要event对象，同时又需要其他参数-->
        <!--在调用方法时，如何手动的获取到浏览器参数的event对象:$event-->
        <button @click="btn3Click(abc,$event)">按钮三</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          abc:123
        },
        methods:{
          btn1Click(){
            console.log("btn1Click")
          },
          btn2Click(a){
            console.log("-----",a)
          },
          btn3Click(abc,event){
            console.log("::::",abc,event);
          }

        }
      });
    </script>

</body>
</html>

在这里插入图片描述

二十、v-on修饰符

  • 在某些情况下，我们拿到event的目的可能是进行一些事件处理
  • Vue提供了修饰符来帮助我们方便的处理一些事件：
    • .stop – 调用 event.stopPropagation()
    • .prevent – 调用 event.preventDefault()
    • .(keyCode | keyAlias) – 只当事件是从特定键触发时才触发回调
    • .native – 监听组件根元素的原生事件
    • .once – 只触发一次回调

.stop修饰符阻止事件冒泡：
在这里插入图片描述

不用修饰符的情况下点击按钮：
在这里插入图片描述
加上修饰符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div @click="btn1Click()">
        父盒子
        <button @click.stop="btn2Click()">按钮</button>
    </div>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods:{
      btn1Click(){
        console.log("btn1Click")
      },
      btn2Click(){
        console.log("btn2Click")
      }
    }
  });
</script>
</body>
</html>

再次点击按钮，不再冒泡:
在这里插入图片描述
.prevent修饰符阻止默认事件：
在这里插入图片描述
在这里插入图片描述
.keyAlias监听键帽的点击（keyAlias是一系列事件）：
在这里插入图片描述

以enter为例：
在这里插入图片描述
在这里插入图片描述
.once只触发一次修饰符：
在这里插入图片描述
在这里插入图片描述

休息，后续待更新。。。


点击全文阅读


本文链接：http://zhangshiyu.com/post/32159.html

属性  按钮  语法  
<< 上一篇 下一篇 >>

  • 评论（0）
  • 赞助本站

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

  • 被送去新娘训练营五年，我终于学乖了是什么小说林语瑶陈思思全本免费阅读
  • 主角姜娅傅铮小说末世：真大佬她有百亿物资免费阅读
  • 已完结小说《刚穿越，我就抢婚了冷戾王爷》全文免费阅读
  • 小说《游行现世，我扶苏大兴秦朝！》全文免费阅读
  • 隐世战龙小说，隐世战龙叶星河方晓徐妃琼
  • 抖音小说《被送去新娘训练营五年，我终于学乖了》主角林语瑶陈思思全文小说免费阅读
  • 抖音小说西游：我在车迟国当倒爷，主角王莽哪吒最后结局小说全文免费
  • 独家重生九零，小妈不娇气小说-主角徐铁柱王巧玲全文免费阅读
  • 主角沈初云慕凌风小说爆款《我带超市穿荒年，娇养美强惨战王》完整版小说
  • 九天御龙诀龙敖龙啸敖儿小说在线全文免费阅读
  • 《校园透视霸王》小说全文在线试读，《校园透视霸王》最新章节目录
  • 反夺舍：我在都市疯狂修仙岳中海张青玉海哥小说在线全文免费阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1