vue 和 jquery 加载顺序导致的问题

问题描述:可能标题说明的比较含糊,需求是这样的,页面有个隐藏域,是通过标签从后台赋值的,使用vue绑定后,取不到值,也不知道怎么取值。。。后来一琢磨,启动顺序可以换一换,问题就这么解决了。

先放个vue的在线编辑网址:https://jsfiddle.net/chrisvfritz/50wL7mdz/

测试的页面如下:

<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="//libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <input id="TempID" v-model.lazy="message" placeholder="edit me" value=‘999‘>
</div>

  

测试JS代码如下:

$(document).ready(function(){
    var TempValue = $("#TempID").val();
     new Vue({
      el: ‘#app‘,
      data: {
        message: TempValue
      }
    })
}); 

点击 Run 即可看到效果,初始的值没有改变,如果初始化放到了外面的话,会把页面初始的值覆盖掉,因为此初始(页面加载后端赋值)非彼初始(vue自带初始)

时间: 2024-10-03 23:27:07

vue 和 jquery 加载顺序导致的问题的相关文章

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

服务器启动时Webapp的web.xml中配置的加载顺序

一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个ServletContext(servlet上下文),这个web项目的所有部分都将共享这个上下文. 3.容器将<context-param>转换为键值对,并交给servletContext. 4.容器创建<listener>中的类实例,创建监听器. 二  Load-on-startup Lo

(转)JS加载顺序

原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)--第一篇 Javascript加载执行问题探索 楼主做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享. 做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一: 原始情况 首先大家看看如下的代码: 1 <%@ Page Language="C#&qu

转:web.xml 中的listener、 filter、servlet 加载顺序及其详解

在项目中总会遇到一些关于加载的优先级问题,刚刚就遇到了一个问题,由于项目中使用了quartz任务调度,quartz在web.xml中是使用listener进行监听的,使得在tomcat启动的时候能马上检查数据库查看那些任务未被按时执行,而数据库的配置信息在是在web.xml中使用servlet配置的,导致tomcat启动后在执行quartz任务时报空指针,原因就是servlet中的数据库连接信息未被加载.网上查询了下web.xml中配置的加载优先级: 首先可以肯定的是,加载顺序与它们在 web.

加载顺序 ready onload onreadystatechange

js文件是异步加载, js是在什么时候被加载执行的 动态引入的外部 JS 文件在各浏览器中的加载顺序不一致 1/ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件):比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等: 2/onload,指示页面包含图片等文件在内的所有元素都加载完成.比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等: 支持该事件的 HTML 标签: <body>, <frame&g

onload 事件、DOMContentLoaded事件、DOM加载顺序

1.onload 事件 定义与语法 onload事件会在页面或者图像加载完成后立即发生. 法:onload="SomeJavaScriptCode“: 参数:SomeJavaScriptCode    描述:必需.规定该事件发生时执行的 JavaScript. 支持该事件的 HTML 标签:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

thinksns系统的js加载顺序整理

thinksns系统的js加载顺序整理 1.jQuery.js 2.jquery.form.js 3.common.js 4.core.js   //thinksns的核心js对象 5.module.js   //thinksns独有的HTML标签关联模型 6.module.common.js ................................................希望资深的前端大牛能给讲解一下内部的工作原理

web.xml 中的listener、 filter、servlet 加载顺序及其详解【转】

在项目中总会遇到一些关于加载的优先级问题,刚刚就遇到了一个问题,由于项目中使用了quartz任务调度,quartz在web.xml中是使用listener进行监听的,使得在tomcat启动的时候能马上检查数据库查看那些任务未被按时执行,而数据库的配置信息在是在web.xml中使用servlet配置的,导致tomcat启动后在执行quartz任务时报空指针,原因就是servlet中的数据库连接信息未被加载.网上查询了下web.xml中配置的加载优先级: 首先可以肯定的是,加载顺序与它们在 web.

jsp页面中的代码执行加载顺序介绍

1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js. 2. js在jsp中的加载顺序 页面上的js代码时html代码的一部分,所以页面加载的时候是由上而下加载.所以js加载的顺序也就是页面中<script>标签出 现的顺序.<script>标签里面的或者是引入的外部js文件的执行顺序都是其语句出现的顺序,其中js执行的过程也是页面装载的一部分.