vue记录

Posted 2020-11-13 daixixi

vue梳理

模板语法

样式设置

方法与计算属性和侦听器

条件渲染和列表渲染

事件处理

• 事件定义和缩写
  使用v-on监听事件，从而触发对应的方法。形式为v-on:click="方法名或者表达式" click可以是任意的事件名称

<template>
    <div class="hello">
        <button @click="testClick">click me</button>
        <div class="box">
            <p :title='title'>我是内容</p>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data() {
      return {
        title: 0,
        x: 1
      }
    },
    methods: {
      testClick() {
        window.console.log("hello world")
        this.title = this.x++
      }
    }
  }
</script>

• 内联写法

  < button @click="testClick(msg)" > click me </button >

如何得到触发的事件对象呢？
< button @click="testClick(msg, $event)" > click me </button >

event打印出来, 发现就是原生的事件对象，在js中原生的事件对象具有很多可用的细节 比如： 针坐标在哪而？哪个键被按了？等等

• 事件修饰符
  在vue中尽量避免去操作DOM事件，而在事件处理中添加修饰符可以很好的实现一些特殊的要求： 比如（event.preventDefault 和 event.stopPropagation）这些。
  在vue中提供了多个修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<input v-on:keyup.page-down="onPageDown">

表单输入

动态绑定原理

组件

组件将数据等不可被复用或者说是具有实例性质的留给外部，里面只需要处理或者展示

这样的话就需要在调用它的地方给他传递数据，组件进行接收和处理，还有一种情况，使用这个组件的父组件里想要在组件中间添加内容的时候，我们可以在组件内预备插槽(slot)让其可以在有内容的时候被显示。

过渡和动画

自定义指令

vuex

通过vue-cli生成的时候如果选择了vuex会自动添加而不需要额外安装，使用vuex解决组件之间的数据共享，多个组件共用实时更新的数据很有用处，但是也会出现互相影响的情况，所以我们可以使用模块化将其隔离开来.

我们先从官网的介绍开始了解

// store.js
    import Vue form 'vue'
    improt Vuex form 'vuex'
    Vue.use(Vuex)

    const store = new Vuex.Store({
        state : {
            isOk: true
        }
        
       mutations : {
            checkOk:  state  => {
                return state.isOk
        },
            setOk:  state => {
                state.isOk = !state.isOk
        }
    })
    export default store
    
// main.js
    import Vue from 'vue'
    import App from './App.vue'
    import store from './store'
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
      store
    }).$mount('#app')
    
// a.vue
// 通过vuex中的数据控制是否显示p标签
<template>
   < div>
        <button @clicl='setOk'>是否显示</button>
        <p v-if="{{$store.state.isOk}}">hello world</p>
   </ div>
</template>

import {mapMutations} from 'vuex'
export default {
    // ...
    methods: {
        ...mutations {
            'isOK',
            'setOk'
        }
    }
}

其他的类似，但是值得注意的是，mutations是同步更改state里的值，而当一个请求时异步的时候往往并不得到效果，所以有了action,他可以在异步请求完成后通过提交mutations来更改state。