vue.js在<head>头文件不被使用的问题

1.我通过button来调用vue方法但是我的方法放在body和html外部的时候可以正确使用,
但是放在head里面就出错

2.问题代码

        var vm=new Vue({
        el: '#app',
            data: {
                showin: true,
                message: 'Hello Vue!'
            }
        })

    </script>

3.代码放在head里面出错,但是放在body和html外面不被调用

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                showin: true,
                message: 'Hello Vue!'
            }
        })

    </script>
</head>
<body>
<div id="app">
    <div class="app">
        <button @click="showin =!showin"> 增加</button>
        <a > 删除</a>
        <a > 插入</a>

    </div>
    <div v-show="showin">
        <table border="1">
            <tr>
                <th>id</th>
                <th>村民</th>
            </tr>

            <tr>
                <td>1 </td>
                <td>张三</td>
            </tr>
        </table>
    </div>
</div>


</body>
</html>

3个回答

weixin_43856422
王小白进化史 谢谢
12 个月之前 回复

要不把 <br> var vm=new Vue({<br> el: &#39;#app&#39;,<br> data: {<br> showin: true,<br> message: &#39;Hello Vue!&#39;<br> }<br> })</p> <pre><code>&lt;/script&gt;放在body最下面,或者给里面的内容加个window。onload </code></pre>

weixin_43856422
王小白进化史 谢谢
12 个月之前 回复

通过问和查,这个问题就是因为html的运行过程就是自上而下的运行,当将vue放在head里面的时候,
先运行了el中的对象去寻找id,这个时候body里面的id还没有加载出来,所以会报错说没有找到id

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

VUE vue.config.js 配置 代理不生效

求助 使用VUE +axios 配置 跨域问题的时侯 vue.config.js 不生效 <br/> vue.config.js 文件<br/> ![图片说明](https://img-ask.csdn.net/upload/202005/18/1589773253_87964.png) <br/> main.js 文件<br/> ![图片说明](https://img-ask.csdn.net/upload/202005/18/1589772845_808542.png) <br/> 请求:<br/> ![图片说明](https://img-ask.csdn.net/upload/202005/18/1589772896_587765.png) <br/> 结果<br/> ![图片说明](https://img-ask.csdn.net/upload/202005/18/1589773390_574023.png) <br/> 它还是报了一个错误,而且 代理设置并没有生效 求助 ...如何让它生效 使代理正常..........

在html文件中引用vue.js和直接创建.vue文件有什么差别??

在html文件中引用vue.js和直接创建.vue文件有什么差别??

vue cli3中跨域及vue.config.js配置问题

求各位大神帮忙看看 我这个报错怎么解决: ![图片说明](https://img-ask.csdn.net/upload/201907/30/1564453052_649237.png) 为什么这里地址还是http://localhost:8080的地址 | | | | 下面是我代码: | | | vue.config.js的配置: ``` devServer: { proxy: { '/api': { target: 'http://sandbox.starpos.com.cn/', changeOrigin: true,//设置是否跨域 ws:true, } } } ``` 这是我的请求: ``` getIndustry(){ this.$http.get("/emercapp").then(res=>{ console.log(res); if(res.status=200){ return res.data }else{ return error } }).then(data=>{ console.log(data) }) } ```

VUE.JS插件提示插件未定义怎么解决?

html代码如下 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>插件</title> </head> <body> <div id="test"> <p v-my-directive='msg'></p> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/vue-myPlugin.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.use(MyPlugin) Vue.myGlobalMethod() const vm=new Vue({ el:'#test', data:{ msg:'I liKe EaT' } }) vm.$myMethod() </script> </body> </html> ``` 插件代码如下 ``` (function(){ const MyPlugin={} MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { console.log("执行了myGlobalMethod方法") } // 2. 添加全局资源 Vue.directive('my-directive',function(el,binding){ el.textContent = binding.value.toLowerCase() }) // 3. 注入组件选项 // Vue.mixin({ // created: function () { // // 逻辑... // } // ... // }) // 4. 添加实例方法 Vue.prototype.$myMethod = function(){ console.log("执行了$myMethod实例方法") } } //向外暴露 window.MyPlugin=MyPlugin }) `` 都是照着网课老师的代码敲得,不知道哪里出错了一直提示 Uncaught ReferenceError: MyPlugin is not defined 求问各路大佬怎么解决

idea2017的安装了vue.js插件后清缓存重启后,在创建vue工程下的static web下依然没有看见vue.js

如图所示: 1.插件安装成功图例如下: ![图片说明](https://img-ask.csdn.net/upload/202004/25/1587783439_203983.png) 2. 新建工程时,static web下的显示情况如下: ![图片说明](https://img-ask.csdn.net/upload/202004/25/1587783571_650364.png)

Vue.js 关于Vue.js中样式引入问题

``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js组件</title> </head> <body> <div id="app"> <counter heading="完美极了" bgcolor="green"></counter> <counter heading="糟糕透了" bgcolor="red"></counter> </div> <template id="mycounter"> <div class=""> <h1>{{ heading }}</h1> <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> </div> </template> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> Vue.component("counter",{ template:"#mycounter", data:function(){ return { count : 0}; }, props:["heading","bgcolor"], methods : { plus : function(){ this.count += 1; } } }); new Vue({ el : "#app" }); </script> </body> </html> ``` 上面的代码中 <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 这一行报错,报错信息为: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">. 改为: <button type="button" name="button" @click="plus" v-bind:style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 后仍然报错! 请问大家,这里应该怎么正确引入父组件传过来的bgcolor作为button的背景色?

解決vue.runtime.esm.js:619 [Vue warn]: Failed to resolve directive: waves

vue.runtime.esm.js:619 [Vue warn]: Failed to resolve directive: waves ``` <script> import waves from '@/components/directive/waves' export default { components: { Pagination }, directives: { waves } ...... } </script> ```

允许在vue.js Web应用程序中动态创建sitemap.xml

<div class="post-text" itemprop="text"> <p>I have a Vue.JS single page application with a PHP back-end running on apache. The app is running fine, using the vue.js routing to navigate between pages.</p> <p>I want to dynamically create an XML sitemap based on records in a database (each record has it's own page). I have a .php file which generates the XML and returns text/xml.</p> <pre><code>&lt;?php header("Content-type: text/xml"); ?&gt; &lt;urlset xmlns="http://www.google.com/schemas/sitemap/0.84" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.google.com/schemas/sitemap/0.84 http://www.google.com/schemas/sitemap/0.84/sitemap.xsd"&gt; &lt;url&gt; &lt;loc&gt;https://myapp.com/&lt;/loc&gt; &lt;priority&gt;1.00&lt;/priority&gt; &lt;/url&gt; &lt;?php ###### Code for calling the DB ?&gt; &lt;/urlset&gt; </code></pre> <p>In my .htaccess file, I'm redirecting sitemap.xml to my sitemap.php page. </p> <pre><code>&lt;IfModule mod_rewrite.c&gt; RewriteEngine on RewriteRule ^sitemap\.xml$ /php/sitemap.php [L] RewriteRule ^([A-Za-z0-9-]+)/?$ index.php?shortName=$1 [NC,L] &lt;/IfModule&gt; </code></pre> <p>However, the vue.js router is intercepting the request and displaying my 404 page.</p> <pre><code>const routes = [ // home {name: 'home',path: '/',component: Home}, // all my other routes here // 404 catch-all { path: '*', component: NotFound} ] </code></pre> <p>Is there a way to ignore certain routes in the vue.js router? Or am I going about this the wrong way?</p> </div>

如何在Laravel 5.7中使用Vue.js文件(不是CDN)?

<div class="post-text" itemprop="text"> <p>I have almost completed my Admin Panel in laravel 5.7, however needed to use VueJS for some component. I am aware Vue comes by default with laravel, and also saw the app.js file under resources/js directory in laravel. </p> <p>However, is there a possibility where I can use Vue.js file that I have downloaded, and import it with the script tag? I tried by placing the script and vue code in the blade file itself, but it conflicts with the laravel {{ blade_syntax }}. </p> <p>Is there a systematic way to not use VueCLI, or CDN, but the plain vuejs file? Need I copy the vuejs file i downloaded inside Laravel Project? If so, where should I place the file?</p> <p>Or am I going wrong somewhere?</p> <p>Any suggestion would be highly appreciated.</p> </div>

vue.js 关于打包与部署的问题

vue.js 关于打包与部署的问题,vue.js具体怎么打包与部署

vue.js 请求方法设置同步问题

使用vue.js对后台进行请求发送。 现在问题描述。 定义一个vue中,有6个方法,其中有一个方法请求成功后会调用另外两个方法, 调用时候,必须等第一个方法成功返回之后对页面渲染后再掉第二个方法。 目前vue 默认为异步请求,调用的第一个方法还没有渲染完页面, 第二个方法就已经请求了,造成页面获取值为未更新之前的数据。 现在想完成的形式: 定义一个vue,6个方法中,不设置就使用异步, 有一个方法需要单独设置为执行同步。 请大神说说vue的思路。就是需要vue实现部分方法同步 【ps:想说使用ajax的或者把第二个参数写在第一个参数里边的就不用说了】

如何将laravel模板与Vue.js集成

<div class="post-text" itemprop="text"> <p>I have created my website in Laravel 5 with template integrated in it. Now I want to add chat feature in my website, so I decided to use Vue.js. The problem is that when I setup Vue.js in my project, the page template of that page in which vue.js is used is not working. I mean that all the css and js file of laravel getting mess up. Page looks horrible. How Can I use my existing template with Vue.js?</p> <pre><code>&lt;head&gt; &lt;link rel="stylesheet" href="{{ URL('css/style.css?version=2') }}" /&gt; &lt;link rel="stylesheet" href="{{ URL::asset('css/ionicons.min.css') }}" /&gt; &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt; &lt;link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="custom-search-input"&gt; &lt;div class="input-group col-md-12"&gt; &lt;input type="text" class=" search-query form-control" placeholder="Conversation" /&gt; &lt;button class="btn btn-danger" type="button"&gt; &lt;span class=" glyphicon glyphicon-search"&gt;&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="app"&gt; &lt;example-component&gt;&lt;/example-component&gt; &lt;/div&gt; &lt;div class="dropdown all_conversation"&gt; &lt;button class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt; &lt;i class="fa fa-weixin" aria-hidden="true"&gt;&lt;/i&gt; All Conversations &lt;span class="caret pull-right"&gt;&lt;/span&gt; &lt;/button&gt; &lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu2"&gt; &lt;li&gt;&lt;a href="#"&gt; All Conversation &lt;/a&gt; &lt;ul class="sub_menu_ list-unstyled"&gt; &lt;li&gt;&lt;a href="#"&gt; All Conversation &lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;script type="text/javascript" src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt; &lt;/body&gt; </code></pre> <p>ExampleComponent.vue</p> <pre><code> &lt;template&gt; &lt;div class="container"&gt; &lt;div class="row justify-content-center"&gt; &lt;div class="col-md-8"&gt; &lt;div class="card card-default"&gt; &lt;div class="card-header"&gt;Example Component&lt;/div&gt; &lt;div class="card-body"&gt; I'm an example component. &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p><a href="https://i.stack.imgur.com/GDufn.png" rel="nofollow noreferrer">Console warnings and errors</a></p> </div>

webStorm无法解析vue.js怎么解决?

把vue.js文件放入webStorm的项目文件夹里 ![图片说明](https://img-ask.csdn.net/upload/201910/19/1571468378_934721.png) 提示please sprcify Node.js interpreter ![图片说明](https://img-ask.csdn.net/upload/201910/19/1571468452_961945.png) 且在html文件夹中提示无法解析,该怎么解决

webstrom配置新版vue.js,启动项目后停止

![图片说明](https://img-ask.csdn.net/upload/201712/06/1512551547_956798.png) ![图片说明](https://img-ask.csdn.net/upload/201712/06/1512551557_993884.png) 新版本vue.js,已经没有了dev.server.js,配置build.js后,项目启动后自动关闭,如果直接执行命令npm run dev,项目能正常启动

如何将锚链接转为固定链接,vue.js开发的?

如何将锚链接转为固定链接,vue.js开发的? 如何将锚链接转为固定链接,vue.js开发的? 听说锚链接不利于seo,可是不知道Vue.js能不能切换模式?

vue.js的ajax方法(不用jquery)如何加headers??

vue.js的ajax方法(不用jquery)如何加headers??官方例子没有headers...

使用vue.js是不是可以前后端完全分离?后端不管是什么语言都可以通用?

使用vue.js是不是可以前后端完全分离?后端不管是什么语言前端都可以通用?

html里,我用vue.js,然后用echarts画了个图,为什么画不出来

``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>myMaptest</title> <script src="js/echarts.js"></script> <script src="js/yunnan.js"></script> <script src="js/china.js"></script> <script src="js/vue.js"></script> </head> <body> <div id="app"> <div id="main" v-bind:style="main"></div> </div> <script> //Vue var map1 = new Vue({ el:'#app', data: { main:'width:600px;height:700px;' } }) //echarts var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '云南降水', left:'center' } tooltip: { show: true, formatter: '{b}', //提示标签格式 backgroundColor:"#ff7f50",//提示标签背景颜色 textStyle:{color:"#fff"} //提示标签字体颜色 }, series: [{ type: 'map', mapType: '云南', label: { normal: { show: true, textStyle:{color:"#c71585"} }, emphasis: {//对应的鼠标悬浮效果 show: true, textStyle:{color:"#800080"} } }, itemStyle: { normal: { borderWidth: .5,//区域边框宽度 borderColor: '#009fe8',//区域边框颜色 areaColor:"#00efd5",//区域颜色 }, emphasis: { borderWidth: .5, borderColor: 'BLACK', areaColor:"#ffffff", } }, zlevel: 1 }], }; myChart.setOption(option); </script> </body> </html> ```

VUE.JS一个组件里面的使用第三方css框架,不能独立的吗,

VUE.JS一个组件里面的使用第三方css框架,不能独立的吗,我一个组件用了,其他组件竟然也能用

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# 解析cad c#数字格式化万 c#int转byte c#格式化日期 c# wpf 表格 c# 实现ad域验证登录 c#心跳包机制 c#使用fmod.dll c#dll vb 调用 c# outlook
立即提问
相关内容推荐