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小框架 fly javascript framework
Nov 26 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
SVG实现时钟效果
Jul 17 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 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桌面中心(四) 数据显示
2007/03/11 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python 正则表达式的高级用法
2016/12/04 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
考试没考好检讨书
2014/01/31 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
个人年终总结开头
2015/03/06 职场文书
个人年度总结报告
2015/03/09 职场文书