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 Discuz代码中的msn聊天小功能
May 25 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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读取文件内容的方法汇总
2015/01/24 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python切图九宫格的实现方法
2019/10/10 Python
Python txt文件如何转换成字典
2020/11/03 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
咖啡厅创业计划书范本
2014/01/22 职场文书
晚会闭幕词
2015/01/28 职场文书
教育读书笔记
2015/07/02 职场文书
小学毕业感言200字
2015/07/30 职场文书