0一、Vue.js 开篇－－－Vue的介绍及准备工做

时间 2019-11-13

标签 vue.js vue 开篇介绍准备栏目 JavaScript 繁體版

原文原文链接

1. MVVM模式

model view view-model：数据视图模型模型视图数据css

model: 数据模型，PHP／JAVA等任何后台服务语言从数据库中获取的数据html

view: 视图模型；html页面vue

view-model: 视图数据桥梁，mvvm框架自动完成页面的渲染和数据提交（js dom操做）程序员

MVVM表明框架有：Angular、Vue.js等。面试

2. Vue.js 简介

官网介绍：Vue.js (读音 /vjuː/，相似于 view) 是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不只易于上手，还便于与第三方库或既有项目整合。数据库

对于渐进式框架有两种使用方法：页面引用和Node.js 模块开发。npm

做为入门，咱们使用页面引用方法，学习vue.js的语法。模块开发后面再说。浏览器

3. 安装Vue.js

方法一：官网下载 vue.js 文件。app

方法二：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" />

来看看结果如何：

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

七、生命周期视图

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

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

每篇一结尾：

一程序员去面试，面试官问：“你毕业才两年，这三年工做经验是怎么来的？！”程序员答：“加班。”