作者 | 秋季长青
链接 | https://my.oschina.net/u/3563169/blog/1574763
1.MVVM模式
model view view-model:数据视图模型 模型视图数据
model: 数据模型,PHP/JAVA等任何后台服务语言从数据库中获取的数据
view: 视图模型;html页面
view-model: 视图数据桥梁,mvvm框架自动完成页面的渲染和数据提交(js dom操作)
MVVM代表框架有:Angular、Vue.js等。
2. Vue.js 简介
官网介绍:Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。
对于渐进式框架有两种使用方法:页面引用和Node.js 模块开发。
作为入门,我们使用页面引用方法,学习vue.js的语法。模块开发后面再说。
3. 安装Vue.js
方法一:官网下载 vue.js 文件。
方法二:npm install vue
4. 开发工具推荐
Sublime Text 3 或者 Visual Studio Code。
我使用的是 Visual Studio Code(VSCode)。如果你也是使用该开发工具的话,这里给出几个好用的小插件:
➤ path intellisense 路径提示插件
➤ live server 热加载
➤ vue 2 Snippets Vue的代码提示工具
5. 在浏览器中加载调试组件
火狐安装:在火狐的官方插件库进行查询安装;
Chrome浏览器:通过三方网站获取下载地址,手动安装插件
三方下载地址:crx.2333.me
vue devtools.crx 的ID:nhdogjmejiglipccpnnnanhbledajbpd
6. hello world
每一次学习新的语言、新的框架,都必将经历 Hello World 程序。
直接上代码:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
<script>
window.onload = function (){ //新建Vue的实例
new Vue({
el: "#app",//el表达式,css的元素选择器
data: {//vue 中定义数据,用于页面中进行加载
hello:"Hello word !"//变量名:内容
}
})
} </script></head><body>
<div id="app">
<!-- 插值 {{ }} -->
{{ hello }} </div></body></html>
好,hello word 出来了。你以为我这样就会结束了吗?当然不是。
接下来在 上段代码倒数第四行 {{ hello }} 下一行加一行代码:
<hr /><input type="text" v-model = "hello" />
来看看结果如何:
惊不惊喜,哈哈。简单的几行代码就实现了。
7、生命周期视图
Vue.js 官网的原话是这样的:下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
那我就先把图放在这,慢慢看。
本节完~
推荐图书
VUEJS我们大家都知道,它是一个用来开发Web 界面的前端库。
前几天,在微信群里,还有人在问我,有没有免费的VUEJS教程,最好是视频,其实, 我个人认为,好的教程,不局限于教程的形式,就好像我们学习的途径,不只是看文章,看视频,我们还可以看书,请教同行朋友等等。只要想学好,方式方法很多。但是不管怎么样,要想系统的学习一门技术与学习,读书那绝对是最好的方法。所以我今天重点为大家推荐了这本《Vue.js权威指南》
《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面的最佳选择。《Vue.js权威指南》一共30 章,由浅入深地讲解了Vue.js 基本语法及源码解析。主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。
![](https://i-blog.csdnimg.cn/blog_migrate/102b2045ad04a57fdec83ecf1c626eb0.jpg)
Vue.js权威指南
作者:张耀春 等著
![](https://i-blog.csdnimg.cn/blog_migrate/9c20e5da86f4b6cb65d67b37efc51003.jpg)
Vue.js实战
作者:梁灏
![](https://i-blog.csdnimg.cn/blog_migrate/a3bc401951581c5e3be43744cef6b931.jpg)
Web性能权威指南
作者:Ilya Grigorik
![](https://i-blog.csdnimg.cn/blog_migrate/3976a71ef2f8272a39e6f5bdfce3ffe9.jpg)
Web开发权威指南
作者:[美]克里斯·阿基诺,托德·甘迪(Chris Aquino, Todd Gandee)
![](https://i-blog.csdnimg.cn/blog_migrate/583ef708969a38c507ed22fb6b996eaa.jpg)
CSS权威指南(第三版)
作者:(美)迈耶 著,尹志忠,侯妍 译