JavaWeb-Vue

最新推荐文章于 2024-06-15 14:41:39 发布

->yjy

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量872

点赞数 21

分类专栏： JavaWeb 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_79602614/article/details/139218525

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

什么是Vue?

常用指令

生命周期

什么是Vue?

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

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

MVVM由三个部分组成: View ViewModel Model

Model是数据模型里面包含了很多的业务数据以及数据的处理方法

View是视图层,它只负责数据的展示,其实就是页面展示的HTML标签,我们也可以理解为就是DOM

还有一个部分ViewModel 是View和Model之间的桥梁,通过它可以完成View和Model的绑定,一旦完成了绑定,一旦Model发生变化,会通过ViewModel自动的改变View上的展示,而一旦视图层的View发生变化,ViewModel检测到后也会改变Model中的数据,这就称为双向绑定.

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

Vue快速入门

新建HTML页面，引入Vue.js文件[官方文件,要想使用必须引入]

<script src="js/vue.js"></script>

在JS代码区域，创建Vue核心对象，定义数据模型

<script>

new Vue({

el: "#app",//el代表vue要控制那个区域这就是类似于css中的选择器 #打头是id选择器

data: {

message: "Hello Vue!"

}

})

</script>

编写视图

<div id="app">

<input type="text" v-model="message">//绑定message这个数据模型

{{ message }}

</div>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="vue/vue.js"></script>

</head>

<body>
  <div id="app">
    <input type="text" v-model="message">
    {{message}}

  </div>
</body>
<script>
  //定义vue对象
  new Vue({
    el: "#app",//vue接管区域
    data: {
      message: "Hello Vue"
    }
  })
</script>

</html>

常用指令

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

常用指令

指令

作用

v-bind

为HTML标签绑定属性值，如设置 href , css样式等

v-model

在表单元素上创建双向数据绑定

v-on

为HTML标签绑定事件

v-if

条件性的渲染某元素，判定为true时渲染,否则不渲染

v-else-if

v-else

v-show

根据条件展示某元素，区别在于切换的是display属性的值

v-for

列表渲染，遍历容器的元素或者对象的属性

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定

v-bind

<a v-bind:href="url">传智教育</a>

<a :href="url">传智教育</a>

<script>

new Vue({

el: "#app",

data: {

url: "https://www.itcast.cn"

}

})

</script>

v-model

<input type="text" v-model="url">

注意事项: 通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="vue/vue.js"></script>

</head>

<body>
  <div id="app">
    <a v-bind:href="url">链接1</a>
    <a :href="url">链接2</a>

    <input type="text" v-model="url">
  </div>
</body>
<script>
  //定义Vue对象
  new Vue({
    el: "#app",//vue接管区域
    data: {//数据模型:如果用了v-bind和v-model必须在数据模型中定义它们所绑定的变量
      url: "https://www.baidu.com"
    }
  })

</script>

</html>

指令	作用
v-on	为HTML标签绑定事件

v-on

<input type="button" value="按钮" v-on:click="handle()">

<input type="button" value="按钮" @click="handle()">

<script>

new Vue({

el: "#app",

data: {

//...

},

methods: {

handle:function(){

alert('我被点击了');

}

},

})

</script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="vue/vue.js"></script>

</head>

<body>
  <div id="app">

    <input type="button" value="点我一下~" v-on:click="handle()">
    <input type="button" value="点我一下~" @click="handle()">


  </div>
</body>
<script>
  //定义Vue对象
  new Vue({
    el: "#app",//vue接管区域
    data: {

    },
    methods: {
      handle: function () {
        alert("你点我了一下...");
      }
    }
  })
</script>

</html>

指令	作用
v-if	条件性的渲染某元素，判定为true时渲染, 否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值

v-if

年龄{{age}},经判定为:

<span v-if="age <= 35">年轻人</span>

<span v-else-if="age > 35 && age < 60">中年人</span>

<span v-else>老年人</span>

v-show

年龄{{age}},经判定为:

<span v-show="age <= 35">年轻人</span>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="vue/vue.js"></script>
</head>

<body>
  <div id="app">

    年龄<input type="text" v-model="age">经判定,为:
    <span v-if="age<=35">年轻人(35及以下)</span>
    <span v-else-if="age>35 &&age<60">中年人(35-60)</span>
    <span v-else>老年人(60及以上)</span>
    <br><br>

    年龄<input type="text" v-model="age">经判定,为:
    <span v-show="age<=35">年轻人(35及以下)</span>
    <span v-show="age>35 &&age<60">中年人(35-60)</span>
    <span v-show="age>=60">老年人(60及以上)</span>
  </div>
</body>
<script>
  //定义Vue对象
  new Vue({
    el: "#app",//vue接管区域
    data: {
      age: 20
    },
    methods: {

    }
  })
</script>

</html>

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性

v-for

<div v-for="addr in addrs">{{addr}}</div>

<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

data: {

. . .

addrs: ['北京','上海','广州','深圳','成都','杭州']

},

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="vue/vue.js"></script>
</head>

<body>
  <div id="app">
    <div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>

  </div>
</body>
<script>
  //定义Vue对象
  new Vue({
    el: "#app",//vue接管区域
    data: {
      addrs: ["北京", "上海", "西安", "成都", "深圳"]
    },
    methods: {

    }
  })
</script>

</html>

如上图所示，我们提供好了数据模型，users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。

分析：

首先我们肯定需要遍历数组的，所以需要使用v-for标签；然后我们每一条数据对应一行，所以v-for需要添加在tr标签上；其次我们需要将编号，所以需要使用索引的遍历语法；然后我们要将数据展示到表格的单元格中，所以我们需要使用{{}}插值表达式；最后，我们需要转换内容，所以我们需要使用v-if指令，进行条件判断和内容的转换

步骤：

使用v-for的带索引方式添加到表格的<tr>标签上

使用{{}}插值表达式展示内容到单元格

使用索引+1来作为编号

使用v-if来判断，改变性别和等级这2列的值

代码实现：

首先创建名为17. Vue-指令-案例.html的文件，提前准备如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

然后在<tr>上添加v-for进行遍历，以及通过插值表达式{{}}和v-if指令来填充内容和改变内容，其代码如下：

<tr align="center" v-for="(user,index) in users">
     <td>{{index + 1}}</td>
     <td>{{user.name}}</td>
     <td>{{user.age}}</td>
     <td>
         <span v-if="user.gender == 1">男</span>
         <span v-if="user.gender == 2">女</span>
     </td>
     <td>{{user.score}}</td>
     <td>
         <span v-if="user.score >= 85">优秀</span>
         <span v-else-if="user.score >= 60">及格</span>
         <span style="color: red;" v-else>不及格</span>
     </td>
</tr>

其完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：

其中我们需要重点关注的是mounted,其他的我们了解即可。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

我们在VS Code中创建名为18. Vue-生命周期.html的文件编写代码来演示效果，提前准备如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        }
    })
</script>
</html>

然后我们编写mounted声明周期的钩子函数，与methods同级，代码如下：

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。

->yjy

关注

21
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-Vue

什么是Vue?Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVMViewModel思想，实现数据的双向绑定，将编程的关注点放在数据上。官网：MVVM由三个部分组成: View ViewModel ModelModel是数据模型里面包含了很多的业务数据以及数据的处理方法View是视图层,它只负责数据的展示,其实就是页面展示的HTML标签,我们也可以理解为就是DOM。
复制链接

扫一扫