Vue

最新推荐文章于 2023-05-23 19:52:46 发布

PETRICHOR03

最新推荐文章于 2023-05-23 19:52:46 发布

阅读量221

点赞数 1

文章标签： vue html java javascript

本文链接：https://blog.csdn.net/weixin_43616750/article/details/107070602

版权

Vue

概述

是一套用于构建用户界面的渐进式javascript框架。

快速入门

开发中：我们往往先定义好Vue数据模型，然后在页面标签中进行数据模型的绑定！

在Vue对象中声明数据绑定对象

<script>
    var vm=new  Vue({
        el:"#app",//挂载标签
        data:{name:"李四"} //声明数据模型，定义一个name数据

    })

</script>

在页面标签建立好标签-数据模型的关系

<div id="app">你好:{{name}}</div>
    <!--//在页面标签建立好标签-数据模型的关系-->

通过上述操作：开发时，我们只需要关注数据模型对象即可，页面标签数据会自动更新

使用vue 可以更快捷的开发，将模型数据和页面展示分离，开发人员无需开发数据如何更新的问题
使用vue 我们只需要关注数据模型的开发！注意语法：一切皆json格式的规则！
使用vue 开发步骤简单，1. 先声明数据模型对象，2. 在页面标签位置，展示对应的数据即可
初学者重点要掌握： 1. 语法如何声明数据模型对象 2. 页面展示数据{{}}等特定语法

功能介绍

Vue对象中常用的属性

创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

模板或元素el

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。
例如一段html:

<div id="app">
    
</div>

然后创建Vue实例，关联这个div

var vm = new Vue({
	el:"#app"
})

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

数据data

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
html：

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

js：

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华" //   data 区域 就是我们常说的数据模型对象！
    }
})

name的变化会影响到div标签内的值

方法methods

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

一般方法都会和对应的事件绑定：

举例： vue通过 v-on ：绑定事件事件类型，通过冒号：事件类型名称即可

语法格式： v-on:click=“函数名称” 点击事件触发对应的函数
html：

  <div id="app">
             你好：{{name}}

             <button  v-on:click="clickMe">点击我</button>

         </div>

js：

<script>
               var vm = new Vue({
                   el:"#app",
                   data:{name:'lisi'},
                   methods:{
                                 clickMe:function () {
                                     alert("弹弹弹。。。弹走鱼尾纹")
                                 }
                   }
               })
          </script>

Vue指令

插值表达式

花括号格式：一般用来获取vue数据模型中定义的数据

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）如：new Date()
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数
插值表达式 不可以使用在标签内的属性值上 一定注意！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值表达式{{}}</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <!--插值表达式 可以支持数学和逻辑运算-->
    {{1+1}}
    {{1==1?'true':'false'}}
    <!--插值表达式可以支持js内置函数-->
    {{new Date()}}
    <!--获取数据模型中数据-->
    {{name}}
</div>


<script>

    var vm = new Vue({
        el: "#app",
        data: {
            name: '程序员'
        }
    })
</script>

</body>
</html>

v-text和v-html

指令：

Vue.js的指令是指 v-开头，作用于html标签，提供一些特殊的特性，当指令被绑定到html元素的时候，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成html的一种属性。

指令特征 (Directives) 是带有 v- 前缀的特殊属性，作用于 html标签！

也就是说在标签中才会运用到指令语法！数据模型：不会涉及到v- 开头的语法！
v-text 数据绑定标签，将vue对象data中的属性绑定给对应的标签作为内容显示出来，类似js的text属性；
v-html 类似v-text标签，他是将data的属性作为html语法输出，类似js中的innerHtml属性
说明：
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text-html</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

                <div id="app">
                    v-html:<span v-html="hello"></span>
                    <br/>
                    v-text:<span v-text="hello"></span>
                </div>



              <script>
                  var vm = new Vue({
                      el:"#app",
                      data:{
                          hello: "<h1>大家好，我是刘德华</h1>"
                      }
                  })
              </script>

</body>
</html>

v-model

v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。

接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型

语法：

html标签内部直接输入： v-model=“vue定义的变量名称”

此时标签中的value值就和vue定义的变量对应的值，形成了双向绑定，当一个值发生改变，另一个也随之改变；

v-model 指令大都数是用在表单、及等元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。
注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
            <div id="app">

                   <input type="radio" name="sex" value="male" v-model="sex" checked="checked"> 男性
                   <input type="radio" name="sex" value="female" v-model="sex"> 女性
                  <div>
                      你选择了{{sex}}
                  </div>
                <hr>
                 <div>
                       <select name="xueli" v-model="xueli">
                             <option value="chuzhong" selected="selected">初中</option>
                             <option value="gaozhong">高中</option>
                             <option value="daxue">大学</option>
                             <option value="boshi">博士</option>
                       </select>
                 </div>
                <div>
                    你选择了{{xueli+1}}
                </div>

            </div>


              <script>

                  var vm = new Vue({

                      el:"#app",
                      data :{
                          sex:"female",  //  我们发现  标签中的 checked="checked" 失效
                          xueli:"boshi"   //  标签中初始化的  selected="selected"失效
                      }

                  })
              </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
            <div id="app">
                <input type="checkbox"  v-model="ischecked" />是否选中<br/>
                <input type="checkbox"  v-model="language"  value="Java" />Java<br/>
                <input type="checkbox"  v-model="language" value="PHP" />PHP<br/>
                <input type="checkbox"  v-model="language" value="GO" />GO<br/>
                <h1>
                    多选框：{{language}}  ， 单选框：{{ischecked}}
                </h1>
            </div>

            <script type="text/javascript">
                var vm = new Vue({
                    el:"#app",
                    data:{
                        language: [],//   对于多选框 我们用数组来接受多个选项值！
                        ischecked: true //   对于单个 boolean 来定义
                    }
                })
            </script>

</body>
</html>

v-on基本用法

v-on指令用于给页面元素绑定事件

@事件名="js片段或函数名"     v-on:click  ==  @click

     <div id="app">
                    <!--事件中直接写js片段 简单的可以这样写  -->
                    <button @click="num++">增加</button><br/>

                    <!--复杂事件 需要指定一个回调函数，必须是Vue实例中定义的函数-->
                    <button @click="decrement">减少</button><br/>

                     <!--显示效果-->
                    <h1>num: {{num}}</h1>
                </div>

                <script type="text/javascript">
                    var app = new Vue({
                        el:"#app",
                        data:{
                            num:0  //  初始化数据模型
                        },
                        methods:{   //  如果出现事件绑定的函数对象  要用 methods来声明事件  语法规则：
                            decrement(){
                                this.num--;  //  在vue 对象里面 ，this 表示当前的 vue对象   获取对应的属性  this.声明的属性名称   注意 this不是点击的标签按钮对象！
                            }
                        }
                    })
                </script>

v-on按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 监听回车事件 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法  表示用户敲击回车 会执行对应的submit函数  submit是函数名称 可以自定义-->
<input @keyup.enter="submit">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

            <div id="app">

                <input type="text" @keyup.enter="submit"  v-model="username">

                  <p>
                      你输入的内容：{{username}}
                  </p>

            </div>


            <script>

                var vm = new Vue({

                    el:"#app",
                    data :{
                        username:''
                    },
                    methods:{
                        submit() {
                            alert("提交"+this.username)  //  当我们敲击回车时，当前submit函数执行
                        }
                    }

                })
            </script>

</body>
</html>

v-bind属性上使用VUE数据

v-bind 用于将vue的值绑定给对应dom的属性值主要用于对标签的元素属性赋值

v-bind:元素属性名="数据模型定义的初试数据"

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
            <div id="app">

                  原始语法如下：
                <div v-bind:hidden="hiddenValue">v-bind test</div><br>
                 简化写法   :hidden
                <div :hidden="hiddenValue">v-bind test</div>

            </div>
            <script>
                new Vue({
                    el: "#app",
                    data: {
                        hiddenValue:false //  页面元素不影藏 ， 如果是true表示隐藏页面元素
                    }
                })
            </script>

</body>
</html>

class属性的特殊用法

Vue对class属性进行了特殊处理，可以接收数组或对象格式

<div :class="{ red: true,blue:false }"></div>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="js/vuejs-2.5.16.js"></script>

    <style>
        #box {
            width: 100px;
            height: 100px;
            color: darkgray
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>

            <div id="app">
                <button @click="change">更改颜色</button>
                <!--
                {red:flag,blue:!flag} 对象中，key是已经定义的class样式的名称，如本例中的：red和blue
                value是一个布尔值，如果为true，则这个样式会生效，如果为false，则不生效。
                -->
                <div id="box" :class="{red:flag,blue:!flag}">
                    点击按钮，背景会切换颜色哦
                </div>
            </div>

            <script type="text/javascript">
                var vm = new Vue({
                    el: "#app",
                    data: {
                        flag:true, // flag表示 当前的样式值
                    },
                    methods:{
                        change(){
                             this.flag=!this.flag
                        }

                    }
                })
            </script>

</body>
</html>

v-for

遍历数组

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="js/vuejs-2.5.16.js"></script>


</head>
<body>
<div id="app">
    <!--遍历数组 -->
    <table width="100%" border="1px">
          v-for位置：在需要遍历的元素父元素中书写
        <tr v-for="(user in users">
            <!--<td >{{index+1}}</td>-->
            <td >{{user.name}}</td>
            <td v-text="user.gender"></td>
            <td v-text="user.age"></td>
        </tr>
    </table>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data:{
              //  定义数组对象  遍历的数据源
            users:[
                {name:'小明', gender:'女', age: 20},
                {name:'小米', gender:'男', age: 30},
                {name:'小猫', gender:'女', age: 24},
            ]
        }
    });
</script>

</body>
</html>

数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

v-for="(item,index) in items"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值表达式{{}}</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <!-- 对象遍历-->
    <table>
        <tr v-for="(u,key,index)  in user">
            <td v-text="index"></td>
            <td v-text="key"></td>
            <td v-text="u"></td>
    </table>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'小明', gender:'男', age: 21}
        }
    })
</script>

</body>
</html>

v-if和v-show

v-if&v-else的使用

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

v-if="布尔表达式"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if-show</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
            <div id="app">

                      <div @click="flag=!flag">
                            点击我试试
                      </div>

                        <p v-if="flag">你好 程序员</p>
                        <p v-else>你好 中国</p>

            </div>


              <script>

                  var vm = new Vue({
                      el:"#app",
                      data :{
                          flag: true
                      }

                  })
              </script>

</body>
</html>

v-show

v-if和v-show功能差不多，都是用来控制dom的显隐，用法也一样，只是原理不同，当v-if="false"时，dom被直接删除掉；为true时，又重新渲染此dom；

          <div id="app">

                      <div @click="flag=!flag">
                            点击我试试
                      </div>
                        <p v-show="flag">你好 程序员</p>
            </div>


              <script>

                  var vm = new Vue({
                      el:"#app",
                      data :{
                          flag: true
                      }

                  })
              </script>

VUE生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了监听函数。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。vue的生命周期中具体做了什么事情我们通常不需要关心，我们只要关注生命周期的8个监听函数。

监听函数

vue的整个生命周期中，提供了8个监听函数，以便我们可以在某个生命周期段根据需要做相应的操作：
beforeCreate：在vue实例创建前调用

created：在vue实例创建后调用,这个监听函数是最常用的，这个时候会初始化data数据，通常去后端取数据；

beforeMount：在挂载开始之前被调用。什么是挂载？可以将vue对象和视图模板进行关联的过程看作是挂载

mounted：挂载到实例上去之后调用

beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前

updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

beforeDestroy：实例销毁之前调用。在这一步，vue实例仍然完全可用。

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

this对象的说明

this就是当前的Vue实例，在Vue对象内部，必须使用this才能访问到Vue中定义的data内属性、方法等

VUE之ajax

vue-resource是Vue.js的插件,提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。
当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以，因为现在基本使用的都是2.0之后的版本了。

axious使用

axios是对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

get请求

//发送get请求   切记不要在ajax回调函数内使用this  因为此时的this 指的是vue对象
axios.get("/findById.do?id=100").then((res) => {  

        console.log("请求发送成功")  

        }).catch((e) => {  

        console.log("发生异常了：" + e)  

        }).finally(() => {  

        console.log("最终会执行的业务逻辑")  

})

post请求


<script>  


//发送post请求,传递数据  使用json格式数据传输   推荐写法！
axios.post("/add.do",{name:"zhangsan"}).then((res) => {  

        console.log("请求发送成功")  

        }).catch((e) => {  

        console.log("发生异常了：" + e)  

        }).finally(() => {  

        console.log("最终会执行的业务逻辑")  

})  

</script>

VUE表单提交数据

说明：使用axios将表单数据提交到后台要求使用vue+axios 实现
html页面编写：


<div id="app">

               <form>
                     用户名<input type="text" v-model="formData.username"><br>
                     密码<input type="password" v-model="formData.password"><br>
                     性别
                   <input type="radio" value="male" v-model="formData.sex">男
                   <input type="radio" value="female"v-model="formData.sex">女
                   <br>
                     爱好
                   <input type="checkbox" value="洗澡"v-model="formData.hobby">洗澡
                   <input type="checkbox" value="看电视"v-model="formData.hobby">看电视
                   <input type="checkbox" value="睡觉"v-model="formData.hobby">睡觉
                   <br>
                     学历
                    <select v-model="formData.education">
                        <option value="初中">初中</option>
                        <option value="高中">高中</option>
                        <option value="大专">大专</option>
                        <option value="本科">本科</option>
                    </select>
                   <br>
                   简介<textarea rows="5" cols="20" v-model="formData.remark"></textarea>
                   <br>
                   <input type="button" @click="add" value="提交"></input><br>
               </form>

</div>

vue模块代码编写通过ajax完成表单数据的提交！

 <script>
         var  vm = new Vue({

             el:"#app",
             data:{
               //  提交给后台的数据 都是在data中声明的
                 formData:{
                     username:'',
                     password:'',
                     sex:'',
                     hobby:[],
                     education:'',
                     remark:''
                 }
             },
             methods:{

                 add(){
                     // alert("---"+JSON.stringify(this.formData))
                     //  axios 提交给后台
                     axios.post("/add.do",this.formData).then();

                 }
             }

         })

    </script>

注意：通过axios提交表单数据，会自动将表单数据序列化成json格式的数据，我们在后台controller只需要通过： @RequestBody 将此json格式数据封装到实体对象里面即可！

key:value 格式提交！标准的json格式数据传输

案例前端代码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="/css/user.css"/>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <!-- 引入element ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 element ui组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>删除操作</th>
        </tr>
        <tr v-for="user in users">
            <td>{{user.id}}</td>
            <td>{{user.userName}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.birthday}}</td>
            <td><button  @click="deleteUserById(user.id)">删除</button></td>
        </tr>
    </table>

</div>
    <script>
         var  vm = new Vue({
             el:"#app",
             data:{
                 users:null  //  用户数据绑定-后续ajax查询结果绑定到此对象上
             },
             created:function () {
                 this.findAll();//  页面数据初始化时 发送ajax请求到后台 查询所有用户信息
             },
             methods:{
                 deleteUserById:function (id) {

                     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                         confirmButtonText: '确定',
                         cancelButtonText: '取消',
                         type: 'warning'
                     }).then(() => {
                         axios.get("/user/deleteUserById.do?id="+id).then((res)=>{

                             this.$message({
                                 type: 'success',
                                 message: '删除成功!'
                             });
                             this.findAll();
                         })

                     }).catch(() => {
                         this.$message({
                             type: 'info',
                             message: '已取消删除'
                         });
                     });



                 },
                 findAll:function () {
                     axios.get("/user/findAll.do").then((res)=>{
                         // console.info(res.data)
                         this.users=res.data;
                     })
                 }
             }
         })

    </script>

</body>
</html>