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 相关文章推荐
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
javascript函数式编程基础
Sep 15 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
MutationObserver在页面水印实现起到的作用详解
Jul 07 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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
linux下安装easy_install的方法
2013/02/10 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
党员思想汇报范文
2013/12/30 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
幼师辞职信范文
2015/02/27 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记