Vuejs——前端学习日记（二）

最新推荐文章于 2024-07-15 14:11:16 发布

Tony狗

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量138

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_41815035/article/details/106591151

版权

Vuejs——前端学习日记（二）

通过之前对Vuejs进行简单项目的学习，让我对Vuejs有了初步的认识，接下来是进一步的了解。

Vue列表显示

与之前看到的声明的简单变量message，name相比，数据列表是一个更加复杂的数据，所以在显示方面也会有所不同。在HTML代码中，我们会用v-for指令来显示列表。
如果用之前那样的方法来显示Vue列表的话，也可以将列表的内容展示出来：

<div id='app'>
	<h1>{{movies}}</h1>
</div>

在这里插入图片描述
但是这样的展示是将整个列表转换为字符串的形式来展示出来。正确的显示方式应该是使用v-for来解决：

<div id='app'>
	<h1>{{message}}</h1>
	<ul>
		<li v-for='item in movies'>{{item}}</li>
	</ul>
</div>

在这里插入图片描述
有了这种方式，我们也不需要在JavaScript中完成DOM拼接的相关操作了，而且它还是响应式的，当列表中的数据发生改变时，界面会自动改变。

新的指令和属性

新的属性：methods，该属性用于在Vue对象中定义方法。
新的指令：@click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods中定义的方法）

关于methods，现在可以知道是Vue对象中的一个属性，是继el、data后第三个属性：

<script>
	const app = new Vue({
		el: '#app',
		data: {
			data //数据
		},
		methods: {
			func: function() {
				//定义函数
				this.data;
			}
		}	
	})
</script>

在methods中可以定义多个函数，而如果想要调用Vue对象里的数据信息时，不可以直接调用，这样的话函数会从全局中寻找变量导致报错，正确调用Vue对象里的数据时应该用app.data或this.data（更推荐）。

关于指令，在一个计数器的案例中可以将@click指令展示出来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>当前计数  {{counter}}</h1>
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++;
            },
            subtraction: function () {
                console.log('sub被执行');
                this.counter--;
            }
        }
    })
</script>

</body>
</html>

该案例包含两个按钮：+和–，通过点击两个按钮可以增加计数或减少计数：
在这里插入图片描述
其中

<button v-on:click="counter++">+</button>

v-on指令用来监听事件，这里的监听事件是click，而由于此案例功能实现只是简单的加数减数，所以可以直接在click后实现功能counter++和counter- -。此外也可以通过下列代码来完成功能的实现：

<div id="app">
    <h1>当前计数  {{counter}}</h1>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++;
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--;
            }
        }
    })
</script>

后续

先写到这，晚上再来更新后续Vue中的MVVM。

Tony狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs——前端学习日记（二）

Vuejs——前端学习日记（二）Vue列表显示新的指令和属性后续通过之前对Vuejs进行简单项目的学习，让我对Vuejs有了初步的认识，接下来是进一步的了解。Vue列表显示与之前看到的声明的简单变量message，name相比，数据列表是一个更加复杂的数据，所以在显示方面也会有所不同。在HTML代码中，我们会用v-for指令来显示列表。如果用之前那样的方法来显示Vue列表的话，也可以将列表的内容展示出来：<div id='app'> <h1>{{movies}}</
复制链接

扫一扫