Vue快速入门(一)基础

Winter · 03月07日

前端是一门不停更新迭代的学科,所以目前的前端框架也是非常多的,但是要说到当前最流行的框架,那还要属React、Vue、Angela。而最近几年Vue发展的越来越好,有赶超其他两位兄弟的趋势。所以了解或者掌握Vue是前端工程师必备的课题。

Vue相比React、Angela来说,语法上更为简单,也更轻便。那要快速入门Vue需要了解哪些呢?这里假设你已经掌握了HTML、CSS、JavaScript中级知识了。

  • 1. Vue基本语法、语法糖
  • 2. 怎样使用Vue创建组件,模块化
  • 3. 使用组件,组件之间调用
  • 4. Vuex状态管理
  • 5. NUXT框架
  • 6. NUXT+KOA客户端/服务端同构框架

掌握前三点你就可以Vue实战了;掌握后三点,那么你就可以搭建项目,真正创造价值了。但是这次先讲基础知识:Vue基本语法、语法糖。

声明式渲染

先看实例



<html>

<head>
  <title>Hello Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>

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

</html>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的

Vue数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

条件与循环

html代码
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
js代码
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

可以页面显示了文字:“现在你看到我了”。继续在控制台输入 app3.seen = false,你会发现文字消息消失了。

循环,v-for 指令可以绑定数组的数据来渲染一个项目列表:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

在控制台里,输入 app4.todos.push({ text: '新项目' }),你会发现列表最后添加了一个新项目。

Vue快速入门
加载中...
⌘+Return 发表
发表
评论
时间
想发表一点想法咩~

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序

如果你觉得对你有帮助的话,可以请我喝杯咖啡噢~