001 V How Vue.js

不二如是 · 发表于 2018-8-28 11:06:04

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2018-8-28 11:20 编辑

登录/注册后可看大图

上一讲我们理清了为什么要开始Vue系列，简单好用还是最关键的。

本次来说一下如何使用Vue.js。

有言在先：

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

常用的3种启动Vue的方法：

离线、CDN、NPM

由于是入门级教程，我们采用第一种离线方式。

下载Vue.js然后通过<script>调用来启动Vue，Vue：

vue.zip (78.42 KB, 下载次数: 29)

然后通过script调用：

<script src="js/vue.js"></script>

复制代码

剩下的什么开发环境，生产模式暂且不用管，先这么用起来再说～

对于后期我们才会遇到Webpack我们到时候在说新的方式。

官方更多指导请看：传送门

Hello World

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

为了更快的使用Vue并感受其渐进式框架的快感，用最简单的“Hello World”来实操。

创建一个div：

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

复制代码

创建script：

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

复制代码

源码：

firstVue.zip (79.13 KB, 下载次数: 11, 售价: 2 鱼币)

祝贺鱼油已经成功创建了第一个 Vue 应用！

看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

继续感受何为“响应式”

再来一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《Vue-庖丁解牛》案例演示">
<meta name="author" content="鱼C工作室">
<title>鱼C-Vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: '学习《零基础入门学习Web开发》（HTML5 & CSS3）篇' },
{ text: '学习《零基础入门学习Web开发》（JavaScript）篇' },
{ text: '学习《Vue-庖丁解牛》' }
]
}
})
</script>
</body>
</html>

复制代码

没错原来写在标签中的数据，被抽离出来写在代码中。

后续只要修改代码，页面呈现就会跟着相应变化，虽然简单但是已经了Vue的大门～

没错，这就是Vue

下一讲让我们了解上面代码中的实例具体用法。

课后作业

1、后续教程采用哪种方式启动Vue？

2、Vue的核心是什么？

答案：

游客，如果您要查看本帖隐藏内容请回复

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅专辑（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

差点夹不住屁 · 发表于 2018-10-9 10:02:44

已看,谢谢老板

Ruide · 发表于 2020-4-7 17:32:38

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

一笙彤 · 发表于 2020-6-9 21:53:35

6666

_2_ · 发表于 2020-6-12 12:49:40

来看看

suweixuan1998 · 发表于 2020-6-23 09:47:14

1.npm
2.view-model层？

xuan1788 · 发表于 2020-6-28 14:16:24

the core of vue is viewmodel

kmq116 · 发表于 2020-7-19 22:30:27

1,离线
2.声明式,响应式

iguazu · 发表于 2020-9-5 20:05:11

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

kkiimm996 · 发表于 2020-11-20 21:49:49

66666666666

以梦喂马 · 发表于 2021-3-28 20:18:27

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

huategl · 发表于 2021-11-2 20:14:18

牛啊

郭燕520 · 发表于 2021-11-11 10:36:45

顶一顶

HanYanShuang · 发表于 2022-1-6 12:33:42

大仙爱吃糖 · 发表于 2022-5-2 01:48:17

jack6666 · 发表于 2022-10-24 19:43:30

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 001 V How Vue.js

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: