Vue

Vue基础语法

"vue"

Posted by Cosmo-Ma on November 15, 2019

v-html

某些情况下,我们从服务器请求到的数据本身就是一个HTML代码

  • 如果我们直接通过来输出,会将HTML代码也一起输出。
  • 但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。 如果我们希望解析出HTML展示
  • 可以使用v-html指令
  • 该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染
1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
 <h2 v-html="link"></h2>
<div>

<script>
 let app = new Vue{
  el:'#app',
  data:{
   link: '<a herf="http:/www.baidu.com">百度一下</a>'
  }
 }
 <script>

v-text

  • v-text作用和Mustache一致:
  • v-text通常情况下,接受一个string类型
1
2
<h2 v-text="message"></h2>
<h2><h2>

v-pre

v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。 比如下面的代码:

  • 第一个h2元素中的内容会被编译解析出来对应的内容
  • 第二个h2元素中会直接显示

    v-bind

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

  • 比如动态绑定a元素的href属性
  • 比如动态绑定img元素的src属性 这个时候,我们可以使用v-bind指令:
  • 作用:动态绑定属性
  • 缩写::
  • 预期:any (with argument) Object (without argument)
  • 参数:attrOrProp (optional)

下面,我们就具体来学习v-bind的使用。 v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值(这个学到组件时再介绍) 在开发中,有哪些属性需要动态进行绑定呢?

  • 还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等 比如通过Vue实例中的data绑定元素的src和href,代码如下: ```html
Vuejs 官网
</body> </html> ``` ### 每个计算属性都包含一个getter和一个setter 在上面的例子中,我们只是使用getter来读取。 在某些情况下,你也可以提供一个setter方法(不常用)。 在需要写setter的时候,代码如下: ```html <!DOCTYPE html> Title

``` 我们可能会考虑这样的一个问题:methods和computed看起来都可以实现我们的功能,那么为什么还要多一个计算属性这个东西呢? 原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。 ## 事件监听 在前端开发中,我们需要经常和用于交互。 - 这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等 - 在Vue中如何监听事件呢?使用v-on指令 v-on介绍 - 作用:绑定事件监听器 - 缩写:@ - 预期:Function | Inline Statement | Object - 参数:event ### v-on的基础用法 这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用 下面的代码中,我们使用了v-on:click="counter++” 另外,我们可以将事件指向一个在methods中定义的函数 ```html <!DOCTYPE html> Title

<button @click="increment">+</button> <button @click="decrement">-</button>
``` ### v-on参数 情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。 但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去 情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。 ```html <!DOCTYPE html> Title
<button @click="btn1Click()">按钮1</button> <button @click="btn1Click">按钮1</button> <button @click="btn2Click">按钮2</button> <button @click="btn3Click(abc, $event)">按钮3</button>
``` ### v-on修饰符 在某些情况下,我们拿到event的目的可能是进行一些事件处理。 Vue提供了修饰符来帮助我们方便的处理一些事件: - .stop - 调用 event.stopPropagation()。停止冒泡 - .prevent - 调用 event.preventDefault()。阻止默认行为 - .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 - .native - 监听组件根元素的原生事件。 - .once - 只触发一次回调。 ```html <!DOCTYPE html> Title
<div @click="divClick"> aaaaaaa <button @click.stop="btnClick">按钮</button>

<input type="submit" value="提交" @click.prevent="submitClick">
<input type="text" @keyup.enter="keyUp"> <button @click.once="btn2Click">按钮2</button> </div> ``` ## 条件判断 v-if、v-else-if、v-else v-if的原理: - v-if后面的条件为false时,对应的元素以及其子元素不会渲染。 - 也就是根本没有不会有对应的标签出现在DOM中。 ```html <!DOCTYPE html> Title

优秀

良好

及格

不及格

``` 我们来做一个简单的小案例: 用户再登录时,可以切换使用用户账号登录还是邮箱地址登录。 ```html <!DOCTYPE html> Title
<button @click="isUser = !isUser">切换类型</button>
``` 小问题: - 如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。 - 但是按道理讲,我们应该切换到另外一个input元素中了。 - 在另一个input元素中,我们并没有输入内容。 为什么会出现这个问题呢? - 这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。 - 在上面的案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了。 解决方案: - 如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key - 并且我们需要保证key的不同 ## v-show v-show的用法和v-if非常相似,也用于决定一个元素是否渲染: v-if和v-show对比 v-if和v-show都可以决定一个元素是否渲染,那么开发中我们如何选择呢? - v-if当条件为false时,压根不会有对应的元素在DOM中。 - v-show当条件为false时,仅仅是将元素的display属性设置为none而已。 开发中如何选择呢? - 当需要在显示与隐藏之间切片很频繁时,使用v-show - 当只有一次切换时,通过使用v-if ## 循环遍历 当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。 - v-for的语法类似于JavaScript中的for循环。 - 格式如下:item in items的形式。 我们来看一个简单的案例: 如果在遍历的过程中不需要使用索引值 - v-for="movie in movies" - 依次从movies中取出movie,并且在元素的内容中,我们可以使用Mustache语法,来使用movie 如果在遍历的过程中,我们需要拿到元素在数组中的索引值呢? - 语法格式:v-for=(item, index) in items - 其中的index就代表了取出的item在原数组的索引值。 ### v-for遍历对象 v-for可以用户遍历对象: 比如某个对象中存储着你的个人信息,我们希望以列表的形式显示出来。 ```html <!DOCTYPE html> Title
  • -
  • --
``` ### 组件的key属性 官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。 为什么需要这个key属性呢(了解)? - 这个其实和Vue的虚拟DOM的Diff算法有关系。 - 当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点 - 我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的。 - 即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率? 所以我们需要使用key来给每个节点做一个唯一标识 - Diff算法就可以正确的识别此节点 - 找到正确的位置区插入新的节点。 所以一句话,**key的作用主要是为了高效的更新虚拟DOM。** ```html <!DOCTYPE html> Title
    <li v-for="item in letters" :key="item"></li>
``` ### 检测数组更新 因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。 Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。 - push() - pop() 删除数组中的最后一个元素 - shift() 删除数组中的第一个元素 - unshift() 在数组最前面添加元素 - splice() - sort() - reverse() ```html <!DOCTYPE html> Title
<button @click="btnClick">按钮</button>
```