01、Vue.js 开篇---Vue的介绍及准备工作

来源:转载

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 程序。


直接上代码:








Document






{{ hello }}




好,hello word 出来了。你以为我这样就会结束了吗?当然不是。


接下来在 上段代码倒数第四行 {{ hello }} 下一行加一行代码:





来看看结果如何:



惊不惊喜,哈哈。简单的几行代码就实现了。


7、生命周期视图

Vue.js 官网的原话是这样的:下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。


那我就先把图放在这,慢慢看。




每篇一结尾:


一程序员去面试,面试官问:“你毕业才两年,这三年工作经验是怎么来的?!”程序员答:“加班。”


分享给朋友:
您可能感兴趣的文章:
随机阅读: