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 相关文章推荐
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
浅谈php提交form表单
2015/07/01 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
javascript学习之闭包分析
2010/12/02 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
js实现旋转木马效果
2017/03/17 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
python实现清屏的方法
2015/04/30 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
Java程序员面试题
2016/09/27 面试题
矿泉水广告词
2014/03/20 职场文书
党员岗位承诺书
2014/03/25 职场文书
新闻编辑求职信
2014/04/09 职场文书
协议书格式
2014/04/23 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
休学证明范本
2015/06/19 职场文书
安全伴我行主题班会
2015/08/13 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书