vue解决花括号数据绑定不成功的问题

更新时间：2019年10月30日 08:39:27 作者：闭曈彤

今天小编就为大家分享一篇vue解决花括号数据绑定不成功的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

<!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解决花括号数据绑定不成功的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vuex的实战使用详解
这篇文章主要介绍了Vuex的实战使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
基于vue1和vue2获取dom元素的方法
下面小编就为大家分享一篇基于vue1和vue2获取dom元素的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue.js根据代码运行环境选择baseurl的方法
本篇文章主要介绍了vue.js根据代码运行环境选择baseurl的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
Vue+Echarts实现基本K线图的绘制
这篇文章主要为大家详细介绍了如何利用Vue和Echarts实现基本K线图的绘制，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03
vue项目中常用解决跨域的方法总结(CORS和Proxy)
在vue项目中,一般我们会遇到跨域的问题,vue项目中解决跨域是非常简单的,下面这篇文章主要给大家介绍了关于vue项目中常用解决跨域的方法,主要解释CROS和Proxy两种方式,需要的朋友可以参考下
2022-12-12
vue el-select与el-tree实现支持可搜索树型
本文主要介绍了vue el-select与el-tree实现支持可搜索树型，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue3的setup语法糖简单封装ckediter的过程
Vue3官方提供了 script setup 语法糖,只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,今天通过本文给大家分享vue3的setup语法糖简单封装ckediter的过程,感兴趣的朋友一起看看吧
2023-10-10
关于Vue中img动态拼接src图片地址的问题
这篇文章主要介绍了关于Vue中img动态拼接src图片地址的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-10-10
Vue中路由守卫的具体使用
导航守卫就是路由跳转前、中、后过程中的一些钩子函数，本文详细的介绍了Vue中路由守卫的具体使用，具有一定的参考价值，感兴趣的可以了解一下
2021-12-12
vue实力踩坑当前页push当前页无效的解决
这篇文章主要介绍了vue实力踩坑当前页push当前页无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04