Vue.js基本代码结构和插值表达式

最新推荐文章于 2025-03-08 21:36:17 发布

小伟同学

最新推荐文章于 2025-03-08 21:36:17 发布

阅读量355

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_41416856/article/details/91790682

版权

Vue.js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vue.js的基本代码结构，重点讲解了插值表达式（Mustache语法）的使用，它用于数据绑定，并能实时响应数据对象上msg属性的变化。Vue.js还支持完整的JavaScript表达式，使得数据绑定更加强大。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue - 基本的代码结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1、 导入Vue.js -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 2、 Vue 实例所控制的页面元素区域 -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    // 3、 创建一个Vue的实例
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>
</body>
</html>

Vue - 插值表达式

插值表达式（“Mustache”语法）是最常见的数据绑定的形式。
插值表达式标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
插值表达式除了简单的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。


	{{ number + 1 }}
	
	{{ ok ? 'YES' : 'NO' }}
	
	{{ message.split('').reverse().join('') }}