目标
最近在学习vue的过程中发现网上的vue教程总有些不同的问题，有的教程上来只说语法，有的教程上来就用vue-cli来建项目，但是vue-cli是整合了webpack等多个插件的工具，不利于我们学习原理。我觉得一个好的教程应该具备以下几点：

浅显易懂，说人话
每节课都是一个完整的可以运行的例子
由浅入深的介绍知识点，中间不能有断层
所以我打算写一个我自己的vue入门教程。我们先从一个土得掉渣的例子开始吧

土的掉渣的例子
首先，我们来新建一个空的文件夹，就叫 learn-vue吧

mkdir learn-vue
cd learn-vue
然后新建一个页面index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>learn-vue</title>

  </head>

  <body>

Hello World

  </body>

</html>

然后将该文件夹部署到apache或者nginx之类的服务器软件，怎么部署，用哪一款服务器软件随你喜欢，这个步骤由于跟本课程无关所以不讲解细节。

部署后，访问该网站我们能看到Hello World字样

现在我们的项目文件夹中只有一个index.html

什么是最土的页面结构？
在使用webpack，分component之前，你所能想到最土的js框架学习例子是什么？我猜就是像我们刚学js一样，在网页上直接调用vue的js文件，然后在页面上调用吧。我们现在就来试试。

添加js引用
首先，从官网上把vue.js的源文件调用代码直接拷贝到我们的例子之中：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
创建dom组件
vue将页面上的元素都看成是一个个组件，每个组件在js内存中都会对应一个抽象模型。通过对这个模型的操作达到对dom元素的操作，从而让js编程变得很优雅，可读性很高。

我们来加入第一个组件。vue中的组件由html模板+js脚本+css样式组成。其中css样式是可选的，在这里我们就先不引入css样式。先写第一个html模板吧。我们把之前的hello world字样换成

<div id="app">

      <p>{{ message }}</p>

    </div>

其中{{ message }} 语法vue的模板语言语法，表示输出变量 message 的内容。我们为这个div定义来id属性，值为app。目的是方便js脚本定位它，并将它抽象成一个对象。

创建js组件
接下来，我们来写js脚本。在刚刚建立的 dome对象和body之间加入script代码片段：

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue.js!'

  }

})

</script>

new Vue表示建立一个dom所对应的抽象对象。el属性定义了使用什么selector来获取到这个对象对应的dom，因为我们要对应的dom对象id为app，所以此处使用 #app 作为 selector

渲染页面
一旦vue将某个dom对象抽象为了一个js对象后，就会对其进行渲染，我们之前写的 {{ message }} 就会被渲染为真正你想在页面上显示的文本。data属性定义了渲染这个dom对象是需要赋值的属性集合。我们定义message属性的值为"Hello Vue.js!"

完整的页面代码为：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>learn-vue</title>

  </head>

  <body>

    <div id="app">

      <p>{{ message }}</p>

    </div>

    <script>

      new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue.js!'

        }

      })

      </script>

  </body>

</html>

保存后刷新页面，你将会看到

ok, 你完成了第一个vue的学习例子。这个例子极土，但是很接地气，在下一个例子中我们将会对这个例子进行改造，让它不那么土。

课程源码
git clone https://github.com/alexxiyang/learn-vue.git
git checkout lesson1
---------------------
作者：alexxiyang
来源：CSDN
原文：https://blog.csdn.net/nsrainbow/article/details/80589476
版权声明：本文为博主原创文章，转载请附上博文链接！

Vue 不睡觉教程1-从最土开始的更多相关文章

  1. Vue 不睡觉教程3 - 来点实在的：自动计算剩余时间的任务列表

    目标前两课教的是入门和文件结构.都没有什么实在的东西.这次我们要来点实在的.我们要做出一个待办列表.这个待办列表有以下特点: 可以自动从文本中抽取出这件事情的开始时间可以显示当前距离这件事情的开始时间 ...

  2. Vue 不睡觉教程2 - 洋气的文件结构

    目标书接上回,上回那个例子实在太土了.实际开发中我们不可能把整个网站的js和html全写到一个页面上.所以我们这节课的目标在于改造这个例子的文件结构,让它不那么土Let's do it 环境参数vue ...

  3. Vue.js入学教程

    Vue.js是什么Vue.js 是用于构建交互式的 Web 界面的库.Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.Vue.js(类似于view)是一套构建 ...

  4. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二七║ Nuxt 基础：框架初探

    缘起 哈喽大家好,又是周四了,俗话说周四来了,周末还远么哈哈,老张我也想下周请假,来个16天的大长假哟,不知道大家是怎么请假的,近来发现文章下边已经没有人评论了,赶脚比较凄凉了,大家看到的麻烦点个赞呀 ...

  5. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  6. [转]Vue.js 入门教程

    本文转自:http://www.runoob.com/w3cnote/vue-js-quickstart.html 什么是 Vue.js? Vue.js 是用于构建交互式的 Web  界面的库. Vu ...

  7. Vue入坑教程（二）——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  8. Vue.js 系列教程 ①

    原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...

  9. Vue.js 系列教程 ②

    这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件,Props 以及 Slots.这不是一个完整的指南,而是基础知识的概述,所以你可以了解Vue.js ...

随机推荐

  1. cnblog博客管理

    http://www.cnblogs.com/wc1903036673/                                        12436109 https://www.cnb ...

  2. 文件打包代码更新 使用json记录打包文件信息

    经过之前的几次试验 决定使用json记录打包文件信息 #include "Package.h" #include "json/json.h" #include ...

  3. 实战：MySQL Sending data导致查询很慢的问题详细分析（转）

    出处:http://blog.csdn.net/yunhua_lee/article/details/8573621 这两天帮忙定位一个MySQL查询很慢的问题,定位过程综合各种方法.理论.工具,很有 ...

  4. php利用mpdf生成pdf并保存到目录

    下载mpdf7.0两种方法 (1). github地址:https://github.com/mpdf/mpdf (2). composer require mpdf/mpdf <?php er ...

  5. struct pollfd

    struct pollfd 2010年04月15日 星期四 下午 03:59 int poll (struct pollfd *fds, size_t nfds , int timeout); str ...

  6. visual studio 2013 git 记住密码

    原有配置: C:\Users\Administrator 下.gitconfig内容为 [user] name = lijf4 email = lijf4@lenovo.com 删除,修改为 [cre ...

  7. Oracle EBS Add Responsibility to User by the Responsibility reference of Other User.

    Oracle EBS 11i Add Responsibility to User by the Responsibility reference of Other User. Warning: R1 ...

  8. CDI(Weld)高级<4> Event(事件) （转）

    目录[-] 1. Event payload(事件的有效载入) 2. Event observers(event的观察者) 3. Event producers(event生产者) 4.Annotat ...

  9. 代码修改之后MSbuild编译不出最新的dll解决方法

    问题: 使用jenkins发布的时候,开发不断反馈自己修改的文件使用jenkins没有发布到测试环境.经过查证发现使用MSBUILD编译的时出现修改的文件编译出的日期不是最新日期,但是使用VS编译就不 ...

  10. Hadoop 集群配置记录小结

    Hadoop集群配置往往按照网上教程就可以"配置成功",但是你自己在操作的时候会有很多奇奇怪怪的问题出现, 我在这里整理了一下常见的问题与处理方法: 1.配置/etc/hosts ...