Vue.js(读音/vjuː/,类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue也完全能够为复杂的单页应用程序提供驱动。Vue.js起步:
引入相应文件:
<script src="https://unpkg.com/vue"></script>
声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:
<!-- html 文件中 -->
<div id="app">
{{ message }}
</div>
<!-- js 文件中 -->
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
通过浏览器查看效果图为:
创建 vue 实例:每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的,当创建一个 Vue 实例时,你可以传入一个选项对象。可以使用这些选项来创建你想要的行为。
<!-- js 文件中 -->
var vm = new Vue({
// 选项
})
据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。比如 created 钩子可以用来在一个实例被创建之后执行代码:
<!-- js 文件中 -->
new Vue({
data: {
a: 1
},
created: function () {
console.log('a is: ' + this.a)
}
})