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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
React key值的作用和使用详解
Aug 23 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
Vue Element UI自定义描述列表组件
May 18 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php中的观察者模式
2010/03/24 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
食品安全责任书
2014/04/15 职场文书
python解决12306登录验证码的实现
2021/04/18 Python