一、全局配置

在开发环境下，Vue 提供了全局配置对象，通过配置可以实现生产信息提示、警告忽略等人性化处理。

1、productionTip

使用开发版本的 Vue，即Vue.js时，网页加载后浏览器的控制台会出现英文的提示信息，如果希望在引入Vue.js文件的情况下，关闭提示信息，参考代码如下：

<script src="vue.js"></script>
// ......
<script>Vue.config.productionTip = false// ......
</script>

通过 Vue 的全局配置productionTip可以控制生产信息的显示或隐藏，将其值设为false即可关闭生产信息提示。

2、silent

Vue 的全局配置对象中，silent可以取消 Vue 日志和警告，值类型为boolean，默认值为false，设为true表示忽略警告和日志，否则不忽略。

示例代码如下：

<div id="app">{{msg}}</div><script>//将silent设为true，默认为falseVue.config.silent = truevar vm = new Vue({el: '#app'})
</script>

3、devtools

在 Vue 全局配置中可以对Vue的调试工具vue-devtools进行配置，将Vue.config.devtools设为true表示允许调试，否则不允许调试。

示例代码如下：

<script src="vue.js"></script>
<div id="app">{{msg}}</div><script>//将devtools设值为false，默认为trueVue.config.devtools = falsevar vm = new Vue({el: '#app'})
</script>

二、组件进阶

1、mixins

mixins是一种分发Vue组件中可复用功能的方式。mixins对象可以包含任何组件选项，当组件使用mixins时，将定义的mixins对象引入组件中即可使用，mixins中的所有选项将会混入到组件自己的选项中。

示例代码如下：

  <script>// 定义myMixin对象var myMixin = {created () {this.hello()},methods: {hello () {console.log('hello from mixin!')}}}// 通过Vue.extend()创建 实例构造器Componentvar Component = Vue.extend({// 配置组件选项，其值为自定义选项// 将自定义的 myPlugin对象 混入(mixin)到Component中mixins: [myMixin]})// 组件实例化var component = new Component()</script>

Vue 组件经过mixins混合之后会发生组件选项重用，为了解决这样的问题，mixins提供了相应的合并策略。

(1) 数据对象经历递归合并，组件的数据发生冲突时优先，示例代码如下：

  <script>var mixin = {data () {return { message: 'hello' }}}var vm = new Vue({mixins: [mixin],data () {return { message: 'goodbye' }},created () {console.log(this.$data.message) // 输出结果：goodbye}})</script>// 在输出数据时，先从 vm 实例的 data函数 中获取message的值，// 如果没有获取到，再去 mixin 中获取。

(2) mixins中的钩子函数将在组件自己的钩子函数之前调用，示例代码如下：

  <script>var mixin = {created () {console.log('mixin钩子调用')}}var vm = new Vue({mixins: [mixin],created () {console.log('组件钩子调用')}})</script>

2、render

在 Vue 中可以使用Vue.render()实现对虚拟DOM的操作。在 Vue 中一般使用template来创建HTML，但这种方式可编程性不强，而使用Vue.render()可以更好地发挥JavaScript的编程能力。

示例代码如下：

  <div id="app"><my-component>成功渲染</my-component></div><script>Vue.component('my-component', {// 定义渲染函数 render()render (createElement) {// createElement()中的第1个参数：创建<p>元素return createElement('p', {// 第2个参数：配置对象，在对象中配置了<p>元素的样式style: {color: 'red',fontSize: '16px',backgroundColor: '#eee'}// 第3个参数：插槽内容“成功渲染”，可通过$slots来获取}, this.$slots.default)}})var vm = new Vue({ el: '#app' })</script>

3、createElement

createElement()函数返回的并不是一个实际的DOM元素，它返回的其实是一个描述节点，用来告诉 Vue 在页面上需要渲染什么样的节点。这个描述节点也可称为虚拟节点，简写为VNode。而“虚拟DOM”是对由 Vue 组件树建立起来的这个VNode树的称呼。

示例代码如下：

  <div id="app"><my-component><!-- 定义header插槽 --><template v-slot:header><div style="background-color:#ccc;height:50px">这里是导航栏</div></template><!-- 定义content插槽 --><template v-slot:content><div style="background-color:#ddd;height:50px">这里是内容区域</div></template><!-- 定义footer插槽 --><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', [// 使用this.$slots获取相应插槽createElement('header', this.$slots.header),createElement('content', this.$slots.content),createElement('footer', this.$slots.footer)])}})var vm = new Vue({ el: '#app' })</script>

参考资料：
1、《Vue.js 前端开发实战》，黑马程序员.
2、Vue 2.x 官方API文档. (https://cn.vuejs.org/v2/api/)

Vue框架学习（七）相关推荐

老张 .NetCore与Vue 框架学习
缘起作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...
PyTorch框架学习七——自定义transforms方法
PyTorch框架学习七--自定义transforms方法一.自定义transforms注意要素二.自定义transforms步骤三.自定义transforms实例:椒盐噪声虽然前面的笔记介绍 ...
前端学习笔记之-VUE框架学习-Vue核心
第一章:Vue核心 1.1.Vue简介官网介绍:https://cn.vuejs.org/v2/guide/ 1.2.初识Vue <!DOCTYPE html> <html lan ...
前端VUE框架学习总结与分享
开发环境 node v10.13.0 官网编辑器: VS Code 插件 1. vutur ,为 vue 文件提供代码高亮 2. Indent-Rainbow ,让缩进的区域以彩色色块显示构建自己 ...
Vue框架学习(第十三课)Vuex状态管理中的store和state属性
学习官网文档:开始 | Vuex (vuejs.org) 第一部分:查图观色思考为什么?下面的一张图中的数据如何实现组件与组件之间的数据共享呢? 如何去实现下面的方案呢能让数据得到共享这一张图告诉你 ...
【若依vue框架学习】3.通过Excel导入数据/通过反射读取注解
目录通过Excel导入用户前端视角: 后端视角简单笔记,了解内容即可通过Excel导入用户前端视角: 其中的updateSupport=0 代表不更新已经存在的数据后端视角如果需要E ...
Vue框架的入门基础学习
当创建新的vue项目时,遇到无法加载文件 E:\node\node_global\vue.ps1,因为在此系统上禁止运行脚本的错误,以下为解决办法. vue中文文档菜鸟教程:Vue.js 该笔记只是 ...
Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...

Vue框架学习（七）

Vue框架学习07

一、全局配置

1、productionTip

2、silent

3、devtools

二、组件进阶

1、mixins

2、render

3、createElement

Vue框架学习（七）相关推荐

最新文章

热门文章