001 V How Vue.js
本帖最后由 不二如是 于 2018-8-28 11:20 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们理清了为什么要开始Vue系列，简单好用还是最关键的。
本次来说一下如何使用Vue.js。
有言在先：
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
常用的3种启动Vue的方法：
离线、CDN、NPM
由于是入门级教程，我们采用第一种离线方式。
下载Vue.js然后通过<script>调用来启动Vue，Vue：
然后通过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>
源码：
祝贺鱼油已经成功创建了第一个 Vue 应用！{:10_298:}
看起来这跟渲染一个字符串模板非常类似，但是 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{:10_297:}
下一讲让我们了解上面代码中的实例具体用法。
课后作业
1、后续教程采用哪种方式启动Vue？
2、Vue的核心是什么？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 已看,谢谢老板 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 6666 来看看 1.npm
2.view-model层？ the core of vue is viewmodel 1,离线
2.声明式,响应式 1.
2. Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 66666666666 离线
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
{:10_257:}{:10_257:}{:10_257:}牛啊 顶一顶 . {:5_108:} 1
页:
[1]