Vue学习笔记02:介绍

124 阅读1分钟

Vue.js是什么?

Vue (读音 /vjuː/,类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。(这段话,有些地方我也不是很理解)

声明式渲染

Vue.js的核心是允许一个采用简洁的模板语法来声明式地将数据渲染进DOM地系统:(简而言之,Vue使用模板语法{{}}将数据渲染进DOM里)

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

在上述代码中,数据和DOM已经被建立了关联,所有的东西都是响应式的。(可以打开浏览器的控制台输入app.message='你想修改的值',此时你会发现页面上message的值也会相应地更新。)
上例中,el代表(element)把页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。而{{}}就是 vue 提供的模板语法,用来渲染数据使用的。{{}}里面放入data中的变量,即可渲染对应的值。如果你不想用{{}}的形式,可以通过delimiters进行改变。

new Vue({
    delimiters: ['${', '}']
})

经过以上设置后,渲染变量不在通过{{}},而是${}

参考链接:

  1. 官网
  2. 网友写给初学者的教程,官网看不懂的话可以来看看这个