Vue期末复习(二)—Vue开发基础

第一篇在这里:Vue期末复习(一)—Vue开发基础_m0_48788975的博客-CSDN博客_vue期末考试

目录

导读:

1.全局API

Vue.directive

v-directive的实例应用:

 ​

Vue.use

Vue.use的实例应用1:

 Vue.use的实例应用2:插件:

Vue.extend

Vue.extend的实例应用:

Vue.set

Vue.set的实例应用:

Vue.mixin(全局混入)

Vue.mixin的实例应用: 

2.实例属性

vm.$props

vm.$options

$options的实例应用:

vm.$el

$el的实例应用:

vm.$children

$children的实例应用: 

vm.$root

$root的实例应用:

 $root与$el区别?                                                        

vm.$slots

vm.$attrs

3.render渲染

   createElement

4.全局配置 

 productionTip

silent

devtools


导读:

本章着重在:

  • Vue提供的全局API
  • Vue实例对象中的常用属性
  • 使用render渲染函数完成页面渲染的方法
  • 通过全局对象配置Vue的方法

1.全局API

 API(Application Programming Interface,应用程序编程接口:

        构建自定义的指令、组件、插件,通过Vue实例属性完成更强大的功能等。

指令包括:

  • Vue.directive:用来注册自定义指令,对低级DOM元素进行访问,为DOM元素添加新的特性。
  • Vue.use:用于基于Vue构造器创建一个Vue子类,可以对Vue构造器进行扩展。它有一个options参数,表示包含组件选项的对象。
  • Vue.extend
  • Vue.set:用于向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
  • Vue.mixin:用于全局注册一个混入,它将影响之后创建的每个Vue实例。在插件中向组件注入自定义的行为,可以用来为自定义选项注入处理逻辑。

下面来逐一讲解以下这些API指令:


  • Vue.directive

说明:用来注册自定义指令,对低级DOM元素进行访问,为DOM元素添加新的特性。

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。

(复习:v-model 双向数据绑定   v-show  控制元素的显示和隐藏)

用法:

模板:
Vue.directive( id, [definition] )
参数:

{string} id
{Function | Object} [definition]
用法:

注册或获取全局指令。


举例:
// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter,返回已注册的指令
var myDirective = Vue.directive('my-directive')

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在即可)。
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。 

钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

  • el:指令所绑定的元素,可以用来直接操作 DOM。
  • binding:一个对象,包含多个 property。
  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。          除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。 

v-directive的实例应用:

 Vue期末复习(二)—Vue开发基础

<div id="app">
  <input type="text" v-focus="true">
</div>

<script>
Vue.directive('focus', {
  inserted (el, binding) {    #inserted:被绑定元素插入父节点时调用
    if (binding.value) {    #binding:指令的相关信息
      el.focus()           #el:自定义指令的元素,input;
    }
  }
})
var vm = new Vue({ el: '#app' })
</script>

  • Vue.use

说明:用于基于Vue构造器创建一个Vue子类,可以对Vue构造器进行扩展。它有一个options参数,表示包含组件选项的对象。

Vue.use的实例应用1:

                                Vue期末复习(二)—Vue开发基础

<div id="app1">app1: {{title}}</div>
<div id="app2">app2: {{title}}</div>

<script>
var Vue2 = Vue.extend({
  data () {     #data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数
    return {
      title: 'hello‘
    }
  }
})
var vm1 = new Vue({ el: '#app1' })
var vm2 = new Vue2({ el: '#app2' })
</script>

 Vue.use的实例应用2:插件:

在Vue中安装插件。插件如果是对象,必须提供install()方法,用来安装插件;如果是一个函数,则该函数将被当成install()方法。当 install 方法被同一个插件多次调用,插件将只会被安装一次。

        Vue期末复习(二)—Vue开发基础

#定义插件
<script>
// 定义一个MyPlugin(自定义插件)对象
let MyPlugin = {}

// 编写插件对象的install方法
MyPlugin.install = function (Vue, options) {
  console.log(options)
  // 在插件中为Vue添加自定义指令
  Vue.directive('my-directive', {
    bind (el, binding) {
      // 为自定义指令v-my-directive绑定的DOM元素设置style样式
      el.style = 'width:100px;height:100px;background-color:#ccc;'
    }
  })
}

#使用插件
Vue.use(MyPlugin, { someOption: true }
</script>

  • Vue.extend

用法:

Vue.component( id, [definition] )
参数:
{string} id
{Function | Object} [definition]
用法:
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件,传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
参考:组件

Vue.extend的实例应用:

例3-3-1
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
结果如下:
<p>Walter White aka Heisenberg</p>

  • Vue.set

说明:用于向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。

Vue的核心具有一套响应式系统,简单来说就是通过监听器监听数据层的数据变化,当数据改变后,通知视图也自动更新。

用法:

格式:Vue.set( target, propertyName/index, value )
参数:
{Object | Array} target,目标对象;
{string | number} propertyName/index,属性名;
{any} value,属性值
返回值:设置的值。

注意:Vue 不允许动态添加根级别的响应式 property,所以你必须在初始化实例前声明所有根级响应式 property,哪怕只是一个空值。 

Vue.set的实例应用:

                        Vue期末复习(二)—Vue开发基础

#页面结构
<div id="app">
  <div>{{a}}</div>
  <div>{{obj.b}}</div>
</div>

#创建vm对象动态设置属性b
<script>
var vm = new Vue({
  el: '#app',
  data: {
    a: '我是根级响应式属性a',
    obj: {}
  }
})
Vue.set(vm.obj, 'b', '我是Vue.set添加的响应式属性obj.b'
</script>

#不会响应:vm.obj.c = '我是直接添加的c属性'
用法错误:Vue.set(vm, 'b', '我是Vue.set添加的响应式属性obj.b')

  • Vue.mixin(全局混入)

 说明:用于全局注册一个混入,它将影响之后创建的每个Vue实例。慎用!

在插件中向组件注入自定义的行为,可以用来为自定义选项注入处理逻辑。

Vue.mixin的实例应用: 

         Vue期末复习(二)—Vue开发基础

<div id="app"></div>
<script>
var vm = new Vue({
  myOption: 'hello vue!'    #myOption是一个自定义属性。
  Vue.mixin({
    created () {
      var myOption = this.$options.myOption
      if (myOption) {
        console.log(myOption.toUpperCase())
      }
    }
  })
 
})
</script>


2.实例属性

实例属性是指Vue实例对象的属性。

实例属性包括:

  • vm.$data,获取vm实例中的数据对象;
  • vm.$props,接收父组件传输的数据;
  • vm.$options,创建自定义选项。
  • vm.$el,用来访问vm实例使用的根DOM元素
  • vm.$children,用来获取当前实例的直接子组件,其并不保证顺序,也不是响应式的。
  • vm.$root,用来获取当前组件树的根Vue实例,如果当前实例没有父实例,则获取到的是该实例本身。
  • vm.$slots,可以通过$slots动态获取定义在组件内部的template模板。为了方便使用template公共模板结构
  • vm.$attrs,可以获取组件的属性,但其获取的属性中不包含class、style以及被声明为props的属性。

  • vm.$props

$props:使用vm.$props属性可以接收上级组件向下传递的数据。

  • vm.$options

$options:Vue实例初始化时,除了传入指定的选项外,还可以传入自定义选项。自定义选项的值可以是数组、对象、函数等,通过vm.$options来获取。

$options的实例应用:

                Vue期末复习(二)—Vue开发基础

#定义根标签:
<div id="app">
  <p>{{base}}</p>
  <p>{{noBase}}</p>
</div>

#创建vm实例
<script>
var vm = new Vue({
  el: '#app',
  data: {
    base: '我是基础数据' 
  },
  customOption: '我是自定义数据',
  created () {
    this.noBase = this.$options.customOption
  }

})
</script>

  • vm.$el

$el:用来访问vm实例使用的根DOM元素

$el的实例应用:

                Vue期末复习(二)—Vue开发基础

<div id="app">
  <p>我是根标签结构</p>
</div>

<script>
var vm = new Vue({
  el: '#app'
})
vm.$el.innerHTML = '<div>我是替换后的div标签</div>'
</script>

  • vm.$children

$children:用来获取当前实例的直接子组件,其并不保证顺序,也不是响应式的。

$children的实例应用: 

            Vue期末复习(二)—Vue开发基础

<div id="app">
  <button @click="child">查看子组件</button>
  <my-component></my-component>
</div>

<script>
#定义子组件
Vue.component('my-component', {
  template: '<div>myComponent</div>'}
)
#获取子组件
var vm = new Vue({
  el: '#app',
  methods: {
    child () {
      console.log(this.$children)
    }
  }
})
</script>

  • vm.$root

$root:用来获取当前组件树的根Vue实例,如果当前实例没有父实例,则获取到的是该实例本身。

$root的实例应用:

                         Vue期末复习(二)—Vue开发基础

  <div id="app">
    <my-component></my-component>
  </div>
  <script>
    Vue.component('my-component', {
      template: '<button @click="root">查看根实例</button>',
      methods: {
        root () {
          console.log(this.$root)
          console.log(this.$root === vm.$root)
        }
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

 $root与$el区别?                                                        

        $root组件树的根实例,

        $el:vm实例的根DOM元素 

  • vm.$slots

$slots:Vue的组件使用template模板定义HTML结构,为了方便使用template公共模板结构,Vue提出了插槽(Slots)的概念。

可以通过$slots动态获取定义在组件内部的template模板。

 $slots的实例应用:

           Vue期末复习(二)—Vue开发基础

  <div id="app">
    <my-component>你好</my-component>
  </div>

  <template id="first">
    <div>
      <slot></slot>      #slot占位作用
    </div>                
  </template>
  
  <script>
    Vue.component('my-component', { template: '#first' })
    var vm = new Vue({ el: '#app' })
  </script>

#vm.$children[0].$slots.default[0].text
vm第1个子组件中的所有插槽中的默认插槽中第1个节点的内容
default获取默认插槽

<slot> 元素作为组件模板之中的内容分发插槽。

<slot> 元素自身将被替换。

vm.$slots访问被插槽分发的内容。 具名插槽,例如:v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到; 未具名的插槽,采用vm.$slots.default 。

  • vm.$attrs

 $attrs:可以获取组件的属性,但其获取的属性中不包含class、style以及被声明为props的属性。

$attrs的实例应用:

     Vue期末复习(二)—Vue开发基础

  <div id="app">
    <my-component id="test"></my-component>
  </div>
  <script>
    Vue.component('my-component', {
      template: '<button @click="showAttrs">查看属性</button>',
      methods: {
        showAttrs () {
          console.log(this.$attrs)
        }
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

3.render渲染

Vue期末复习(二)—Vue开发基础

  <div id="app">
    <my-component>成功渲染</my-component>
  </div>
  <script>
    Vue.component('my-component', {
      render (createElement) {
        return createElement('p', {
          style: {
            color: 'red',
            fontSize: '16px',
            backgroundColor: '#eee'
          }
        }, this.$slots.default)
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

   createElement

Vue期末复习(二)—Vue开发基础

<div id="app">
    <my-component>
      <template v-slot:header>
        <div style="background-color:#ccc;height:50px">
          这里是导航栏
        </div>
      </template>
      <template v-slot:content>
        <div style="background-color:#ddd;height:50px">
          这里是内容区域
        </div>
      </template>
      <template v-slot:footer>
        <div style="background-color:#eee;height:50px">
          这里是底部信息
        </div>
      </template>
    </my-component>
  </div>
  <script>
    Vue.component('my-component', {
      render (createElement) {
        return createElement('div', [
          createElement('header', this.$slots.header),
          createElement('content', this.$slots.content),
          createElement('footer', this.$slots.footer)
        ])
      }
    })
    var vm = new Vue({ el: '#app' })
  </script>

4.全局配置 

Vue提供了全局配置对象Vue.config,通过配置可以实现生产信息提示、警告忽略等人性化处理。

全局配置包括:

  • Vue.config.productionTip,打开或关闭生产信息提示信息,默认为打开状态。
  • Vue.config.silent,silent可以取消Vue日志和警告,silent默认值为false,开启警告功能。
  • Vue.config.devtools:表示打开或关闭vue-devtools调试工具,默认值为true,表示vue-devtools工具可用。

  •  productionTip

Vue.config.productionTip:打开或关闭生产信息提示信息,默认为打开状态。

 Vue期末复习(二)—Vue开发基础

  • silent

Vue.config.silent:silent可以取消Vue日志和警告,silent默认值为false,开启警告功能。

 Vue期末复习(二)—Vue开发基础

silent的值设置为true,可以取消Vue日志和警告。

<script>
Vue.config.silent = true
var vm = new Vue({ 
  el: '#app'
 })
</script>
  • devtools

Vue.config.devtools:表示打开或关闭vue-devtools调试工具,默认值为true,表示vue-devtools工具可用。

有案例

上一篇:【JAVA基础】:JDK JRE JVE 之间的联系和区别


下一篇:tomcat NoClassDefFoundError: org/apache/juli/logging/LogFactory