前端学习日记Vue：extends选项与delimiters选项

一时失言乱红尘 2023-06-07 05:53 28阅读 0赞

<!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">  
         //这是extend,用于扩展组件的构造器  
        var authorExtend = Vue.extend(\{  
            template:"<p><a :href='authorUrl'>\{ \{authorName\}\}</a></p>",  
            data:function()\{  
                return\{  
                    authorName:'JSPang',  
                    authorUrl:'http://jspang.com'  
                \}  
            \}  
        \});     
       new authorExtend().$mount('author');  
    </script>

<h1>Extends Optin Demo</h1>  
    <hr>  
    <div id="app">  
        \{ \{message\}\}  
        \#message0  
        <p><button @click="add">add</button></p>  
    </div>

<script type="text/javascript">  
        var bbb=\{  
            created:function()\{  
                console.log("我是被扩展出来的");  
            \},  
            methods:\{  
                add:function()\{  
                    console.log('我是被扩展出来的方法！');  
                \}  
            \}  
        \};  
        var app=new Vue(\{  
            el:'\#app',  
            data:\{  
                message:'hello Vue!'  
            \},  
            methods:\{  
                add:function()\{  
                    console.log('我是原生方法');  
                \}  
            \},  
            extends:bbb,  
            delimiters:\['\#','0'\]  
        \})  
    </script>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关前端学习日记Vue：extends选项与delimiters选项

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script t

一时失言乱红尘/ 2023年06月07日 05:53/ 0 赞/ 29 阅读

相关前端学习日记Vue：extend选项

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script t

「爱情、让人受尽委屈。」/ 2023年06月07日 05:53/ 0 赞/ 100 阅读

相关前端学习日记Vue：mixin混入选项

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script t

比眉伴天荒/ 2023年06月07日 05:52/ 0 赞/ 90 阅读

相关前端学习日记Vue：watch选项与$watch实例方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

秒速五厘米/ 2023年06月07日 05:52/ 0 赞/ 127 阅读

相关前端学习日记Vue：Vue的Methods选项

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

男娘i/ 2023年06月07日 05:51/ 0 赞/ 126 阅读

相关前端学习日记：

<style> \\{ margin: 0; padding: 0; l

た入场券/ 2023年06月06日 12:29/ 0 赞/ 116 阅读

相关 DataTables初始化配置选项学习

这个是我在学习DataTables时参考官方1.10.20的文档写的一些理解,在这里分享给大家,如果理解有误,欢迎大家在评论区留言. 该文档是用yaml文件,所以大家可以用其

谁借莪１个温暖的怀抱￠/ 2023年05月21日 13:59/ 0 赞/ 105 阅读

相关微信小程序学习——增加选项、删除选项

微信小程序单击按钮后多添加一个输入框首先 `WXML`中要设置循环，实现动态的添加和删除 <view> <view class="lines">

本是古典何须时尚/ 2022年11月21日 11:28/ 0 赞/ 290 阅读

相关选项卡

关于选项卡效果 1. 常规 2. 传参（可设置多个参数值） 3. 回调函数下面是几种参考方法常规方法 <!DOCTYPE html>

淩亂°似流年/ 2022年06月14日 10:37/ 0 赞/ 467 阅读

相关二十六、Delimiters 选项

Delimiters 选项 delimiters:['${','}'] //插值形式就变成了${}

曾经终败给现在/ 2022年05月03日 11:58/ 0 赞/ 254 阅读