Vue

Vue基础语法

"vue"

Posted by Cosmo-Ma on November 15, 2019

“🙉🙉🙉 ”

v-html

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

  • 如果我们直接通过来输出,会将HTML代码也一起输出。
  • 但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。 如果我们希望解析出HTML展示
  • 可以使用v-html指令
  • 该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染 ```html

</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
``` ### 检测数组更新 因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。 Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。 - push() - pop() 删除数组中的最后一个元素 - shift() 删除数组中的第一个元素 - unshift() 在数组最前面添加元素 - splice() - sort() - reverse() ```html <!DOCTYPE html> Title
<button @click="btnClick">按钮</button>
```