Vue 模板语法

最新推荐文章于 2024-07-29 16:57:07 发布

spongeboblz

最新推荐文章于 2024-07-29 16:57:07 发布

阅读量475

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/u014296316/article/details/89060443

版权

本文介绍了Vue模板语法，包括文本插值、JavaScript表达式、v-if、v-model、v-bind、v-on及其修饰符的使用，帮助读者掌握Vue基础指令操作。

摘要由CSDN通过智能技术生成

1. 前言

一开始我一直以组件化的思维去学习Vue，但学习的效果不是很有效，生出了很多疑惑的地方。的确Vue是通过模板实现了组件化，但是在学习的过程中我们不能一下子就蹦到组件去，得需要去了解更多更多底层的东西，才能更好的把握上层的东西。
这一篇主要是了解一下Vue模板语法。知道Vue可以采用什么类型的表达式去输出，浅尝辄止，不会面面俱到把每种语法都做细致的介绍。
Vue是一个渐变式的框架，渐变式的含义是你可以在已有的js项目中，一页页的去重构为Vue。这对我们学习Vue的语法也有好处，我们只需要引入一个Vue的js文件就可以学习Vue的模板语法了。

2. 创建HTML文件

编写简单的Vue实例
- el 属性映射到对应的id
- data 里面是我们可以使用的属性值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>myfirvue</title>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<div>Message: {
  { message }}</div>
</div>
</body>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

</script>
</html>