目标
最近在学习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. 静态HTML服务器

    主要代码 #pragma once#include "pre.h"#include <thread> NAMESPACE(DEF) class Socket {publ ...

  2. 13 Calculating Expected Offspring

    Problem For a random variable XX taking integer values between 1 and nn, the expected value of XX is ...

  3. ## 20155336 2016-2017-2《JAVA程序设计》第八周学习总结

    20155336 2016-2017-2<JAVA程序设计>第八周学习总结 教材学习内容总结 第14章 NIO与NIO2 NIO简介 NIO使用频道来衔接数据结点,在处理数据时,NIO可以 ...

  4. [毕业设计][期末作业]二手闲置小程序 免费信息发布系统功能源码（小程序+php后台管理）

    最近做了一个小程序,主要是二手闲置免费信息发布系统的功能,里面包括了登录,发布商品,商品管理,违规投诉,canva商品海报生成,分享等一些基础的功能,可以说代码都是自己辛辛苦苦写出来的.可作为毕业设计 ...

  5. DbMigration的使用方法

    先打开:工具=>NuGet程序包管理器=>程序包管理器控制台然后输入Enable-Migrations回车然后输入Add-Migration Name回车(这里Name你可以自己命名)最后 ...

  6. 如何让你的项目同时支持go vendor和go module

    目录 如何让你的项目同时支持go vendor和go module 1. go module简介 2. 使用go mod命令管理项目 2.1 初始化环境 2.2 构建 3. 保持兼容性 4. 使用go ...

  7. 当我们在谈论multidex65535时，我们在谈论什么

    本文来自网易云社区 作者:郑文 首先我们并不在讨论车牌号.本文尽量避免谈论重复的技术点,只探讨一下multidex提供给我们的技术启示. 原理 multidex技术原理可以分成两个部分: 在app启动 ...

  8. Android中Textview显示Html，图文混排，支持图片点击放大

    本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...

  9. 瞄一眼，带你走进SparkSQL的世界

    本文由  网易云发布. 作者:范欣欣(本篇文章仅限知乎内部分享,如需转载,请取得作者同意授权.) 最近想来,大数据相关技术与传统型数据库技术很多都是相互融合.互相借鉴的.传统型数据库强势在于其久经考验 ...

  10. 类似gitlab代码提交的热力图怎么做？

    本文由  网易云发布. 作者:张淞(本篇文章仅限知乎内部分享,如需转载,请取得作者同意授权.) 昨夜,网易有数产品经理路过开发的显示屏前见到了类型这样的一张图: 于是想到有数能不能做出这样的图来?作为 ...