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 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
表格 隔行换色升级版
Nov 07 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php使用PDO方法详解
2014/12/27 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
python实现2048小游戏
2015/03/30 Python
Python中__name__的使用实例
2015/04/14 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python实现简易数码时钟
2021/02/19 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
医院检讨书范文
2014/02/01 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
百年孤独读书笔记
2015/06/29 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android