vue基础知识

陈宏章
111 阅读3分钟

数组的变异方法

  • pop push unshift shift reverse splice sort

vue事件

  • methods：methods中的属性名和data中的属性名不能重复
  • data写的都是vue变量 methods写的都是这个实例用到的方法
  • methods中的方法的this都是当前实例

vue指令

  • v-model=‘变量’ 相当于把这个变量根这个元素绑定在一起了，变量改变内容也会跟着改变
  • v-text=‘text’ 相当于小胡子避免了显示小胡子的毛病
  • v-cloak 后面没有值 就是为了解决小胡子的显示问题，需要配合css使用，原理就是vue模版x渲染之前，走的是普通html，我们写的css样式可以起作用，让元素display none了；当模版渲染完成之后，vue会自动把这个行内属性移除，这时在页面上展示的就是渲染好的html了
  • v-once 后边也没有值 vue对有这个指令的元素 只渲染一次
  • v-pre 后面也没有值 告诉vue 这个标签及其子标签 都不用vue渲染，可以用来提升vue的编译效率
  • v-if 是结构渲染不渲染
  • v-show 是结构已经渲染了，通过display：none来控制显示隐藏

key的作用

  • 此处key的作用相当于身份的标识，若无key则input不会切换会复用，因为渲染的时候只有placeholder发生可改变之前的会复用 所以必须加key

image.png

new Vue的一些事情

  • template:''
  • 指定当前渲染的模版,若无此属性用app作为模版
  • .$mount('#app')若没有el属性和template则会用这个

按键修饰符

  • @keydown.enter='sumbit'

事件修饰符

  • 事件修饰符：@click.prevent='函数名' .stop .once .self (只有点击元素本身才会触发此函数)
  • v-model修饰符:.trim(去除首尾空格) .number(转化为数字,能转的转不能转的则不转) .lazy(没有lazy的时候 vue使用的input事件更新数据，加上之后用的change事件更新数据)

过滤器

  • Vue.filter(‘fn’，function(val){ return -- })

image.png

v-model的实现原理

image.png

Vue中的组件化

  • vue中的组件分为两种，一种是全局组件，一种是私有组件
  • 全局组件： 创建组件后直接在页面中调取使用即可
  • 私有组件需要在页面渲染的时候（new vue的时候）基于components注册一下即可
  • Vue.component([name],[options]):name是组件名
  • 命名规范遵循两种模式
    • kebab-case:base-info 调用
    • PasalCase:BaseInfo 调用[组件在vue中渲染大的时候，所有大写的名字都会变为小写]
    • options是组件的配置项，每一个组件都是一个单独的实例，所以配置项中可以设置的就是vm实例中配置的data/methods。。。
    • 组件名设置为kabab-case模式或者PasalCase模式，在new Vue渲染的视图中只能用 这种方式调取（主要原因是new Vue视图渲染的时候，会把所有大写字母变为小写字母） 但是如果是在template模版视图中，不论是kabab-case还是PasalCase都可以进行调用

image.png

avatar
文章
阅读
粉丝