1.Vue框架

JavaScript升级版，JS它脚本语言，Vue框架
语言它my生命，api工具类
文章中心思想，有生命力
Vue框架思想，MVVM框架思想，数据驱动思想，组件化思想

2.j2ee框架分层思想淋漓尽致体现，MVC(model view controller)

MVVM(model view viewmodel)

model：代表数据
view：代表页面展现
viewmodel：代表如何在页面中展示数据

数据和页面代码分离
JSP，页面html代码和数据的代码交织
大型项目：

<%=msg%>
如果上百行div你还能分清楚哪个是哪个吗？

分层体系对小系统而言，复杂，但是对大系统而言结构清晰，各司其职。
分层体系可以针对每个层进行优化

3.渐进式框架

一般的框架的特点，全盘接收，要么全部使用，要么你就别用！
Vue天生可以按需配置，你需要什么部分的功能，我就提供什么部分的功能，你需要全部功能，那我就给你全部功能。

a.核心core Vue.js
可以只使用vue.js
可以只使用vue.js + components组件
可以只使用vue.js + components组件 + router路由
可以只使用vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）

4.为什么Vue要提供额外命令v-* ?

html、css
html表现力太弱，html弱语言，脚本语言
html它能if语句？for语句？
动态网站，根据当前用户可能展现内容不同?
实现登录用户名展现:欢迎…
jsp+jstl(html，java判断最终生成html，动态网站)
性能慢(服务器)，代码交织(JAVA、html代码、css代码)

Vue在页面上进行动态判断！if，利用v-if实现
性能高(浏览器)ajax请求，返回只要数据json，然后进行vue渲染
网络资源少，ajax从页面出发，性能高，不占资源

这就是为什么我们vue框架能流行，这么多好处
大前端是必有之路！

新技术远超企业多年工作经验人员，企业招聘不是让你精通，而是对你一个初学者要求，主流技术了解，有培养价值！

扫描二维码关注公众号，回复： 12367006 查看本文章

JS升级到Vue

css升级bootstrap升级element-ui

学习知识:
1.组件化，componts 自定义组件
2.如果引入第三方组件 element-ui
3.按钮、表格、弹出框
Vue+element-ui如何编程

Vue-cli脚手架，生成jt项目(级别)
要求:固定事情固定地方存储或者编写，

启动web服务：nodejs/后端会用tomcat
npm run dev
在这里插入图片描述

不要使用运行启动！

在这里插入图片描述

接下来让我们分析jt文件内容

在这里插入图片描述

main.js 全局组件和css样式导入，所有子组件都受用
App.vue 根组件，所有定义都是子组件，它来调用子组件进行展示
*.vue 文件内容3部分

template html代码+vue代码（编译）
script，js/vue代码，
export default唯一导出组件，vue就可以调用这个组件
name: ‘App’ 给组件起一个名称：App
import App from ‘./App’
import App from ‘./App.vue’
style 组件自身的私有样式修饰

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
加上scoped属性，就限制css只对当前组件生效

	操作系统规范：
	你创建一个目录，已经有两个隐藏目录
	. 代表当前路径
	.. 代表上级路径

	style

基础知识

安装依赖包：
链接：https://pan.baidu.com/s/1BoG2oWv6vuILlOKfCkh0Mg
提取码：hl47

启动服务，连续按2次Ctrl+C退出，输入命令npm i element-ui -D 执行下载

安装依赖包
npm i element-ui -D

在-D开发环境中安装组件 element-ui
在这里插入图片描述

下载完成后打开HB，找到jt(自己定义的名字)目录，找到src，把element-ui包导入

导入element-ui
全局main.js（导包，css）
在这里插入图片描述调用elementui，修改main.js

//导入element-ui包,nmp安装包
//npm i element-ui -D
import ElementUI from 'element-ui';
//导入element的css支持
import 'element-ui/lib/theme-chalk/index.css'
//引用这个element-ui
Vue.use(ElementUI)

1.找到src下components文件夹，自定义组件 Book.vue

必须放在src/components目录下
自己加一个按钮
在这里插入图片描述怎么使用自定义组件?（注册）
a. 给组件起一个名字

<script>
export default {
     
     
  name: "Book"
}
</script>

b. 在App.vue根组件中声明调用这个组件
在template中引用这个组件<Book></Book>

<template>
  <div>
    <el-button type="primary">
      点我有惊喜2
    </el-button>
  </div>
</template>

<script>
  export default{
     
     
    name:"Book"
  }
</script>

<style>

</style>

修改一下 HelloWorld.vue的内容

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <h2>Essential Links</h2>
    <button>点我有惊喜</button>
    </div>
    </template>
<script>
 
export default {
     
     
  name: 'HelloWorld',
  data () {
     
     
    return {
     
     
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
     
     
  font-weight: normal;
}
ul {
     
     
  list-style-type: none;
  padding: 0;
}
li {
     
     
  display: inline-block;
  margin: 0 10px;
}
a {
     
     
  color: #42b983;
}
</style>

进入App.vue，配置Book页面

在这里插入图片描述

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Book> </Book>
  </div>
</template>

<script>
  /*
export default {
  name: 'App'
}*/
/*
import 导入子组件
components 代表我的声明子组件的集合
'./components/Book.vue' 必须写，不写报错
*/
import Book from './components/Book.vue' /*导入子组件*/
export default{
     
     
  components:{
     
     
    Book
  }
}
</script>

<style>
#app {
     
     
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

导入成功的页面效果:

在这里插入图片描述

安装element-ui组件，出错

1）重新安装一遍，可能网络异常，启动时，报错
2）npm i element-ui -D #i代表安装，D代表开发环境
npm install element-ui -S #生产环境
3）cnpm，安装这个命令，来执行上面语句

相关字体、js、css文件总目录element-ui必须放在src目录下

布局容器 container

用于布局的容器组件，方便快速搭建页面的基本结构：
：外层容器，当子元素
：顶栏容器
：侧边栏容器
：主要区域容器
：底栏容器
在这里插入图片描述

图标 icon

https://element.eleme.cn/#/zh-CN/component/icon
在这里插入图片描述

按钮 button

https://element.eleme.cn/#/zh-CN/component/button
在这里插入图片描述

表格 Table

https://element.eleme.cn/#/zh-CN/component/table

我们先大概了解一下

表格：
样式

 <template>
    <el-table
      :data="tableData"   //v-bind
      style="width: 100%">
      <el-table-column   //表格列：单元格
        prop="date"      //去获取数据key
        label="日期"     //列名
        width="180">     //列的宽度
      </el-table-column>

数据

 <el-table
  export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },

我们用book.vue进行测试：

<template>
  <div>
    <el-row>
    <el-button type="primary">点我有惊喜</el-button>
    </el-row>
    <el-row>
      <el-table>
      <el-table-column label="书名">
      </el-table-column>
      <el-table-column label="作者">
      </el-table-column>
      <el-table-column label="价格">
      </el-table-column>
      <el-table-column label="介绍">
      </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
  export default{
     
     
    name:"Book"
  }
</script>
<style>
</style>

网页效果：
在这里插入图片描述

当前行 scope

<template slot-scope="scope"> vue提供的slot-scope槽，scope变量名
scope.row 代表当前行数据
scope.$index 代表当前行的索引值
@click="del(index)" 传递当前行索引值
@click="toupdate(scope.$index,scope.row)" 传递当前行的数据

对话框 dialog

https://element.eleme.cn/#/zh-CN/component/dialog

输入框 input

https://element.eleme.cn/#/zh-CN/component/input

表单 form

https://element.eleme.cn/#/zh-CN/component/form

全局变量支撑

  data(){
    return {
      m : {		//pojo对象，临时存储数据
        id: '',
        name: '',
        address: ''
      },
      isupdate: false,  		//新增和修改标识
      index: null,				//当前行索引值
      dialogVisible: false,	//是否展示对话框标识
      students					//页面数据对象
    }
  },

拓展：图书管理系统

修改调用的组件的网页名称

第一步：在main.js里面添加一个全局指令

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

第二步：在要调用的组件里面，随便找一个div加入如下代码

<template>
  <div v-title data-title="xxx">

在这里插入图片描述

增加小图标功能:

这些图标都是element-ui定义好的，
这些名称到官网查询

增加删除功能:

1)增加删除按钮
2)增加删除事件
slot-scope vue带的，它实现动态编程
它会提供当前行的索引值 scope.$index
3）从list中删除数据 api，splice函数

删除某行，是有一个索引值？
vue给slot-scope对象，封装数据scope对象
scope.$index
this.list.splice(index, 1) 从list数据中删除对应行，删除一行数据

splice( 1 , 1 )
第一个参数，索引位置
第二个参数，如果是1 是删除
在这里插入图片描述

splice(1 , 0 , “chen” )
第一个参数，索引位置
第二个参数，0 删除的个数，没删除
第三个参数，后面可以多个值，查询到索引位置
在这里插入图片描述
(修改)
Is.splice( 1 , 1 , “chen” )
第—个参数，索引位置
第二个参数，1 删除—个
第三个参数,后面写的值插入

新增、修改、弹出对话框(复用这个对话框)

设置一个全局变量:centerDialogVisible
true展示，false不展示

<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center> //居中
  <span>需要注意的是内容是默认不居中的</span> 
  <span slot="footer" class="dialog-footer"> 
    <el-button @click="centerDialogVisible = false">取 消</el-button>  //centerDialogVisible 变量=false，关闭
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

添加表单 Form

表单
全局数据:模型:model，

<el-form :model=“m” 双向绑定数据来源
<el-input v-model=“m.name” 双向绑定
在data中声明，临时存储数据

m: {
        name:null,
        author:null,
        price:null,
        intro:null
      }

一条数据textarea html标签文本域

<el-form :model="m" label-width="100px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="m.name"></el-input>
</el-form-item>

<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"> </el-input>
</el-form-item>

把m模型中的数据添加到页面
list数据，splice

修改：

1）弹出对话框
2）对话框中要修改的那条对应信息
vue组件它会直接把这个数据封装row中
3）保存（复用）修改这条值

this.list.splice(this.index, 1, this.m) //修改

（修改）s.splice(1,1,"chen")
如何实现新增或者修改的判断呢？
定义一个全局变量 isUpdate
新增对话框：isUpdate=false
修改对话框：isUpdate=true

index代表当前行的索引值

当修改数据时，因为双向绑定，数据变化
页面数据也随之变化，这是不对！！！
this.m = row row代表是页面，m数据
是同一个引用，修改其中一个，都改了
把它们关系断开，创建新对象
数据copy，拷贝row数据，新对象
把新对象赋值this.m

整体代码：

App.vue

<template>
  <div id="app">
    <router-view/>
    <Book>

    </Book>
  </div>
</template>

<script>
  /*
export default {
  name: 'App'
}*/
/*
import 导入子组件
components 代表我的声明子组件的集合
'./components/Book.vue' 必须写，不写报错
*/
import Book from './components/Book.vue' /*导入子组件*/
export default{
     
     
  components:{
     
     
    Book
  }
}
</script>

<style>
#app {
     
     
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//导入element-ui包,nmp安装包
//npm i element-ui -D
import ElementUI from 'element-ui'
//导入element的css支持
import 'element-ui/lib/theme-chalk/index.css'

//引用这个element-ui
Vue.use(ElementUI)

Vue.config.productionTip = false

//添加一个全局指令，修改网页名称
Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Book.vue

<template>
  <!--自定义网页名称-->
  <div v-title data-title="清风图书管理系统" >
    <!--自定义标题-->
    <h1><i class="el-icon-collection"></i>&nbsp;{
   
   {sysname}}</h1>

    <!--创建一个新增按钮-->
    <el-row>
      <el-button type="primary" @click="toadd()" icon="el-icon-document-add">新增</el-button>
    </el-row>

    <!--创建Table 表格-->
    <el-row>
      <el-table :data="list">
        <el-table-column  prop="name" label="书名" width="200" ></el-table-column>
        <el-table-column prop="author" label="作者" width="150"></el-table-column>
        <el-table-column prop="price" label="价格" width="100"></el-table-column>
        <el-table-column prop="intro" label="介绍" width="1020"></el-table-column>
        <el-table-column label="功能" width="240">

          <!--增加修改、删除按钮-->
          <template slot-scope="s">
            <el-button type="warning" @click="toupdate(s.$index,s.row)" round icon="el-icon-edit">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="del(s.$index)" round>删除</el-button>

          </template>
        </el-table-column>
      </el-table>

      <!--增加弹出对话框-->
      <el-dialog title="提示信息" :visible.sync="dialogVisible" width="30%" center  >
        <!--对话框内容-->
        <div>
          <el-form :model="m" label-width="40px"> <!--model表单控件双向绑定-->

            <el-form-item label="书名">
              <el-input v-model="m.name" placeholder="请输入书名..."></el-input>
            </el-form-item>

            <el-form-item label="作者">
              <el-input v-model="m.author" placeholder="请输入作者..."></el-input>
            </el-form-item>

            <el-form-item label="价格">
              <el-input v-model="m.price" placeholder="请输入价格..."></el-input>
            </el-form-item>

            <el-form-item label="介绍">
              <el-input v-model="m.intro" placeholder="请输入介绍..." type="textarea"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!--对话框按钮-->
        <div slot="footer" class="dialog-footer">
          <el-button type="warning" plain @click="dialogVisible = false">取 消</el-button>
          <el-button type="success" plain @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>


  </div>
</template>

<script>
  export default {
     
     
    name: "Book",

    data() {
     
     
      return {
     
     
        sysname: "清风图书管理系统",/*自定义的标签*/
         /*弹出窗口按钮变量*/
        dialogVisible: false,
        isUpdate:false,
        index:null,

        /*弹出窗口的绑定*/
        m: {
     
     
          name: null,
          author: null,
          price: null,
          intro: null
        },

        /*给表单添加内容*/
        list: [{
     
     
            name: "java核心技术卷",
            author: "凯·S.霍斯特曼",
            price: "¥109.30",
            intro: "伴随着Java的成长，《Java核心技术》从第1版到第10版一路走来，得到了广大Java程序设计人员的青睐，成为一本畅销不衰的Java经典图书。",
          },
          /*第二条记录*/
          {
     
     
            name: "Java编程思想（第4版）",
            author: "[美] Bruce Eckel",
            price: "¥79.20",
            intro: "设计模式贯穿于众多示例中：适配器、桥接器、职责链、命令、装饰器、外观、工厂方法、享元、点名、数据传输对象、空对象、代理、单例、状态、策略、模板方法以及访问者。"
          },
          /*第三条记录*/
          {
     
     
            name: "Java从入门到精通（第5版）",
            author: "明日科技",
            price: "¥52.70",
            intro: "丛书说明：“软件开发视频大讲堂”丛书（第1版）于2008年8月出版，因其编写细腻，易学实用，配备海量学习资源和全程视频等，在软件开发类图书市场上产生了很大反响，绝大部分品种在全国软件开发零售图书排行榜中名列前茅，2009年多个品种被评为“全国优秀畅销书”。 "
          },
          /*第四条记录*/
          {
     
     
            name: "零基础学Java（全彩版）",
            author: "明日科技",
            price: "¥60.70",
            intro: "《零基础学Java》从零基础学习者的角度出发，通过通俗易懂的语言、流行有趣的实例，详细地介绍了使用Java语言进行程序开发需要掌握的知识和技术。"
          },
          /*第五条记录*/
          {
     
     
            name: "O'Reilly：Head First Java ",
            author: "塞若（Sierra K.），[美] 贝茨（Bates B.）",
            price: "¥54.30",
            intro: "阅读《Head First Java》这本书，你将从中体会到学习的乐趣。对于希望学习一门新的编程语言，又不是计算机科学系或者没有编程经验的人来说，本书简直就是极好的。"
          },
          /*第六条记录*/
          {
     
     
            name: "Python编程 从入门到实践 第2版(图灵出品)",
            author: "[美] 埃里克·马瑟斯（Eric Matthes）",
            price: "¥59.60",
            intro: "本书内容分为“基础知识”和“项目”两部分。读完本书，读者不仅能快速掌握编程基础知识，还能编写出解决实际问题的代码并开发复杂的项目。第2版沿袭第1版讲解清晰透彻、循序渐进的特点，并全面升级。"
          },
          /*第七条记录*/
          {
     
     
            name: "超简单：用Python让Excel飞起来 ",
            author: "王秀文，郭明鑫，王宇韬",
            price: "¥34.90",
            intro: "《超简单：用Python让Excel飞起来》是一本讲解如何用Python和Excel“强强联手”打造办公利器的案例型教程。"
          },

        ]
      }
    },

    methods: {
     
     
      toadd: function(){
     
     
        this.isUpdate = false
        this.dialogVisible = true
      },

      toupdate:function(index,row){
     
     
        this.isUpdate = true
        this.dialogVisible = true
        //this.m = row 旧对象
        this.m = this.copy(row)

        //this.index代表，data中数据，index代表函数的参数
        this.index = index
      },

      save:function(){
     
     
        if(this.isUpdate){
     
     
          console.log("全局：index："+this.index)
          this.list.splice(this.index,1,this.m) //修改
        }else{
     
     
        //参数1:0 新增的元素放在第一行，参数2:0代表不删除
        //在最后面加this.list.splice(this.list.length,0,this.m)
        this.list.splice(0,0,this.m)
       }
       this.dialogVisible = false //对话框关闭
       this.m = {
     
     } //把模型m的属性值置空
      },
      del: function(index) {
     
     
        //删除这个当前行元素，参数1：删除位置，参数2：删除个数
        this.list.splice(index, 1)
      },
      copy:function(oldObj){
     
     //复制这个对象
        var newObj ={
     
     }
        for(var o in oldObj){
     
      //for循环遍历，o 代表每次属性值
          newObj[o] = oldObj[o]
        }
        return newObj;
      }
    }
  }
</script>

<style>
    textarea{
     
     
      font-family: 微软雅黑;
    }
</style>

小结：

1、自定义组件

1）src/componets/Book.vue
2）注册，它都是根组件的孩子，子组件 App.vue

	import Book from './components/Book.vue'
export default {
  components:{
    Book
  }
}

3）App.vue模板地方

2、引入第三方element-ui，业界no1

main.js全局引入
1）安装element-ui组件

npm i element-ui -D
npm install element-ui -S

3）修改main.js，写下面的3句话

import ElementUI from ‘element-ui’

拷贝css等文件到src下

import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)

注册后子组件就可以使用

3、展现数据

:data="list"在data数据区域定义数组对象
表格列prop=“name”，每条数据中key

4、弹出对话框 dialog

dialogVisible 变量，是否展现

5、新增

this.list.splice(0, 0, this.m)
this.m = {} //把模型m的属性值置空否则下一次进入，内容就不为空

6、副作用，修改页面m和row同引用，一改全都改

断掉它们关系，引用。
this.m = this.copy(row)

copy: function(oldObj){ //复制对象
var newObj = {}
for(var o in oldObj){ //for循环遍历，o代表下标
newObj[o] = oldObj[o]
}
return newObj;
}
两个对象内容一致，是两个对象

demo 前端vue，
ajax，java（访问数据库，SSM大框架），json，解析json，存储到list

前端技术：Vue+elementUI 饿了吗UI+CRUD，创建图书管理系统

1.Vue框架

2.j2ee框架分层思想淋漓尽致体现，MVC(model view controller)

3.渐进式框架

4.为什么Vue要提供额外命令v-* ?

JS升级到Vue

接下来让我们分析jt文件内容

基础知识

启动服务，连续按2次Ctrl+C退出，输入命令npm i element-ui -D 执行下载

下载完成后打开HB，找到jt(自己定义的名字)目录，找到src，把element-ui包导入

1.找到src下components文件夹，自定义组件 Book.vue

修改一下 HelloWorld.vue的内容

进入App.vue，配置Book页面

导入成功的页面效果:

安装element-ui组件，出错

布局容器 container

图标 icon

按钮 button

表格 Table

当前行 scope

对话框 dialog

输入框 input

表单 form

全局变量支撑

拓展：图书管理系统

修改调用的组件的网页名称

增加小图标功能:

增加删除功能:

新增、修改、弹出对话框(复用这个对话框)

添加表单 Form

修改：

整体代码：

小结：

1、自定义组件

2、引入第三方element-ui，业界no1

3、展现数据

4、弹出对话框 dialog

5、新增

6、副作用，修改页面m和row同引用，一改全都改

猜你喜欢