当前位置：首页 > news >正文

前端:Vue.js学习

news 2026/5/27 16:05:09

前端:Vue.js学习

- - - 1. 第一个Vue程序
    - 2. Vue指令
    - - 2.1 v-if、v-else-if、v-else
      - 2.2 v-for
      - 2.3 事件绑定 v-on:
      - 2.4 v-model 数据双向绑定
      - 2.5 v-bind 绑定属性
    - 3. Vue组件
    - 4. Vue axios异步通信
    - 5. 计算属性
    - 6. 插槽 slots
    - 7. 自定义事件内容分发

1. 第一个Vue程序

首先把vue.js拷贝到本地，下载链接位：vue.js
参考代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app">{{message}}</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el:'#app',data:{message:"hello world!"}});
</script>
</html>

运行结果：
请添加图片描述
其中对象obj属性el表示绑定标签元素，属性data表示数据。支持双向绑定(即当数据发生变化时，视图也会发生变化，当视图发生变化时，数据也会跟着同步变化)，简而言之就是在前端界面上，打开控制台，执行代码obj.message=‘其他’,执行完成这句代码之后，可以发现界面上显示为其他。
请添加图片描述

2. Vue指令

以v-开头的表示它是Vue提供的特殊特性，如v-bind、v-if、v-else等。

2.1 v-if、v-else-if、v-else

参考示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><div v-if="num == 1">1</div><div v-else-if="num == 2">2</div><div v-else>其他数字</div></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el:'#app',data:{num:1}});
</script>
</html>

上述指令用于判断展示哪个标签元素。如，在一个登录界面上，有多种登录方式，同时对应着多个不同的输入框布局，通过上述指令结合使用，可以轻轻松松实现所想要的效果。
请添加图片描述

2.2 v-for

用于循环遍历Vue绑定的标签元素中的数据，参考代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><ul><li v-for="item in items">{{item}}</li><!-- <li v-for="(item,index) in items">{{item}},{{index}}</li> --></ul></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el:'#app',data:{num:1,items:[1,2,3,4,5]}});
</script>
</html>

运行结果：
请添加图片描述

2.3 事件绑定 v-on:

用于绑定事件，如点击一个按钮，弹出一个提示框，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><button v-on:click="fun1">点击我</button></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',data: {message: "hello world!"},methods: {fun1:()=>{// alert(this.message);alert(obj.message);}}});
</script>
</html>

运行结果：
请添加图片描述
为了简化操作，可以简写为@绑定的事件，如v-on:click简写为@click。

2.4 v-model 数据双向绑定

示例为一个输入框，在输入框中输入内容，在另一个标签元素内的文本内容会随着输入的内容而变化。参考示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><input type="text" v-model="message">{{message}}</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',data: {message: "hello world!"}});
</script>
</html>

运行结果：
在这里插入图片描述
另一个示例，下拉框双向绑定，参考代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><select v-model="message"><option value="1" checked>1</option><option value="2">2</option><option value="3">3</option></select>{{message}}</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',data: {message: "1"}});
</script>
</html>

运行结果：
在这里插入图片描述

2.5 v-bind 绑定属性

学过springboot themlefy模板的读者应该了解这个th:href、th:value、th:src，v-bind也就和上述那些实现的效果一样，v-bind:href对应于th:href，为了简化操作，可以直接写成 :href。

3. Vue组件

为了复用(重复使用)，从某些方面说，也就是为了提升编写代码效率吧！比如导航栏，在很多界面上都需要，可以单独把这部分写到一个vue文件内，在其他哪些需要导航栏的html界面内，导入这个(组件)即可。(下述示例没有写vue文件)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head>
<body><div id="app"><ul><liuze v-for="item in items" v-bind:v="item"></liuze></ul></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">Vue.component('liuze',{props:['v'],template: "<li>{{v}}</li>"});var obj = new Vue({el: '#app',data: {items: [1,2,3,4,5]}});
</script>
</html>

运行结果：请添加图片描述

4. Vue axios异步通信

axios主要作用：实现ajax异步通信。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title><style>[v-clock]{display: none;}</style>
</head>
<body><div id="app" v-clock><div>{{info.code}}</div><ul><li v-for="item in info.data.list"><a v-bind:href="item.url">{{item.title}}</a></li></ul></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript" src="./axios.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',data(){return {// 需要和json格式一致info:{code: null,data:{list: [{title: null,url: null}]}}}},mounted(){axios.get('https://blog.csdn.net/community/home-api/v1/get-business-list?page=1&size=20&businessType=blog&orderby=&noMore=false&year=&month=&username=qq_45404396').then((result) => {this.info = result.data;});}// 钩子函数});
</script>
</html>

运行结果：
请添加图片描述

5. 计算属性

计算属性突出在属性，首先它是一个属性，其次这个属性是有计算的能力，这里的计算指的是函数；简单的说，它就是一个能够将计算结果缓存起来的属性(将行为转换成静态的属性)，可以当作为缓存。不能methods里的方法名同名。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head><body><div id="app">currentTime: {{currentTime()}}<br> <!-- 方法 -->currentTime2: {{currentTime2}} <!-- 属性 --></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">var obj = new Vue({el: '#app',methods:{currentTime:()=>{return new Date().getTime();}},// 计算属性computed:{// 里面写方法，是一个属性 // 不能methods里的方法名同名currentTime2:()=>{return new Date().getTime();}}});
</script></html>

运行结果：
请添加图片描述

6. 插槽 slots

关于组件如何接收模板内容，下述是官网关于这个知识点的介绍。
请添加图片描述

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head><body><div id="app"><liuze><liuze-title slot="liuze-title" v-bind:title="title"></liuze-title><liuze-items slot="liuze-items" v-for="item in items" v-bind:item="item"></liuze-items> </liuze></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">Vue.component('liuze',{template:`<div><slot name="liuze-title"></slot><ul><slot name='liuze-items'></slot>    </ul>    </div>`});Vue.component('liuze-title',{props:['title'],template:'<p>{{title}}</p>'});Vue.component('liuze-items',{props:['item'],template:'<li>{{item}}</li>'});var obj = new Vue({el: '#app',data:{title:"编程语言",items:['Java','Python','C','Go']}});
</script></html>

运行结果：
请添加图片描述

7. 自定义事件内容分发

现在相把上述编程语言进行删除操作，参考代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title>
</head><body><div id="app"><liuze><liuze-title slot="liuze-title" v-bind:title="title"></liuze-title><liuze-items slot="liuze-items" v-for="(item,index) in items" v-bind:item="item" :index="index" @remove="removeItem(index)"></liuze-items> </liuze></div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">Vue.component('liuze',{template:`<div><slot name="liuze-title"></slot><ul><slot name='liuze-items'></slot>    </ul>    </div>`});Vue.component('liuze-title',{props:['title'],template:'<p>{{title}}</p>'});Vue.component('liuze-items',{props:['item','index'],template:'<li>{{item}} <button @click="remove">删除</button></li>',methods:{remove:function(index){this.$emit('remove',index);}}});var obj = new Vue({el: '#app',data:{title:"编程语言",items:['Java','Python','C','Go']},methods:{removeItem:function(index){this.items.splice(index, 1);}}});
</script></html>

运行结果：
在这里插入图片描述

前端:Vue.js学习

1. 第一个Vue程序

2. Vue指令

2.1 v-if、v-else-if、v-else

2.2 v-for

2.3 事件绑定 v-on:

2.4 v-model 数据双向绑定

2.5 v-bind 绑定属性

3. Vue组件

4. Vue axios异步通信

5. 计算属性

6. 插槽 slots

7. 自定义事件内容分发

相关文章：