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可突破windows弹退效果代码
Aug 09 Javascript
js对象的比较
Feb 26 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
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
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
js函数般调用正则
2008/04/08 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
一年级班主任感言
2014/03/08 职场文书
年终工作总结范文2014
2014/11/27 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
物业保洁员管理制度
2015/08/05 职场文书
车间班组长竞聘书
2015/09/15 职场文书