介绍
Vue.js 是什么
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
尝试 Vue.js 最简单的方法是创建一个 .html
文件,然后通过如下方式引入 Vue:
<script src="https://cdn.jsdelivr.net/npm/vue"></script> |
vue安装给出了更多安装 Vue 的方式。请注意我不推荐新手直接使用
vue-cli
,尤其是在你还不熟悉基于 Node.js 的构建工具时。(这个我自己前期踩过很多雷)
vue的简单应用:
1.1
<div id="app"> {{ message }} </div> |
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) |
Hello Vue除了文本插值,我们还可以像这样来绑定元素特性:
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> |
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } }) 结果: |
你看到的
v-bind
特性被称为指令。指令带有前缀 v-
,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title
特性和 Vue 实例的 message
属性保持一致”。条件与循环
控制切换一个元素是否显示也相当简单:
<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> |
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: '整个牛项目' } ] } }) |
处理用户输入
为了让用户和你的应用进行交互,我们可以用 v-on
指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button> </div>
var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })结果:
这是简单的吸引入门,下面开始正式的入门