第一篇在这里：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的实例应用：

 

<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：

                                

<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 方法被同一个插件多次调用，插件将只会被安装一次。

        

#定义插件
<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的实例应用：

                        

#页面结构
<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的实例应用： 

         

<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的实例应用：

                

#定义根标签：
<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的实例应用：

                

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

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

  • vm.$children

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

$children的实例应用： 

            

<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的实例应用：

                         

  <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的实例应用：

           

  <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的实例应用：

     

  <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渲染

  <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

<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：打开或关闭生产信息提示信息，默认为打开状态。

 

  • silent

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

 

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

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

  • devtools

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

有案例

# vue.js # javascript # 前端
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区