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 浏览器检测代码精简版
Mar 04 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
HTML的select控件美化
Mar 27 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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
eAccelerator的安装与使用详解
2013/06/13 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
js拦截alert对话框另类应用
2013/01/16 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Python实现二维有序数组查找的方法
2016/04/27 Python
Python操作MongoDB详解及实例
2017/05/18 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
python爬虫要用到的库总结
2020/07/28 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
生物制药自我鉴定
2014/01/25 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
公司给客户的感谢信
2015/01/23 职场文书
律师催款函范文
2015/06/24 职场文书