vue解决花括号数据绑定不成功的问题


Posted in Javascript onOctober 30, 2019

如下所示:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script><!--引入vue-->
 <script src="js/main.js" type="text/javascript" charset="utf-8"></script><!--引入main-->
 <body>
  <div id="app">
   <p>{{message}}</p>
  </div>

 </body>
</html>

main.js如下图所示,只包含message信息,绑定到id为app的div上。

var app=new Vue({
 el:'#app',
 data:{
  message:'hhh'
 }
})

结果显示:

{{message}}

vue.js和自己写的js都在头部引用,并不能出现理想中的message信息。

更改一下引入顺序:

先引入vue.js——再写html内容——最后引入自己写的js代码。成功!原因暂时还不清楚,待日后填坑…

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <body>
  <div id="app">
   <p>{{message}}</p>
  </div>
 </body>
 <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</html>

以上这篇vue解决花括号数据绑定不成功的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
javascript控制台详解
Jun 25 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
Bootstrap响应式表格详解
May 23 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
Vuex的API文档说明详解
Feb 05 Javascript
vue中使用rem布局代码详解
Oct 30 #Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 #Javascript
Vue中图片Src使用变量的方法
Oct 30 #Javascript
解决VUE双向绑定失效的问题
Oct 29 #Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 #Javascript
vue获取form表单的值示例
Oct 29 #Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 #Javascript
You might like
PHP 进程锁定问题分析研究
2009/11/24 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
js实现进度条的方法
2015/02/13 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python单例模式实例分析
2015/01/14 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python中实现控制小数点位数的方法
2019/01/24 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
中软Java笔试题
2012/11/11 面试题
外贸业务员工作职责
2014/01/06 职场文书
安全例会汇报材料
2014/08/23 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
寒假安全保证书
2015/02/28 职场文书
python井字棋游戏实现人机对战
2022/04/28 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS