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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
详解React中setState回调函数
Jun 14 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue实现登陆页面开发实践
May 30 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
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
php实现图片添加水印功能
2014/02/13 PHP
10条php编程小技巧
2015/07/07 PHP
php接口技术实例详解
2016/12/07 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python统计单词出现的次数
2018/04/04 Python
Python Logging 日志记录入门学习
2018/06/02 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Python如何输出百分比
2020/07/31 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
实体的生命周期
2013/08/31 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
教师演讲稿大全
2014/05/16 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
AJAX学习笔记
2021/05/18 Javascript