Vue.js（Vue2）学习笔记

2022-01-21  本文已影响0人  甜柚小仙女

一、创建Vue实例

1.创建
实例property和方法

var vm = new Vue({
   // 选项
   el: '#app',
   data: obj,
   created: function(){} // 生命周期钩子
})
// 可以使用$访问vue实例property和方法：vm.$data  、vm.$el

2. 生命周期
beforeCreate->
created->
beforeMount->
mounted->
beforeUpdate->
updated->
beforeDestory->
destroyed

二、模版语法

三、计算属性和侦听器

1. 计算属性：

computed: {
   comProperty1: function(){}
}

2. 侦听器：

 watch: {
    variable: function(newVal, oldVal){}
 }

四、Class与Style绑定

1、class绑定

1. v-bind:class="{active: isActive}" 或者 v-bind:class="classObject" 
2. v-bind:class="[isActive ? cl1 : '', cl2]" 或者 v-bind:class="[{cl1: isActive}, cl2]"
   data:{
     cl1:'active',
     cl2:'danger'
   }

2、style绑定

1. v-bind:style="{display: activeDisplay}" 或者 v-bind:style="{styleObject}" 
data: {
  activeDisplay: ['-webkit-box', '-ms-flexbox', 'flex'] // 只会渲染数组中最后一个被浏览器支持的值
}
2. v-bind:style="[baseStyles, overrideStyles]"

五、条件渲染

1、v-if

2、v-show

六、列表渲染

1、使用：

1. v-for="(item, index) in items" 或者 v-for="item of items" // items是一个数组
2. v-for="(val,name,index) in obj" // obj 是一个对象。按照Object.key()的结果遍历
3. v-for="i in 10" // 遍历1-10
4.// 在组件中使用v-for，使用v-bind将item作为props注入组件内部
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

2、维护状态
列表更新时，如果顺序改变，vue默认不移动元素来匹配顺序。所以应该提供一个唯一的key（数值或字符串）来标记每个节点的身份，从而重用和重新排序现有的元素。
3、数值变更检测
数组方法中改变原数组的方法都会触发视图更新；不会改变原数组只会返回新数组的方法不会触发视图更新，但是可以使用新生成的数组替换掉旧数组
4、注意

七、事件处理

1、使用：

1. v-on:click="counter+=1" 或者 v-on:click="handleClick"
2. v-on:click="handleClick('hello',$event)" //在js中直接调用方法

八、表单输入绑定

1、使用

1. v-model[.modifier]="inputVal"  // 在表单元素上创建双向数据绑定。他会根据空间类型自动选取正确的方法更新元素。

2、工作原理
监听用户输入事件使用元素对应的property更新v-modal绑定的表单值。

3、注意
v-model会忽略元素的value、checked、selected初始值，所以应该通过data选项声明初始值。

九、组件注册

组件命名：1.首字母大写（大驼峰命名法） 2.短横线分隔命名kebab-case
1、 全局注册

Vue.component('my-componenta(组件名)',{
// 选项（除了el，其他根实例的选项都可以用）
  data: function() {
     return {
       a:1
     }
  } // data必须是一个函数
})

new Vue({
el:'#app'
})

<div id="app">
<my-componenta></my-componenta>
</div>

2、局部注册

var ComponentA = {name:'',...}
new Vue({
el:'#app',
components:{'component-a':ComponentA}
})

3、局部注册的组件在其子组件中不可用
如果希望局部注册的组件在子组件中可用,需要这样写：

var ComponentA = {...};
var ComponentB = {
components:{
  'component-a':ComponentA
  }
}

或者：
import ComponentA from './ComponentA.vue'

export default{
components:{
  ComponentA
  }
}

在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

4、注意

十、Prop

1、大小写

2、父组件传递prop

v-bind:title="post.title"
v-bind:post="post"
v-bind="post" // 传递一个对象的所有property

3、子组件接收prop

props: {
  title: String
}
this.title // 访问

4、单向数据流：

5、prop验证

Vue.component({
  props:{
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA:Number,
// 多个可能的类型
    propB:[String,Number],
//必填的字符串
    propC: {
        type: String/Number/Object,
        required: true,
        default: function () {
          return { message: 'hello' }
        },
        // default: 100,
        validator: function (value) {
           // 这个值必须匹配下列字符串中的一个
           return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
    }
  }
})

十一、自定义事件

1、命名
事件用kebab-case命名
2、使用

//监听事件
v-on:my-event = "n += $event"
//或者
v-on:my-event = "myEvent"
methods: {
  myEvent: function (arg) {
    this.n += arg
  }
}
//触发事件
this.$emit('my-event', 1)

3、将原生事件绑定在组件上

4、.sync修饰符

  1. 子组件通过事件来修改父组件的property的情况，推荐以update:myProperName的模式触发事件
this.$emit('update:title',newTitle)

<my-com v-bind:title="doc.myTitle" v-on:update:title="doc.myTitle = $event"></my-com>
// 为了方便起见，提供一个缩写：.sync修饰符
<my-com v-bind:title.sync="doc.myTitle" ></my-com>
// myTitle只能是一个property名，不能是表达式

//用一个对象同时设置多个prop，doc只能是一个property名，不能是一个字面量对象
<my-com v-bind.sync="doc" ></my-com>

十二、插槽

v-slot取代了slot、slot-scope这两个attribute
1、普通插槽

<my-component>abc</my-component>

my-component中：<a><slot>当父组件不提供插槽内容的时候显示</slot></a>

渲染结果： <a>abc</a>

2、具名插槽

1.
<my-component>
    <p>dfg</p>
    <template v-slot="head">
         <h1>12345</h1>
    </template>
/* 废弃的语法
    <template slot="head">
         <h1>12345</h1>
    </template>
*/
    <p>678</p>
</my-component>
my-component中：
<div>
   <header>
      <slot name="head"></slot>
   </header>
   <main>
      <slot></slot>  
   // 没有name默认name=“default”
   </main>
</div>
渲染结果：
<div>
   <header>
      <h1>12345</h1>
   </header>
   <main>
     <p>dfg</p>
     <p>678</p>
   </main>
</div>
2.插槽名也可以是动态的
  <template v-slot:[dynamicSlotName]>
  </template>
3.插槽名缩写
(v-slot:) => (#) 
 v-slot:header 可以被重写为 #header
‘#’ 后面必须有参数，否则无效

3、作用域插槽

1.在子组件的<slot>元素上绑定需要传的值，拿上述例子：
   <header>
      <slot name="head" v-bind:user="user"></slot>
   </header>
2.在父组件插槽中使用v-slot定义子组件提供的插槽prop的名字并使用
   <template v-slot:head="slotProps">
       <h1>12345</h1>
       {{slotProps.user.xxx}}
   </template>
  /*废弃语法
  <template slot="head" slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
*/
 //  默认插槽需要用在组件标签上。不带参数的被指定为对应默认插槽相当于v-slot:default="slotProps" 
   <my-component v-slot="slotProps">
     <p>dfg</p>
     <p>{{slotProps.user.xxx}}</p>
   </my-component>
3.插槽prop可以解构、重命名，也可以定义默认值
 v-slot="{ user: person }"  // 使用：{{ person.firstName }}
 v-slot="{ user = { firstName: 'Guest' } }" // 使用：{{ user.firstName }}

十三、动态&异步组件

1、动态组件

2、异步组件

1. 局部注册
new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})
2.全局注册
Vue.component(
  'async-webpack-example',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)
3. 处理加载状态
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

Vue.component(
  'async-webpack-example',  AsyncComponent
)

十四、处理边界情况

1、访问根实例

this.$root

2、访问父组件实例

this.$parent

3、访问子组件实例

ref="inputRef"
this.$refs.inputRef

4、依赖注入

1. 祖先组件：
provide: function () {
  return {
    getMap: this.getMap
  }
}
2.后代组件设置inject选项接收数据：
inject: ['getMap']

十五、混入

1. 基础使用
// 定义混入对象
var myMixin = {
  created: function() {},
}
// 使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})
2. 全局混入
Vue.mixin(myMixin)

1.组件和混入对象含有同名选项：

十六、自定义指令

1. 全局注册
Vue.directive('focus', {
//提供如下钩子函数
// bind
// inserted
//update
//componentUpdated
//unbind
})
<input v-focus> //使用
2. 局部注册
directives: {
  focus: {
   //提供的钩子函数同上
  }
}
3. 给指令传参/值
.   例如 v-my-directive:foo 中，参数为 "foo"。
        通过binding中的arg参数获取 =》 binding.arg
.   例如：v-my-directive="1 + 1" 中，绑定值为 2，也可以通过对象字面量传多个值
        通过binding.value获取

el:指令绑定的元素
binding：一个对象，只读
vnode：只读
oldVnode：只读

十七、渲染函数&JSX

vue模板也会被编译成渲染函数
1、渲染函数

  Vue.component('name',{
      render: function(createElenment[, context]) {
             return createElement('h1',{attrs},[vnodes])    //返回一个VNode
      }
   })
1.createElement参数
   args1: 标签名、组件选项对象、或者resolve前两个任意一个的async函数
   args2: 包含模板中attribute的数据对象（class、style、attrs、props、domProps、 
             on、nativeOn、directives、slot、ref、key、scopedSlots、refInFor）
   args3: 由‘createElement()’构建的子级虚拟节点、文本节点。VNode唯一
2.创建的组件如果是函数式组件（无状态、没有生命周期、无实例(this上下文)），提供context作为上下文
3.context是一个对象，包含（props、children、slots()、data等）

2、JSX

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})
// h 作为 createElement的别名

3、slots() VS children

十八、过滤器

1、用途

2、定义

1、全局定义
Vue.filter('myFilter',function(){})
2、局部定义
filter选项
filter: {
   myFilter: function(){}
}

3、使用

1、插值
{{ msg | myFilter('arg1',arg2) | myFilterA}}
// myFilter接收三个参数 msg、‘arg1’(普通字符串)、arg2
// myFilterA 接收 myFilter的返回值作为参数
2、v-bind表达式
v-bind:id="id | myFilter"
上一篇下一篇

猜你喜欢

热点阅读