脚本宝典收集整理的这篇文章主要介绍了

vue基础篇

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

使用vue的好处

  • 不用直接修改html

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

  • 模块化开发

遵守

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

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

  • 每一个组件都是独立存在的,请明确定义相关的交互接口:propseventsslots

渲染

渲染就是新建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-ifv-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更新后执行回调。

总结

以上是脚本宝典为你收集整理的

vue基础篇

全部内容,希望文章能够帮你解决

vue基础篇

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过