马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2018-8-28 11:20 编辑
上一讲我们理清了为什么要开始Vue系列，简单好用还是最关键的。
本次来说一下如何使用Vue.js。
有言在先：
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
常用的3种启动Vue的方法：
由于是入门级教程，我们采用第一种离线方式。
下载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，请订阅 专辑（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-8-28 11:06:04
置顶卡
千斤顶
显身卡
发表于 2018-10-9 10:02:44
发表于 2020-6-12 12:49:40
