Vue.js中extend选项和delimiters选项的比较

Vue.js中extend选项和delimiters选项的比较

extend选项

允许声明扩展另一个组件（可以是一个简单的选项对象或构造函数），而无需使用Vue.extend，这主要是为了便于扩展单文件组件，它和mixin有类似之处

<div id="app">
  {{num}}
  <button @click="add">addNumber</button>
</div>
<script type="text/javascript">
  var extendsObj = {
    updated: function() {
      console.log("extend updated");
    }
  };
  new Vue({
    el: "#app",
    data: {
      num : 1
    },
    methods : {
      add : function() {
        console.log("原生 add");
        this.num++;
      }
    },
    updated : function(){
      console.log('原生updated');
    },
    extends : extendsObj,
  });
</script>

上面的代码扩展的是updated，执行结果如下：

可以看出扩展的update先执行，那么下面看看扩展methods的时候，只是下面的部分不同而已

 var extendsObj = {
    updated: function() {
      console.log("extend updated");
    },
    methods : {
      add : function() {
        console.log("extend add");
      }
    }
  };

执行结果其实就是上面图片的样子，也就是说，对于methods来说，遇到同名的函数，则执行的是非扩展的函数，如果扩展的是非同名的函数，则按照扩展之后的执行

delimiters选项

默认的插值的写法是{{}}，但是在某些情况下，我们需要使用一些不一样的方式，比如这样${}

<div id="app">
  ${num}
  <button @click="add">addNumber</button>
</div>

  new Vue({
    el: "#app",
    data: {
      num : 1
    },
    methods : {
      add : function() {
        console.log("原生 add");
        this.num++;
      }
    },
    delimiters: ['${', '}']
  });

注意：delimiters对应的是一个数组

以上就是Vue.js中extend选项和delimiters选项的比较的讲解，本站关于Vue.js的文章还很多，大家可以搜索查阅，感谢阅读，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 详解vue.js+UEditor集成 [前后端分离项目]

    详解vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

  • Vue.js结合Ueditor富文本编辑器的实例代码

    Vue.js结合Ueditor富文本编辑器的实例代码

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop

  • Vue.js 单页面多路由区域操作的实例详解

    单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r

  • vue.js组件之间传递数据的方法

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. // 注册一个子组件 Vue.component('child', { data: function(){ text: '我是fathe

  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

  • vue.js国际化 vue-i18n插件的使用详解

    安装方法 1.使用CDN直接引用 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 2.NPM $ npm install vue-i18n 3.Yarn $ yarn add vue-i18n 使用方法 在这里只介绍v

  • Vue.js中extend选项和delimiters选项的比较

    Vue.js中extend选项和delimiters选项的比较

    Vue.js中extend选项和delimiters选项的比较 extend选项 允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用Vue.extend,这主要是为了便于扩展单文件组件,它和mixin有类似之处 <div id="app"> {{num}} <button @click="add">addNumber</button> </div> <script type="te

  • 在Vue.js中使用TypeScript的方法

    虽然 vue2.x 对TypeScript的支持还不是非常完善,但是从今年即将到来的3.0版本在GitHub上的仓库 vue-next看,为TS提供更好的官方支持应该也会是一个重要特性,那么,在迎接3.0之前,不妨先来看看目前版本二者的搭配食用方法吧~ 创建项目 虽然GitHub上有各种各样相关的Starter,但是使用 Vue CLI 应该是目前相对比较好的方式,在使用 vue create 创建新项目时,对 preset 选择 Manually select features 选项,之后添加

  • 解析Vue.js中的组件

    介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

  • Vue.js中的高级面试题及答案

    Vue-loader 是 Webpack 的加载模块,它使我们可以用 Vue 文件格式编写单文件组件. 单文件组件文件有三个部分,(模板.脚本和样式). vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) 提取和处理每个人部分.该设置使我们可以使用 Vue 文件无缝编写程序. vue-loader 模块还允许把静态资源视为模块依赖性,并允许使用 webpack 加载器进行处理. 而且还允许还开发过程中进行热重装. 2.prop 如何指定其

  • Vue.js 中制作自定义选择组件的代码附演示demo

    定制 select 标签的设计非常困难.有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的.在本文中,你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件. Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd HTML <template> <div class="custom-select" :tabindex=&

  • Vue.js中的组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使

  • 如何在Vue.JS中使用图标组件

    原文链接:https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30 本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读. 此文不包含字体图标和SVG sprite.仅在此讨论允许用户按需导入的图标系统. There are three major ways of exposing API of an icon component in Vue.js and each one of them has its

  • 在Vue.js中加载字体的正确方法

    在Vue.js中加载字体的正确方法

    添加字体不应该对性能产生负面影响.在本文中,我们将探讨在 Vue 应用程序中加载字体的最佳实践. 正确声明 font-face 的字体 确保正确声明字体是加载字体的重要方面.这是通过使用 font-face 属性来声明你选择的字体来实现的.在你的 Vue 项目中,这个声明可以在你的根 CSS 文件中完成.在进入这个问题之前,我们先来看看 Vue 应用的结构. /root public/ fonts/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff

  • Vue.js中的计算属性、监视属性与生命周期详解

    Vue.js中的计算属性、监视属性与生命周期详解

    前言 本章节咱们来说一下Vue中两个非常重要的计算属性.监视属性和生命周期,不废话直接上干货 计算属性 计算属性介绍 在模板中可以直接通过插值语法显示一些data中的数据,有些情况下我们需要对数据进行转化或者计算后显示,我们可以使用computed选项来计算,这时有些小伙伴可能就会问,我直接定义函数再调用不就行了,为什么还要整一个计算属性呢?这个问题在下边再做解释,我们先来看一下计算属性怎么用! 入门案例 需求 将人的姓和名拼接在一起 代码 <!DOCTYPE html> <html&g

  • Vue.js中让人容易忽略的API详解

    目录 nextTick v-model 语法糖 .sync 修饰符 $set 计算属性的 set 总结 nextTick nextTick 是 Vue.js 提供的一个函数,并非浏览器内置.nextTick 函数接收一个回调函数 cb,在下一个 DOM 更新循环之后执行.比如下面的示例: <template> <div> <p v-if="show" ref="node">内容</p> <button @clic

随机推荐