vue基本指令-CSDN博客

本文链接：https://blog.csdn.net/MercuryWan/article/details/113668021

一、插值操作

1.mustache语法（双大括号）的文本插值

<div id="example">
  <!--只要msg发生了改变，插值处的内容都会更新-->
  <span>{{ msg }}</span>

  <!--不仅仅可以直接写变量，也可以写简单的表达式-->
  <span>{{msg + counter}}</span>
  <span>{{counter * 2}}</span>
</div>
	
<script>
  var vm = new Vue({
    el: '#example',
    data:{
	  msg:"hello"
	  counter:10,
    }
  })
</script>

如果调用的是方法，则方法名后的()不可以省略

2.v-once指令

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

3.展示html

双大括号会将数据直接当作普通的文本，而非 HTML 代码。如果需要解析 HTML，需要使用 v-html 指令

<p>Using mustaches: {{ url }}</p>
<p>Using v-html: <span v-html="url"></span></p>

data:{
	url:"<a href="http://www.baidu.com">百度</a>"
}

4.v-cloak

在某些情况下，比如网络的卡顿等，会导致浏览器直接显示了未编译的mustache标签，设置v-cloak指令，可以让mustache标签编译好后载进行显示。

<span v-cloak>{{ msg }}</span>

<style>
  [v-cloak]{
    display:none;
  }
</style>

二、v-bind的基本使用

v-bind 指令可以用于响应式地更新 HTML属性值

<!--将该元素的 href属性与表达式 url 的值绑定-->
<a v-bind:href="url">...</a>

<!--缩写-->
<a :href="url">...</a>

v-bind动态绑定class（对象语法，使用大括号）

<!--使用键值对，其中键即为类选择器名称，值可以是来自data中的属性-->
<!--  {类名1:boolean,类名2:boolean}  -->
<h2 :class="{active:isActive,line:isLine}">你好</h2>

data:{
  isActive:true，
  isLine:true
}

三、计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

虽然调用方法也可以达到同样的效果，不同的是计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。但是，每当触发重新渲染时，调用方法将总会再次执行函数。

四、v-on的基本使用

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<button v-on:click="addCounter">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>

<!--缩写 （语法糖）-->
<button @click="addCounter">Add 1</button>

如果事件调用的方法没有参数，那么方法名后的()可以不添加
如果事件调用的方法本身是需要一个参数的，但是调用时只写了方法名，这时Vue会默认将浏览器产生的event事件对象作为参数传入方法中
如果方法不仅需要其他参数，还需要event对象，可以使用特殊变量 $event把它传入方法

事件修饰符

<!-- .stop修饰符的使用，阻止事件继续传播，或者阻止事件冒泡 --> 
<a v-on:click.stop="doThis"></a>

<!-- .prevent修饰符的使用，阻止事件的默认方法 -->
<!-- 提交事件后阻止浏览器自动传给服务器，而自己进行处理 -->
<form v-on:submit.prevent="onSubmit"></form> 

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div> 

<!-- 仅当事件是当前元素自身（即不是其内部元素）时触发处理函数 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 按键修饰符-->
<!-- 只有在 key 是 Enter 时调用 submit() -->
<input v-on:keyup.enter="submit">

五、条件渲染

v-if 指令用于条件性地渲染某元素及其子元素，只有指令的表达式返回为真值的时候该内容才会被渲染

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

用户登录方式切换案例

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

如果在输入内容的情况下，选择切换类型，结果将不会清除用户已经输入的内容。

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因为两个模板使用了相同的元素，所以<input> 不会被替换掉，仅仅是替换了它的 placeholder。

如果不想复用元素，只需添加一个具有唯一值的 key attribute 即可，这样每次切换时，输入框都将被重新渲染。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show 的元素始终会被渲染并保留在 DOM 中。只是简单地切换元素的 CSS属性 display。

六、列表渲染

v-for遍历数组

v-for 指令需要使用 item in items 形式的特殊语法，其中 items是源数据数组，而 item则是被迭代的数组元素的别名。v-for还支持一个可选的第二个参数，即当前项的索引，形式为(item, index) in items

v-for 遍历一个对象的属性
- 在遍历对象的过程中，如果只获取一个值，那么获取到的是value：value in object
- 可以提供第二个的参数为对象属性名称 (也就是键名)：(value, name) in object
- 用第三个参数作为索引：(value, name, index) in object
尽可能在使用 v-for 时为每项提供一个唯一与之相对应的 key，从而更好地重用现有元素。
- 例如在列表中插入一个新的元素，diff算法由于无法识别元素，默认是将新元素之后的所有元素全部后移一位。如果在此之前为所有元素均设置了唯一的一个key，则diff算法就可以正确的识别该新元素，找到位置插入即可。

在这里插入图片描述

数组更新检测

（1）变更方法，即调用了这些方法的原数组会发生改变，可以称为数组中响应式的方法

push() 向数组末尾添加若干元素
pop() 把数组的最后一个元素删除
shift() 删除数组的第一个元素
unshift()向数组头部添加若干元素
splice()从指定的索引开始删除若干元素，再从该位置添加若干元素
sort() 对数组进行排序，直接修改当前的元素位置
reverse()反转数组元素，会修改原数组

（2）非变更方法，不会变更原数组，而总是返回一个新数组。例如filter()、concat()和slice()

七、表单输入绑定v-model

用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

<input v-model="message">
<p>Message is: {{ message }}</p>

<!-- v-model原理 -->
<input type="text" :value="message" @input="valueChange">
<p>Message is: {{ message }}</p>

methods: {
    valueChange(event){
		this.message = event.target.value;
	}
}

<!-- 当我们选中每个选项时，会将对应的value值赋值给v-model绑定的数据 -->

<!-- 单选选择框 -->
<div id="example-5">
  <select v-model="selected">
    <!-- 如果v-model初始值未匹配任何选项，<select>元素将被渲染为“未选中”状态，这会使用户无法选择第一个选项。
         所以一般需要提供一个值为空的禁用选项。-->
    <option disabled value="">请选择</option>    
    <option>香蕉</option>
    <option>苹果</option>
    <option>橘子</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

<!-- 多选选择框 -->
 <select v-model="selected" multiple>
  
<!-- 单选按钮 -->
<input type="radio" value="One" v-model="picked">
    
<!-- 复选框 -->
<input type="checkbox" value="Jack" v-model="checkedNames">

修饰符

.lazy ：在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，也就是说，一旦数据发生变化对应data中的数据就自动发生改变。添加 lazy 修饰符，从而转为在 change事件之后进行同步，即让数据在失去焦点或者回车时才会更新。
.number ：在输入框中无论我们输入的是字母还是数字都会被当作字符串类型进行处理，添加 number 修饰符可以将输入值转为数值类型
.trim ：自动过滤输入内容的首尾空白字符