持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

Vue

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

Vue快速入门

Vue常用指令

指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如: v-if，v-for... 常用指令：

v-bind

<div id="app">
    <a v-bind:href="url">点击一下</a>
    <a :href="url">点击一下</a>
</div>

两种写法相同

上述v-model呈现出来的效果是

此时改变框中url的值，“点击一下”就会到达修改后的网址

v-on

v-if等等

v-if与v-show的区别在于：

v-show不管怎么样都存在在页面上，如果""中条件不符合则将display属性设置为none即不可见

而v-if则是不符合则不会在页面存在

相同在于渲染效果相同

v-for

Vue生命周期

(最重要的)

mounted:挂载完成，Vue初始化成功，HIMIL且来。

发送异步请求，加载数据

mounted(){
    alert("加载完成")

}

t:此时这个alert下会显示所有的标签，即使是不符合if语句的标签也会被显示出来

如图：

案例:用vue简化前面品牌列表数据查询和添加功能

t:即用vue来简化代码，简化dom操作

新增品牌

Element

Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页

组件:组成网页的部件，例如超链接、按钮、图片、表格等等~

Element快速入门

<body>
<div id="app">
    <el-row>

        <el-button type="danger">删除</el-button>
    </el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app"
    })
</script>
</body>

Element布局

有两种布局方式

Layout布局:通过基础的24分栏，迅速简便地创建布局

Container布局容器:用于布局的容器组件，方便快速搭建页面的基本结构

直接在官网上搜即可完成

记得在下面加上

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app"
    })

Element组件

t:vue框架配合element就可以做出十分好看的网页，所以掌握一门前端技术也十分重要

水果管理系统思路分析（初级）

PS：该过程只是对中间步骤的粗略分析，过程中实现的方法不懂的可以看菜鸟文档中Servlet和jsp的相关内容。

1.JDBC连接MYSQL数据库：

在BaseDAO中进行连接

因为还没有学习jdbc，所以该操作直接复制粘贴即可。

2.创建一个类（fruitDAO），包含着增删改查等方法。

3.由2中创建的类，再创造一个类（fruit.dao.impl）用来在每个方法中执行sql语句使得mysql可以执行相应操作。

4.创造Fruit类，添加各属性的get，set方法。

5.由于是初级，先创建ViewBaseServlet extends HttpServlet。再依次创建每个方法的Servlet方法。AddServlet，DelServlet，EditServlet，IndexServlet，UpdateServlet5种方法都继承于ViewBaseServlet 。在ViewBaseServlet中对Servlet中的init（初始化方法）方法进行重写，如下图所示

资源跳转，重定向等操作请移步至readme.txt查看

ps：doGet，doPost等方法可以在菜鸟文档中查看（因为我不会）

6.前端页面直接进行查看就行了

7.web设置目录为@WebServlet（tomcat上的地址目录）

中级

虽然基本需求已经实现了，但在业务中上述操作会造成代码冗余，因此还需要做些调整

1.引入MVC的概念：为了防止代码冗余，因此将每个Servlet方法类共同封装在一个FruitServlet类中。通过switch判断该调用什么方法

理解：由上图变至下图

2.再进阶：

因为日常生活中不仅仅只有水果系统，还要用户系统，订单系统

等等，因此引入中央控制器这个概念，用来调控调用哪种系统

将Servlet修改为controller（控制器），用来控制方法的调用

（暂且更新到此）

VUE

Vue