Vue 不睡觉教程1-从最土开始
目标
最近在学习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
版权声明:本文为博主原创文章,转载请附上博文链接!
最新文章
- Foundation框架—数据类(NSData)
- Elasticsearch(入门篇)——Query DSL与查询行为
- 从头来之【图解针对虚拟机iOS开发环境搭建】
- 直接运行可执行文件linux终端一闪而过
- thinkphp框架中session常识
- iOS - UIAlertView
- Hql 中实用查询时候 引号的使用
- SignalR安装以及安装问题
- 打包ipa分发给测试机安装步骤
- HDU更多的学校比赛9场 HDU 4965Fast Matrix Calculation【矩阵运算+数学技巧】
- Promise与异步
- 使用GitHub+hexo搭建个人独立博客
- 使用Android服务,实现报警管理器和广播接收器
- 数据库【mysql篇】学习笔记
- mask_rcnn训练自己的数据集
- Java高并发和多线程系列 - 1. 线程基本概念
- 机器学习&;深度学习基础(机器学习基础的算法概述及代码)
- Spring整合Redis&;JSON序列化&;Spring/Web项目部署相关
- 搭建和启动javaWeb项目
- SCOJ 4423: Necklace polya