一、vue基础语法总结（三）

1.插值操作

  1. mustache语法：{{}}
  2. v-once
  3. v-html
  4. v-text
  5. v-pre
  6. v-cloak

1、{{}}：还可以使用表达式，例：{{count * 3}}

2、v-once：使用该指令的标签或组件只会被渲染一次，不会随数据的改变而改变，例：<h2 v-once></h2>

3、v-html：某些情况下，我们从服务器获取到的数据可能本身就是一段html代码，如果想要按照HTML格式进行解析，并显示相应的内容，可以使用v-html指令

  • 该指令后面往往跟一个string类型
<div id='app'>
    <h2 v-html="link"></h2>
  </div>

data: {
	link: '<a href="https://www.baidu.com">百度一下</a>'
},

4、v-text：与mustache类似，用于将数据显示在页面中，例：<h2 v-text="message"></h2>

  • 通常情况下，该指令接受一个string类型

5、v-pre：显示原本的mustache语法，例：<h2 v-pre>{{message}}</h2> —> {{message}}

6、v-cloak

2.绑定属性

指令：v-bind，用于绑定一个或多个属性值，或者向另外一个组件传递props值

<h2 v-bind:href="link"></h2> <h2 v-bind:class="cls"></h2>

语法糖 ：(一个冒号)

<h2 :href="link"></h2> <h2 :class="cls"></h2>

1.v-bind绑定类

（1）对象语法：即class后跟的是一个对象（常用）

// 直接通过 {} 绑定一个类
<h2 :class="{style_pink: true}">{{message}}</h2>
// 通过判断，传入多个值
<h2 :class="{style_pink: isTrue, font_40: isTrue}">{{message}}</h2>
// 与普通类共同传入
<h2 class="title" :class="{style_pink: isTrue}">{{message}}</h2>
// 通过方法或计算属性设置较为复杂的类
<h2 :class="getClasses()">你好啊</h2>

（2）数组语法：即class后跟的是一个数组（不常用）

// 注意有无单引号的区别：字符串和变量
<h2 :class="['active','line']">{{message}}</h2>
<h2 :class="[active,line]">{{message}}</h2>

2.v-bind绑定style

// 使用语法
<h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>

<!-- '50px'必须加上单引号,否则会被当成一个变量解析 -->
<h2 :style="{font-size: '50px'}">{{message}}</h2>

3.计算属性

在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示，比如我们有firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}，此时就可以使用计算属性来完成。

计算属性是写在vue实例的computed中

看起来computed和methods都能实现我们的需求，那为什么还要使用computed？

原因就是：计算属性会进行缓存，如果多次使用，只会调用一次，而方法每使用一次就会重新调用

// 调用：无需加小号括号
<h1>{{fullName}}</h1>

computed: {
	fullName () {
	return this.fistName + ' ' + this.lastName
	}
},

计算属性的getter和setter方法

上面代码块中fullName的定义，本质上是在定义计算属性的getter方法

computed: {
    fullName: {
        // setter方法基本不使用
        set(item) {
            console.log(item);
        },
        get() {
            return this.fistName + ' ' + this.lastName
        }
    }
}

4.事件监听

指令：v-on，监听诸如点击、拖拽、键盘等事件

<button v-on:click="counter--">按钮-</button> -->

语法糖：@

<button @click="increase">按钮+</button>

通过methods定义方法时，以供click使用，需要注意参数问题

  • 如果该方法不需要参数，那么方法后的()可以省略
    • 需注意：当方法本身需要一个参数而括号省略时，会将原生事件的event事件对象传入
  • 如果同时需要传入某个参数和event对象时，可以通过$event传入
  • <button @click="btn3Click(option,$event)">按钮3</button>

5.条件判断

条件判断的指令后面跟的都是布尔值（true / false）

  • v-if
  • v-if和v-else
  • v-if和v-else-if和v-else
  • v-show

v-if : v-if 后面的条件为 false时，对应的元素及其子元素不会渲染,也就是不会出现在DOM中

v-if和v-else：当v-if的条件为false时，会渲染v-else所在的元素

v-if和v-else-if和v-else：原理同上

与 if、if else、if else if else原理一致

v-show

v-show与v-if非常相似，也是决定一个元素是否会被渲染到DOM中

区别在于：当v-if为false时，元素不会被渲染到DOM中

​ 而当v-show为false时，仅仅是将元素的display属性设置为none

如何选择：当显示与隐藏频繁切换时，使用v-show

​ 当只有一次切换时，使用v-if

6.循环遍历

指令：v-for

v-for遍历对象

<!-- 直接遍历 获取的是value属性值-->
<li v-for="item in info">{{item}}</li>

<!-- 获取 value 和 key  注意：第一个参数获取的是value,第二个是key -->
<li v-for="(value,key) in info">{{key}}-{{value}}</li>

<!-- 获取value key index -->
<li v-for="(value,key,index) in info">{{index+1}}-{{key}}-{{value}}</li>

v-for遍历数组

<!-- 遍历数组,无下标 -->
<li v-for="item in movies">{{item}}</li>

<!-- 获取下标,第一个为数组元素,第二个为下标 -->
<li v-for="(item,index) in movies">{{index}}-{{item}}</li>

关于上面两段代码中遍历参数的位置，是由vue内部实现规定的

7.表单绑定

指令：v-model

v-model指令来实现表单元素和数据的双向绑定 —> 表单元素的value值

<div id='app'>
    <!-- 双向绑定 -->
    <input type="text" v-model="message">
    {{message}}
</div>

<script src='../../vuejs/vue.js'></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'template',
        },
    });
</script>

v-model其实是一个语法糖，本质上包含两个操作（以上述代码为例）：

  • v-bind绑定一个属性（value）
  • v-on指令给当前元素绑定事件（input）
<input type="text" v-model="message">
等价于
<input type="text" :value="message" @input=" message = $event.target.value">

v-model结合radio

<div id='app'>
    <label for="male">
      <input type="radio" value="男1" name="sex" id="male" v-model="choose">男
    </label>
    <label for="female">
      <input type="radio" value="女1" name="sex" id="female" v-model="choose">女
    </label>
    <h2>选择了：{{choose}}</h2>
</div>

data: {
	choose: ''
}

v-model结合checkbox

当只有一个复选框时：

  • v-model为布尔值：true为默认选中，false为默认不选中
  • 此时input的value并影响v-model的值

当有多个复选框时：

  • 此时v-model对应data中的一个数组
  • 当选中某一个时，就会将input的value添加到数组中
<div id='app'>
    <!-- 当只有一个复选框时 -->
    <label for="ckbox">
      <input type="checkbox" value="此情况v-model绑定的值不受value所影响" id="ckbox" v-model="selected">同意用户协议
    </label>
    <h2>是否选中：{{selected}}</h2>

    <!-- 当有多个复选框时，data中需要时一个数组来进行双向绑定 -->
    <label><input type="checkbox" name="ball" v-model="choose" value="篮球">篮球</label>
    <label><input type="checkbox" name="ball" v-model="choose" value="足球">足球</label>
    <label><input type="checkbox" name="ball" v-model="choose" value="乒乓球">乒乓</label>
    <label><input type="checkbox" name="ball" v-model="choose" value="排球">排球</label>
    <h2>选择了：{{choose}}</h2>
</div>

data: {
	selected: false,
	choose: []
},

v-model结合select

和checkbox一样，select也分为单选和多选两种情况

单选：

  • v-model绑定的是一个值
  • 当选中option中的一个时，会将它对应的value赋值给v-model绑定的值

多选：

  • v-model绑定的是一个数组
  • 选中多个值时，将选中的option对应的value添加到v-model绑定的数组中
posted @ 2021-05-10 20:00  只猫  阅读(150)  评论(0)  编辑  收藏  举报