您的位置：首页 > 产品设计 > UI/UE

Vue.js起步学习

2018-03-14 14:20 609 查看

1.Vue简介

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

2.Vue安装

方法一：在 Vue.js 的官网上下载 vue.min.js 并用 script标签引入。

方法二：在html页面中的head标签里直接加入

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

3.Vue的语法格式

<script>
var Vue = new Vue({
// 选项
})
</script>

4.Vue构造器的参数

el 参数:是 DOM 元素中的 id。

下面是定义数据对象。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

5.Vue的实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

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

浏览器显示结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航