V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
asanelder
V2EX  ›  Vue.js

vue 萌新求助!为啥 template 不能替换掉 相应的 tag

  •  
  •   asanelder · 2020-05-21 00:07:04 +08:00 · 2825 次点击
    这是一个创建于 1652 天前的主题,其中的信息可能已经有所发展或是发生改变。

    index.html

    <html> <head> <title>Vue Hello World</title> </head> <body>
    </body> </html>

    main.js

    import Vue from 'vue';

    new Vue({ el: '#app', template: "

    test

    " });

    使用 webpack 打包后,在浏览器中运行,结果是这样的

    <html> <head> <title>Vue Hello World</title> </head>
    <body>
    	<div id="app"></div>
        <script src="main.js"></script>
    </body>
    
    </html>

    并没有替换到

    ,不明白啊,求大神指点!!!!
    17 条回复    2020-05-21 12:51:52 +08:00
    SilentDepth
        1
    SilentDepth  
       2020-05-21 00:55:44 +08:00 via iPhone
    如果你发出来的代码没错的话,你的浏览器控制台应该有报错。你提供的 template 值压根儿不是个合法值。
    asanelder
        2
    asanelder  
    OP
       2020-05-21 01:26:08 +08:00
    @SilentDepth 第一次发,代码格式错了,我又发了一个帖子
    JayLin1011
        3
    JayLin1011  
       2020-05-21 02:53:00 +08:00
    @asanelder `new Vue({ el: '#app' })`,去掉後面的 `template: 'test'`,你的配置衝突了。
    ericgui
        4
    ericgui  
       2020-05-21 05:12:14 +08:00
    其实我觉着开个线下 debug 辅导班也挺好的
    核心不是学习材料
    而是帮你 debug
    你才能成长
    azh7138m
        5
    azh7138m  
       2020-05-21 07:14:15 +08:00 via Android

    不是
    文档都不看
    导致的吗
    和 debug 有啥关系?
    zhw2590582
        6
    zhw2590582  
       2020-05-21 08:23:35 +08:00
    优先级问题而已,你用了 el,后面的 template 就无效了
    SilentDepth
        7
    SilentDepth  
       2020-05-21 09:40:37 +08:00
    楼上几位可能记错了。当组件选项同时包含 el 和 template 时,el 视为挂载点,template 视为模板内容,所以不存在 template 无效的问题。楼主的问题是,template 的值需要是一个 DOM 结构(以编译成 render 函数),而楼主的代码写的是 "test",这没法编译。
    duanzhihe
        8
    duanzhihe  
       2020-05-21 09:40:56 +08:00
    你的 template 用法没有问题,但看你的 main.js ,感觉像是你把 vue 利用脚手架写,和直接 script 标签引用 vue.js 文件的写法搞混了!你若是没有用 vue 脚手架,直接找一个 vue 的 cdn 利用 script 标签引入,main.js 文件删除“mport Vue from 'vue';”这一行应该就可以了。若是你用了脚手架,感觉和你沾出来的代码不太像~~~你需要好好看看文档怎么回事!
    JayLin1011
        9
    JayLin1011  
       2020-05-21 10:09:03 +08:00
    @zhw2590582 事實上,template 和 render() 優先級比 el 高,但是這裡的 template 是無效的,因為它既不是一個字符串模板也不是一個字符串模板選擇符。
    asanelder
        10
    asanelder  
    OP
       2020-05-21 10:42:39 +08:00
    @JayLin1011 不好意思啊,第一次发贴子,没注意 md 格式,代码格式搞错了,我又重新发了一个,忽略上面的吧。。。。
    asanelder
        11
    asanelder  
    OP
       2020-05-21 10:42:52 +08:00
    @azh7138m 不好意思啊,第一次发贴子,没注意 md 格式,代码格式搞错了,我又重新发了一个,忽略上面的吧。。。。
    asanelder
        12
    asanelder  
    OP
       2020-05-21 10:44:14 +08:00
    @SilentDepth 不好意思啊,第一次发贴子,没注意 md 格式,代码格式搞错了,我又重新发了一个,忽略上面的吧。。。。我写的 template 确实是一个 DOM,问题就是,最名没有挂载到 el 所指定的 element 上
    asanelder
        13
    asanelder  
    OP
       2020-05-21 10:46:00 +08:00
    @duanzhihe 不好意思啊,第一次发贴子,没注意 md 格式,代码格式搞错了,我又重新发了一个,忽略上面的吧。。。。我写的 template 确实是一个 DOM,问题就是,最名没有挂载到 el 所指定的 element 上。

    我自己想用 webpack 来打包一个简单的 vue single file components,目的就是想了解一下原理。。。

    说实话,看官方文档没找到原因。
    duanzhihe
        14
    duanzhihe  
       2020-05-21 11:10:43 +08:00
    @asanelder 你没用 vue 官方的 demo,直接自己写的 webpack 配置来跑的 vue 项目?是的话,可以把你的 webpack 配置文件发出来看看!
    你若是初学者,不建议自己去搞这些,需要了解 webpack 和 node 的东西较多,感觉你先让项目跑起来再了解比较好!
    我这种比较懒的,一般情况都会用 vue 的官方 demo 来修改后做项目,具体的可以看看 vue 脚手架的相关文档( vue-cli ),或者直接上 github 找 vue 的官方 demo !
    asanelder
        15
    asanelder  
    OP
       2020-05-21 11:33:27 +08:00
    @duanzhihe 哈哈,感谢回复,我自己最近只是想了解前端的一些东西,之前把 node 和 webpack 之类的文档也大概看了一下,昨天看了 vue 的文档,想着不使用 vue-cli 来自己 build 一个简单的 demo 。。。可能是自己对一些细节的东西了解的不清楚,所以才有了以上的问题
    jingcoco
        16
    jingcoco  
       2020-05-21 12:45:30 +08:00
    我也一直是用的官方 demo,没怎么想过。。。。但是我个人感觉你的问题是:
    1. 如果要改变 html 文件,我感觉是用的 webpack loader “html-webpack-plugin”,感觉相关转变都在 js 里面体现。
    2. 我感觉你是混用了 browser 和 vue-cli 的两种 vue 开发的 demo 。
    asanelder
        17
    asanelder  
    OP
       2020-05-21 12:51:52 +08:00
    我找到原因了。

    主要是 webpack 最后打包成的 bundle.js 不包含 vue-compile, 所以 template: '<p> test </p>' 是不起作用的。

    要想起作用,需要使用 SFC 或者 render 函数。

    大家不用回复了哈
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1109 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:48 · PVG 06:48 · LAX 14:48 · JFK 17:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.