vue基础篇

2024年5月20日 111次阅读 来源: 好奇哥

使用vue的好处

  • 不用直接修改html

  • 单文件组件css选择器可以只限于当前组件

  • 模块化开发

遵守

  • 直接使用单文件组件开发

  • 所有逻辑和数据都写在相应选项里

  • 每一个组件都是独立存在的，请明确定义相关的交互接口：props，events，slots

渲染

渲染就是新建DOM元素并插入到DOM，vue会将模版编译成render函数，所以当存在render选项时，模版会被忽略。

模版语法

放弃内联表达式。

Text

<span>Message: {{ msg }}</span>

Html

<div v-html="rawHtml"></div>

Attrs

<div :id="dynamicId"></div>

Events

<a @click="doSomething">

可以使用修饰符，但要注意顺序，不同顺序效果不同

阻止所有点击

<div @click.prevent.self="doThis"></div>

阻止自身点击

<div @click.self.prevent="doThis"></div>

指令

使用v-if，v-for等指令达到不同的功能，还可以自定义指令

computed vs watch vs methods

  1. 计算属性是在原来值的基础上做一些修改。

  2. 观察者是当值变化时做另外一些事情。

  3. 方法是定义你所需要用的函数，如事件handle，功能性函数等。

Class 与 Style 绑定

class

<div :class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

style

<div :class="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

v-if v-show v-for

可以使用template渲染一组元素

  1. v-if根据条件动态渲染

  2. v-show无论如何都会渲染，根据条件进行display

  3. v-for可以使用多个参数获取键值对索引

key

当使用key时，必须设置兄弟元素唯一的key，当key排列顺序变化时，兄弟元素会重新排列，而当key的值变化时，这个元素会被重新渲染。

v-model

v-model用来对数据和输入值进行双向绑定，会根input类型返回不同的输入值类型。默认是input事件，可以通过修饰符改为change事件。

使用组件

区别不同的组件只是选项的不同而已，每个组件就是一个类。每个组件只有一个根元素，传递给组件的非prop属性都会添加到这个根元素上，但如果根元素有相同的属性就会被替换。可以使用inheritAttrs来阻止添加，无论是否添加都可以用$attrs拿到属性，class和style无论如何都会做合并 (merge) 操作。

prop是输入接口，它会被父组件随时传来的新值替换。
event,slots是输出接口。

prop双向绑定

<comp :foo.sync="bar"></comp>

更新值时使用

this.$emit('update:foo', newValue)

动态添加绑定数据

vue不允许添加根级数据，但可以添加嵌套对象，通过vue.set
当绑定的数据发生变异时，会更新视图。

异步更新DOM

vue会在时间循环末尾才修改DOM，使用Vue.nextTick可以在DOM更新后执行回调。

    原文作者：好奇哥
    原文地址: https://segmentfault.com/a/1190000011140754
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞