理清楚Vue的结构

Myth丶恋晨 2022-03-08 14:38 109阅读 0赞

**1.Vue的使用场景** ：

* 在html中通过script引入
    * 在webpack中，由于配置有处理各种文件的loader，所以可以用import引入

**2.Vue指令**

v-cloak
    v-bind  ==> :
    v-on ==> @
    v-text
    v-html
    v-modal
    :class : 简单值，数组，对象，数组中对象
    :style ： 数组， 对象
    v-for
    v-if
    v-show

*  自定义全局指令

Vue.derictive(自定义指令名字, 指令生效周期配置对象{
        bind : (被绑定的那个元素的js原生对象el) => {},   ==> 一旦绑上马上调用
        inserted : (el同上) => {},  ==> 元素插入到DOM之后再调用
        updated : (el同上, binding) => {}
    }

*  自定义局部指令

var vm2 = new Vue({
      el: '#app2',
      data: {},
      methods: {},
      directives: { 
        'fontweight': {
          bind: function (el, binding) {
            el.style.fontWeight = binding.value
          }
        },
      }
    })

**3.Vue事件修饰符**

.stop
    .prevent
    .capture
    .self
    .once
    .self和.stop在阻止冒泡行为上的区别

**4.Vue过滤器**  
全局过滤器的参数传递规则一样；  
如果全局过滤器和局部过滤器的名字相同，在组件内部使用过滤器时，优先使用自己的内部过滤器

*  全局过滤器

Vue.filter('自定义过滤器名字' , function(第一参数来自于管道符 | 前的数据 ， 后面的参数是该过滤器被调用时候传递过来的参数){}

*  局部过滤器

定义在Vue实例中的filter属性中

var vm2 = new Vue({
      el: '#app2',
      data: {},
      methods: {},
      filters: { 
        dateFormat: function (dateStr, pattern = '') {}
        }
      },
    })

**5.Vue按键修饰符**  
按键修饰符像.self这样的事件修饰符一样，是用在v-on事件后面的。

.enter
    .tab
    .up
    .down
    .left
    .right
    .delete
    .esc
    .space

*  自定义全局按键修饰符

Vue.config.keyCodes.自定义按键修饰符名字 = 按键的码值

**6.Vue组件生命周期**

beforeCreated(){} ==> data和methods中数据还没初始化好
    created(){} ==> data和methods中的数据已经初始化好
    beforeMount(){} ==> 模板已经在内存中编译好了，但是没有被渲染到页面上
    mounted(){} ==> 内存中的模板已经渲染到了页面行，用户可以看到页面了
    beforeUpdate (){} ==> data中的数据已经更新，但是界面上的数据没有更新
    updated (){} ==> 界面上数据更新结束
    beforeDestory (){} ==> 此时data和methods中数据还可以使用
    destoryed (){} ==> data和methods中数据都不能使用了，Vnode被完全销毁

**7.Vue-resource**  
类似于axios，但是依赖于Vue.js. 引入后自动给Vue实例添加上了$http属性

$http.get()
    $http.post()
    $http.jsonp()
    
    均返回一个promise
    this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
      console.log(result.body)
    })

**8.Vue动画**

*  类名

v-enter
    v-enter-active
    v-enter-to
    v-leave
    v-leave-active
    v-leave-to

*  使用第三方类名

<transition
    name='my'
    enter-active-class="bounceIn"
    leave-active-class="bounceOut"
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">这是一个H3</h3>
    </transition>

*  动画的钩子函数

<transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
    
    beforeEnter (要执行动画的那个对象的原生DOM对象el) {} ==> 动画入场之前，设置动画的起始样式
    enter (el , done) {done()} ==> 动画开始后样式，设置动画结束样式
    afterEnter () {} ==> 动画完全结束回调

**9.Vue创建组件**

*  （1）组件模板对象创建

方式1：
    Vue.extend({
        template : ''
    })
    
    方式2：
    直接一个 Object

*  （2）注册全局组件

Vue.component(自定义组件名字, 组件模板)

*  （3）组件data和Vue实例data区别

组件data必须return object

**10.组件切换和动画**

*  组件切换

<component :is="comName"></component>
    comName是变量

*  组件切换时的动画

<transition mode="out-in">
      <component :is="comName"></component>
    </transition>

**11.组件父子间传值**

*  父组件传值给子组件

传单纯值：
    <com1 v-bind:parentmsg="msg"></com1>
    
    传函数
    <com2 @func="show"></com2>
    this.$emit('func', this.sonmsg)

*  子组件给父组件传值

通过父组件传入函数的参数

*  $refs

**12.Vue路由**

*  和Vue-resource一样，需要引进一个vue-router.js文件

let routeObj = new VueRouter({  
        routes : [
            {path : '' , redrect : '' , component : null}
        ]
    })
    
    var vm = new Vue({
      el: '#app',
      router: routerObj
    });

*  路由参数

<router-link to="/login?id=10&name=zs">login</router-link>
    routes: [
      { path: '/login/:id/:name', component: login , children : [{path , redrect , component , children}] },
    ]
    $route.params.id

*  一个路由对应多个组件

<router-view></router-view>
    <div class="container">
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>
    </div>
    
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            'default': header,
            'left': leftBox,
            'main': mainBox
          }
        }
      ]
    })

**13.watch监视data中数据变化或者路由变化**

var vm = new Vue({
      el: '#app',
      data: {firstname: '',},
      watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
        'firstname': function (newVal, oldVal) {
          this.fullname = newVal + '-' + this.lastname
        },
        '$route.path': function (newVal, oldVal) {   ==> 只需要这是一个变量
          if (newVal === '/login') {
            console.log('欢迎进入登录页面')
          } else if (newVal === '/register') {
            console.log('欢迎进入注册页面')
          }
        }
      }
    });