快速上手《VueJs+elementUI开发点菜应用》

Posted 2021-05-01 web前端教室

这个课程一共分9节，前半部分是vueJs的讲解介绍，后半部分是使用vueJs + elementUI+node+es6，来开发一个点菜的小应用。

章节目录如下，

1、no.1_介绍与安装

2、no.2_指令

3、no.3_表单与组件

4、no.4_vue-cli与路由

5、no.5_demo项目介绍

6、no.6_demo(1)

7、no.6_demo(2)

8、no.6_demo(3)

9、no.9_vuex简介

<!-- 学习笔记 -->

Vue.js，它是一个用来构造用户界面的视图层的框架。

它的关注点，只关注视图层。

它的亮点，是数据绑定、数据驱动视图。

它的目标，使用尽可能简单的api来实现响应式的数据绑定和组合的视图“组件开发”。

我个人建议，如果在开始时对组件不太理解，“那么可以把组件理解为容器”。

<!--  -->

现在主流的开发方式，都是通过nodeJs安装vue-cli，使用脚手架来开发。

但现在我们在这里，先通过<script></script>标签的形式来引入vue，

先简单的学习一些它的常用命令。

<!--  -->

我在这里使用的vueJs的版本是一个线上的版本，

它的版本号是 2.4.2

这样可以直接使用，而不必下载js文件到本地。

链接，

https://cdn.bootcss.com/vue/2.4.2/vue.min.js

<!-- 模板语法 -->

vuejs，它是基于html的语法，你可以把dom节点绑定到vue实例上面。

它的核心，是允许你把vue实例中的数据，采用声明式的语法，

把数据渲染到dom上。

然后又因为它是响应式的，那么当你的dom的状态发生改变时，

VueJs会自动的进行渲染与更新。

<!--  -->

咱们 学习一个新东西，最能有成就感的，就是你做的效果，出来了。

采用 {{  }} 的文本插值的方式，把文本内容显示到页面中去。

<!--  -->

vue它本身包含许多“指令”，这些指令各自包含不同的功能，

v-html，它是用于向页面当中去输出html的内容

v-bind，它是根据true或false，来决定是否起作用

看 demo3.html

vuejs它可以使用 {{}} 来运行js所支持的表达式：

<!--  -->

它的指令，都是 v-开头的一些属性。

它的功能就是，你可以认为是”监听“，或是“响应”都可以，

就是当数据发生变化的时候，将变化反映到dom上面。

v-if 和 tempalate，

看 demo5.html

v-if，决定某个dom节点，是否参与页面的渲染

<!--  -->

template，它可以一次插入一段内容，

看 demo6.html

（1）、请加我为好友，并把我拉入“你所在的前端微信群”；

（2）、把这篇文章转发到“你拉我进入的那个前端微信群”里，让我看到，五分钟后我会发你下载的网盘链接。

* 注意顺序不要搞错了，一定要先执行第一步，再进行第二步 *