zoukankan      html  css  js  c++  java
  • Vue2.0 构造器的延伸 Vue.extend

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂载到自定义元素上。

    <!DOCTYPE html>

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <title>vue.extend-扩展实例构造器</title>
    </head>
    <body>
        <h1>vue.extend-扩展实例构造器</h1>
        <hr>
        <author></author>
     
        <script type="text/javascript">
           var authorExtend = Vue.extend({
               template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
               data:function(){
                   return{
                       authorName:'JSPang',
                       authorUrl:'http://www.jspang.com'
                   }
               }
           });
           new authorExtend().$mount('author');
        </script>
    </body>
    </html>
     
    还可以通过HTML标签上的id或者class来生成扩展实例构造器,Vue.extend里的代码是一样的,只是在挂载的时候,我们用类似jquery的选择器的方法,来进行挂载就可以了。

    new authorExtend().$mount('#author');

  • 相关阅读:
    Chrome 扩展及应用开发
    nslinebreakbywordwrapping or nslinebreakcharwrapping
    动态计算uilabel的高度,
    长度还是靠谱,
    dictionary allkeys
    适配
    Linux 下phpstudy的安装使用补充说明
    mysql使用Navicat 导出和导入数据库
    Mysql命令mysql:连接Mysql数据库
    远程连接阿里云服务器ping不通ip解决方案
  • 原文地址:https://www.cnblogs.com/zccblog/p/7192360.html
Copyright © 2011-2022 走看看