vue学习笔记

程序员文章站 2022-04-06 08:13:37

...

vue学习笔记

语法基础

v-bind 缩写 :
v-bind 单向数据绑定对象–>html渲染

对于数据对象 a={b:‘22222’}
在文本渲染中v-bind 写法 {{a.b}}
对于数据对象 a={b:‘sasasas’}
想渲染成html 那应该写成
对于标签内部属性应该写成 v-bind:id=“a.b” v-bind:disabled=‘a.b’ v-bind:href=“url” :href=“url” v-bind:[attributeName]=“url”
切换class 根据isActive hasError 切换active ‘text-danger’
v-bind:class="{ active: isActive, ‘text-danger’: hasError }"
动态style activeColor fontSize 都会随对象数据变化
v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px’ }""

v-on

v-on:click=“doSomething” v-on:[eventName]=“doSomething” @click=“doSomething”

v-if

v-if 条件渲染 v-show 条件显示(隐藏的也会渲染) v-if如果不想复用元素要加一个key 唯一

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for

<li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
  <div v-for="item of items"></div>
  
  <div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

v-model
v-model专用于双向数据绑定相当于一个v-bind 加一个v-on:change

组件基础

引入组件

//import后面没有大跨号
//./是当前路径 即同目录下  @/是src下

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
  //引入后必须在components里声明
    ComponentA,
    ComponentC
  },
  // ...
}

定义组件内props属性
props是组件对外开放的属性外部使用组件时候可以传递props包含的属性的值给组件
组件自己不应该对props进行修改

如果传递了一个props里面不存在的属性这个属性会落到组件的根元素上如果属性冲突外部优先级高
不想发生这种情况应该在组件内添加 inheritAttrs: false

假设组件名为 blog-post

//默认传递属性数组
props: ['title']
//用对象格式可以定义类型 如 String Number Boolean Array Object Date Function Symbol 等 不要引号
props: {title:String}
//多定义是否必须
props:{title:{type: String, required: true}}
//多个类型
props:{title:[String, Number]}

//传递属性  静态
<blog-post title="My journey with Vue"></blog-post>
//传递属性 动态
<blog-post v-bind:title="post.title"></blog-post>
<blog-post :title="post.title"></blog-post>

//传递属性 除字符串之外 不分静态动态 都必须用v-bind传递 后面都必须要加引号
<blog-post v-bind:key="42"></blog-post>
<blog-post v-bind:key="true"></blog-post>

自定义事件和v-model实现
数据状态的逆向传递
可以在组件的元素上监听各种自定义的事件, 组件内部自己代码产生推送这些事件达到数据状态的逆向传递

//组件使用
<blog-post @myeve="saveNewState"></blog-post>

//组件内部
//$emit 对外通知事件
this.$emit('myeve');
this.$emit('myeve',e);

// 自定义v-model   前面已经知道了 v-model实际上就是一个v-bind 和一个v-on:change  的合用的语法糖
//v-model 默认绑定的属性是value 对于组件也是一样的,如果你想自定义别人用在你组件上的v-model语法操作的属性和事件那么 在组件内加如下属性
model: {
    prop: 'checked',
    event: 'change'
  },

插槽

//一般组件模板是一个紧凑的html标签 其内部是没有内容的如
<blog-post title="My journey with Vue"></blog-post>
//有内容也不会被解释运行
//插槽的意思就是在模板内接收 放置在标签内部的内容然后渲染
//采用插槽标签作为接收者 <slot></slot>

//例:
//组件模板
<a  v-bind:href="url"  class="nav-link">
  <slot></slot>
</a>

<nnn url="/profile">插槽内容</nnn>

//<slot></slot> 会等价于  插槽内容  四个字
//具名插槽等后面再说

访问
组件内可使用 $root 来访问根元素，$ parent来访问父元素 $refs来访问子元素(前提在子组件上定义ref=‘名称’,然后 $refs.名称)
方法传递
如果父组件的所有亲代或隔代等子组件都想使用一个方法,那么这个方法父组件可以放到provide里子组件用inject接收

//父组件
provide: function () {
  return {
    getMap: this.getMap
  }
}
//子组件
inject: ['getMap']

过渡效果
transition 是一个内部组件将其他会改变的组件包裹在其内部自然就会添加过渡效果

混入
混入类似于java中的继承被混入的对象会继承所有混入对象的方法如果有同名方法子类优先(都被调用)

//引入的是不带大跨号的对象
import initData from '@/mixins/initData'

//定义在混入数组内
mixins: [initData],

声明周期钩子
类似于java的接口是预先定义好的一组函数, 父组件会在特定的时期去调用这些方法

声明周期: 创建前->创建->挂载前->挂载->更新前->更新->(启用停用)->销毁前->销毁
对应方法:beforeCreate create …

vue学习笔记