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 相关文章推荐
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
在vue项目中使用md5加密的方法
Sep 14 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Numpy之random函数使用学习
2019/01/29 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
商业活动邀请函
2014/02/04 职场文书
感恩寄语大全
2014/04/11 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Python实现简单的猜单词
2021/06/15 Python
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android