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

相关文章

  • Vue查询数据并通过bootstarp table渲染数据

    Vue查询数据并通过bootstarp table渲染数据

    这篇文章主要为大家介绍了Vue查询数据并通过bootstarp table渲染数据,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • vue中如何使用embed标签PDF预览

    vue中如何使用embed标签PDF预览

    这篇文章主要介绍了vue中如何使用embed标签PDF预览,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 详解Vue依赖收集引发的问题

    详解Vue依赖收集引发的问题

    这篇文章主要介绍了Vue依赖收集引发的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue3如何清空Reactive定义的数组

    Vue3如何清空Reactive定义的数组

    这篇文章主要介绍了Vue3如何清空Reactive定义的数组问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 浅析从面向对象思维理解Vue组件

    浅析从面向对象思维理解Vue组件

    用面向对象的思维去理解Vue组件,可以将所有的事物都抽象为对象,而类或者说是组件,都具有属性和操作。这篇文章主要介绍了尝试用面向对象思维理解Vue组件,需要的朋友可以参考下
    2021-07-07
  • vue项目使用node连接数据库的方法(前后端分离)

    vue项目使用node连接数据库的方法(前后端分离)

    这篇文章主要介绍了vue项目使用node连接数据库(前后端分离),本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 前端必知必会之Vue v-if指令详解

    前端必知必会之Vue v-if指令详解

    这篇文章主要介绍了前端必知必会之Vue v-if指令的相关资料,Vue中的条件渲染指令v-if、v-else-if和v-else用于根据条件动态创建HTML元素,通过使用比较运算符和逻辑运算符,可以编写复杂的条件逻辑,需要的朋友可以参考下
    2025-02-02
  • vue2.0项目中使用Ueditor富文本编辑器示例代码

    vue2.0项目中使用Ueditor富文本编辑器示例代码

    本篇文章主要介绍了vue2.0项目中使用Ueditor富文本编辑器示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue3子组件如何修改父组件传过来的props数据

    vue3子组件如何修改父组件传过来的props数据

    周所周知vue的props是单向数据流,可以从父组件中改变传往子组件的props,反之则不行,下面这篇文章主要给大家介绍了关于vue3子组件如何修改父组件传过来的props数据的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vuex的实战使用详解

    Vuex的实战使用详解

    这篇文章主要介绍了Vuex的实战使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论