java前端热门框架Vue快速入门自学篇员工案例实现

程序爱出bug

已于 2022-03-08 00:00:31 修改

阅读量567

点赞数

文章标签： vue.js javascript 前端

于 2022-03-04 15:54:02 首次发布

本文链接：https://blog.csdn.net/fori1/article/details/123278607

版权

Vue学习总结

初识Vue

基本了解

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完全能够为复杂的单页应用提供驱动。

官网： Vue.js

HelloWord

我这边使用的是idea开发工具

1：下载vue.js https://cdn.jsdelivr.net/npm/vue/dist/vue.js

2：创建静态web项目

3：将vue.js导入项目

4：编写hello页面，引入vue.js

5：启动服务器，显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello-vue</title>
    <script src="/js/vue/vue.js"></script>
</head>
<body>

<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

Vue常见指令

指令带有前缀 v-以表示它们是 Vue 提供的特殊 attribute

{{}}

vue一直解析数据的指令

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

v-bind:

表示通知vue在渲染的 DOM 标签时，将bind绑定的属性和 Vue 实例data中同名属性值保持一致

<!--v-bind属性绑定--->
<div id="app">
    <!--v-bind-->
    <span v-bind:title="title">看这里， 看这里</span>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          title:"瞅啥瞅~"
      }
    })
</script>

-----------------------------简写方式-----------------------------------------------------------------------------------------

<!--v-bind属性绑定--->
<div id="app">
    <!--v-bind-->
    <span :title="title">看这里， 看这里</span>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          title:"瞅啥瞅~"
      }
    })
</script>

绑定图片： v-bind:src 或者 :src

绑定样式： v-bind:class 或者 :class

绑定链接： v-bind:href 或者 :href

v-model

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

功能与v-bind类似，不过数据可同步改动

<!--model双向绑定--->
<div id="app">

    <!--v-bind: 表示数据单项绑定，可以给html标签属性绑定参数，如果html属性值改变，vue中data数据值不会变动  -->
    v-bind：<input type="text" name="username" v-bind:value="username">

    <!--v-model:表示双向绑定，绑定数据功能跟v-bind是一样的， 区别在如果htmle属性值改变， vue的data数据也会变动-->
    v-model:<input type="text" name="username" v-model:value="username">

    <br>
    <span>{{username}}</span>

</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            username:"dafei"
        }
    })
</script>

v-html

{{属性}} 会原样输出数据属性，如果说数据是带有html格式的数据时，此时需要使用v-html指令

<div id="app" >
    {{content}}
</div>

v-html ： 将html格式数据渲染出来
-->
<div id="app" v-html="content">
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            content:"<span style='color: red;'>这是内容</span>"
        }
    })
</script>

v-if

判断指令

<!--age是否大于18，等于18，小于18-->
<div id="app">
    <span v-if="age > 18">欢迎光临</span>
    <span v-else-if="age < 18">18禁</span>
    <span v-else="age == 18">有点纠结</span>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          age:18
      }
    })
</script>

v-for

循环指令

普通数组:

<div id="app">
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
    <!--带下标-->
    <ul>
        <li v-for="(item, index) in arr">{{index}}-{{item}}</li>
    </ul>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:["a","b","c","d","d"]
      }
    })
</script>

对象集合:

<div id="app">
    <ul>
        <li v-for="u in list">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}

        </li>
    </ul>
</div>
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          list:[
              {id:1,name:'dafei', age:18, sex:1},
              {id:2,name:'xiaofei', age:17, sex:1},
              {id:3,name:'huisiji', age:18, sex:0},
              {id:4,name:'xiaoxue', age:19, sex:0}
          ]

      }
    })
</script>

v-on

事件绑定指令，可缩写成@

比如： v-on:click //绑定点击事件， @click

Vue的事件

事件函数:

var vue = new Vue({
      el:"#app",
      data:{
          list:[
              {id:1,name:'dafei', age:18, sex:1},
              {id:2,name:'xiaofei', age:17, sex:1},
              {id:3,name:'huisiji', age:18, sex:0},
              {id:4,name:'xiaoxue', age:19, sex:0}
          ]

      },
      methods:{
          choseClick : function () {
              alert(1);
          },
          changeSelect : function(){
              alert(2);
          }
      }
    })

事件信息封装对象：

使用 $event 标记

   <ul>
        <li v-for="u in list" v-on:click="choseClick($event)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>




      methods:{
          choseClick:function (e) {
              alert(1);
          }
      }

获取事件源

被触发事件的标签元素

   <ul>
        <li v-for="u in list" v-on:click="choseClick($event)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>




      methods:{
          choseClick:function (e) {
              console.log(e.currentTarget);
          }
      }

事件传参

调用事件函数传入参数

<ul>
    <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
        {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
    </li>
</ul>

methods:{ choseClick:function (e, id, name) { console.log(e.currentTarget, id, name); } }

Vue的属性

用来指示vue编译器从什么地方开始解析 vue的语法

  },
  methods:{
      fun1:function () {
      },
      fun2:function () {
      }
  },
  filters:{
      dataFormat:function () {
      },
      sexFilter:function (sex) {
          return sex == 0? '女':'男'
      }
  }, 
  mounted:function () {
      console.log("执行数据初始化")
  }  
})

</script>

data

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

methods:

放置页面中的业务逻辑，js函数一般都放置在methods中

<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

filters:

vue过滤器集合


    <ul>
        <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
        </li>
    </ul>

    <ul>
        <li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
            {{u.id}}-{{u.name}}-{{u.age}}-{{u.sex | sexFilter}}
        </li>
    </ul>


局部：
<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

全局：
// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('dataFormat', function (value) {
    return  ....
})

mounted:

是一个函数，在vue实例创建完成后被立即调用（html加载完成后执行）

一般用处初始化data中的数据


<script>
    var vue = new Vue({
      el:"#app",
      data:{
          arr:[1,2,3]

      },
      methods:{
          fun1:function () {
          },
          fun2:function () {
          }
      },
      filters:{
          dataFormat:function () {
          },
          sexFilter:function (sex) {
              return sex == 0? '女':'男'
          }
      }, 
      mounted:function () {
          console.log("执行数据初始化")
      }  
    })
</script>

综合案例:

员工crud

mabatis-plus项目改造

根据后端提供相应的接口实现页面的渲染

简单的Vue功能实现

查询页面

添加页面

修改页面代码实现

不多废话,觉得还不错的花点点收藏!

程序爱出bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java前端热门框架Vue快速入门自学篇员工案例实现

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完全能够为复杂的单页应用提供驱动。
复制链接

扫一扫