Vue

vue学习

2019-08-25  本文已影响0人  栀璃鸢年_49a3

vue

1.1 vue指令

1.1.1 v-text

1.1.2 v-html

1.1.3 v-if

1.1.4 v-show

    <div v-show="Boolean">显示</div>

1.1.5 v-for

    <div v-for="(item,index) in arr" :key='index'>{{index}}=>{{item}}</div>

1.1.6 v-on

    <div v-on:click="btn">点击弹窗</div>

1.1.7 v-bind

    <div v-bind:style="sty">zz</div>
    <div v-bind:class="className">zz</div>

1.1.8 v-model

    <input type="text" v-model="ivalue">
    <div>{{ivalue}}</div>

1.1.9 v-slot


- 匿名插槽(单个插槽)
    <div id="app">
        <div>我是父</div>
        <v-a>
            <div>显示</div>
        </v-a>
    </div>
    components:{
           'v-a':{
               template:"<div>我是子组件<slot>只有在没有要分发的内容时才会显示</slot></div>"
           }
        }
 - 具名插槽
    <div id="app">
        <div>我是父</div>
        <v-a>
            <div>显示</div>
            <div slot='aa'>aa</div>
            <div slot='bb'>bb</div>
        </v-a>
    </div>
    components:{
           'v-a':{
               template:"<div>我是子组件<slot name='aa'>aa slot</slot> <slot></slot> <slot name='bb'></slot></div>"
           }
        }
- 作用域插槽
     <div id="app">
        <div>我是父</div>
        <v-a>
            <div>显示</div>
            <template v-slot='pr'>
                <div>{{pr.msg}}</div>
            </template>
        </v-a>
    </div>
    components:{
        'v-a':{
             template:"<div>我是子组件<slot msg='啊哈有'></slot></div>"
        }
    }

1.1.10 v-pre

    <div v-pre>不会编译{{ivalue}}</div>

1.1.11 v-cloak

1.1.12 v-once

    <div v-once>只更新一次{{ivalue}}</div>

??

ref在那块使用 在组件挂载之后使用 mounted
对象的空指针为null 返回为undefined

子组件方法在
self
this.$refs.子组件.方法

1.2 特殊特性

1.2.1 key

场景：

   <transition>
 <span :key="text">{{ text }}</span>
   </transition>

当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。

1.2.2 ref

ref的生命周期

    <!-- 子组件在父挂载 -->
    <once ref="once"></once>
    this.$refs.once.方法

    <!-- 在dom中 -->
    <div ref="dom"></div> 
    this.$refs.dom

1.2.3 is ??

用于动态组件且基于 DOM 内模板的限制来工作。

<!-- 当 `currentView` 改变时，组件也跟着改变 -->
<component v-bind:is="currentView"></component>

<!-- 这样做是有必要的，因为 `<my-row>` 放在一个 -->
<!-- `<table>` 内可能无效且被放置到外面 -->
<table>
 <tr is="my-row"></tr>
</table>

1.3 生命周期

image

1.3.1 beforeCreate

1.3.2 created

1.3.3 beforeMount

1.3.4 mounted

1.3.5 beforeUpdate

1.3.6 updated

1.3.7 beforeDestroy

1.3.8 destroyed

1.4 选项 / 数据

1.4.1 data

1.4.2 props

<!-- 父传子 -->
<!-- 父组件 -->
    <once :val="value"></one>  
    import Once from './Once'
    data(){
       value1:"父组件要穿给子组件的值", 
    } 
    //挂载
    components:{
        once:Once
    } 
<!-- 子组件 -->
    <div>{{val}}</div> 
    <!-- 1.静态 -->
    props: ["val"]
    <!-- 2.动态 -->
    props:{
        val:{
            限制
        }
    }

1.4.3 computed

1.4.5 watch

    data(){return{a:1}}
    watch:{
        a(val,oldval){}
    }

1.4.6 methods

1.5 子传父组件的通信

$on(event,callback)

    1.方法一
    // 子组件 Once内容
    mounted(){
        this.$emit("shu",参数)
    }

    // 父组件(挂载的子组件)内容
    <once v-on:shu="fn"></once> 
    mounted(){
        fn(data){
            console.log(data)
        }
    }

    2.方法二
    // 子组件 Once内容
    methods: {
        eleFn(){
            this.$emit("shu",参数)
            this.$on("shu",function(){
                console.log(data)
            })
        }   
    }
    // 父组件(挂载的子组件)内容
    <once ref="once"></once>
    mounted(){
        this.$refs.once.eleFn()
    }

1.6 父传子

    <!-- 父传子 -->
<!-- 父组件 -->
    <once :val="value"></one>  
    import Once from './Once'
    data(){
       value1:"父组件要穿给子组件的值", 
    } 
    //挂载
    components:{
        once:Once
    } 
<!-- 子组件 -->
    <div>{{val}}</div> 
    <!-- 1.静态 -->
    props: ["val"]
    <!-- 2.动态 -->
    props:{
        val:{
            限制
        }
    }

1.7 非父子组件

    var app = new Vue({
        el: '#app',
        data: {
           Bus:new Vue({}) 
        },
        components:{
            'v-a':{
                template:"<div><input v-model='v1' /><button @click='btn'>提交</button></div>",
                data(){
                    return{
                        v1:''
                    }
                },
                methods: {
                   btn(){
                       this.$root.Bus.$emit('event1',this.v1)
                   }
                }
               
            },
            'v-b':{
                template:"<div>{{msg}}</div>",
                data(){
                    return{
                        msg:'haha'
                    }
                },
                created(){
                    this.$root.Bus.$on('event1',function(val){
                        console.log(val)
                        this.msg=val //无效果 溜了
                    })
                },
                //解除事件绑定
                beforeDestroy() {
                    this.$root.Bus.$off('event1')
                },
               
            }
        }
    })

2 vueX

2.1什么是vuex

image

2.2 Api及使用

image

2.2.1 State

    调用 
    1.this.$store.state.xx
    2.import { mapState } from 'vuex'
    computed: {
        localComputed () { /* ... */ },
        // 使用对象展开运算符将此对象混入到外部对象中
        ...mapState({
            // ...
        })
        }

2.2.2 Getter

    调用
    1.this.$store.getters.xxFn
    2. import { mapGetters } from 'vuex'
    computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
        'doneTodosCount',
        'anotherGetter',
        // ...
        ])
    }

2.2.3 Mutation 同步

    在store中
    mutations: {
        increment (state,abs) {
        // 变更状态
        state.count++
        }
    }
    调用
    1.store.commit('increment',10)
    2.import { mapMutations } from 'vuex'
      methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

2.2.4 Action 异步

Action 类似于 mutation，不同在于：

在store中
    actions: {
        increment ({ commit }) {
            commit('increment')
        }
    }
调用
1.store.dispatch('increment')
    // 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})
2.import { mapActions } from 'vuex'
 methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }

2.2.5 Module 模块

    // 子模块
    const mode1={
    namespaced:true, //命名空间，代码分成
    state:{
        msg:"c1模块"
    },
    getters:{

    },
    mutations:{
        aaa(state){
            alert(state.msg)
        }
    },
    actions:{

    },
    modules:{
        
    }
}
export default mode1; //

// 在store实例中
import mode1 from '地址'
modules:{mode1}

// 在组件中调用
- 1.直接调用
调用state里的
this.$store.state.mode1.msg //mode1:子模块 msg:数据
调用其他
this.$store.state.commit('model1/fn',参数)
this.$store.state.dispatch('model1/fn',参数)
this.$store.getters['mode1/c1Fn']
辅助函数
...mapMutations({aa:"mode1/aaa"}),
...mapMutations('mode1',['aaa'])

3 函数抖动和函数节流

    function debounce(func, wait) {
    let timer = null;
    return (...args) => {
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args)
        }, wait)
    }
}

    function throttle(func, wait) {
    let timer = null, startTime = new Date()
    return (...args) => {
        let curTime = new Date();
        if (timer) {
            timer = clearTimeout(timer);
        }
        // 达到规定触发事件间隔，触发函数
        if (curTime - startTime >= wait) {
            func.apply(this, args);
            startTime = curTime;
        } else {
            timer = setTimeout(() => {
                func.apply(this, args)
            }, wait)
        }
    }
}

高阶函数：英文叫Higher-order function。JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

3.1 css重绘和回流（重排）

4 axios

4.1什么是axios?

axios是一个基于promise的HTTP库，可以用在浏览器和node.js
Features

5 Promise

5.1promise的含义

Promise 是异步编程的一种解决方案,
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

5.2promise的特点

5.2.1 缺点

0.0 vue面试题

0.1 对于MVVM框架的理解

MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

0.2 Vue的生命周期

image

5.DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

0.3 Vue实现数据双向绑定的原理：Object.defineProperty（）

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

0.4 Vue组件间的参数传递

0.5 Vue的路由实现：hash模式 和 history模式

0.6 Vue与Angular以及React的区别？

1.与AngularJS的区别
2.与React的区别

0.7 vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

0.8 vuex是什么？怎么使用？哪种功能场景使用它？

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

const store = new Vuex.Store({ //store实例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules
项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

0.9 vue-cli如何新增自定义指令？

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>
vue如何自定义一个过滤器？
    <div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
    </div>

    var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定义过滤器:

    Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
    })

拓展 简单面试题

1.css只在当前组件起作用
答：在style标签中写入scoped即可 例如：<style scoped></style>

2.v-if 和 v-show 区别
答：v-if按照条件是否渲染，v-show是display的block或none；

3.route和router的区别
答：route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

4.vue.js的两个核心是什么？
答：数据驱动、组件系统

5.vue几种常用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue常用的修饰符？
答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

7.v-on 可以绑定多个方法吗？
答：可以

8.vue中 key 值的作用？
答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

9.什么是vue的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

10.vue等单页面应用及其优缺点
答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。
11.vue 项目获取数据(用axios 发送ajax请求获取数据) 是要在created中比较好还是在mounted中
答：created

测试（白盒和黑盒）

上一篇下一篇

猜你喜欢

热点阅读