vue 左右滑动切换div_又学Vue系列：学习第二天

最新推荐文章于 2024-08-12 15:26:40 发布

睁眼闭眼哦

最新推荐文章于 2024-08-12 15:26:40 发布

阅读量712

点赞数

文章标签： vue 左右滑动切换div

本文链接：https://blog.csdn.net/weixin_28881787/article/details/112174729

版权

这篇博客主要介绍了Vue.js的基础概念，如MVVM框架和生命周期，以及基础语法，包括Mustache插值、v-once、v-html、v-pre、v-cloak和v-bind的使用。此外，还提到了如何实现左右滑动切换div的功能。

摘要由CSDN通过智能技术生成

【需要理解的知识】

Vuejs的基础概念

Vue实例：通过模板语法创建的vue实例，将会由vuejs解析处理。
MVVM：是Model-View-ViewModel的简写，通过viewmodel处理model和view，vue采用的是MVVM框架。
生命周期：vue实例创建过程中执行的各种代码就是vue的生命周期。在生命周期中，vue会回调一些vue实例中的函数，从而让我们知道该vue实例执行到生命周期的哪一步骤。
生命周期钩子(函数)：最常用的是created和mounted。

【需要掌握的知识】

基础语法

Mustache

插值操作，Mustache语法既双大括号。

支持变量、表达式写法。

<div id="app">
<h1>{{message}}h1>
<h2>{{3 + 5}}h2>
div>

v-once

添加v-on指令后，对应标签中的值变为非响应式。

<div id="app">
<h1>{{message}}h1>
<h1 v-once>{{message}}h1>  
div>

v-html

添加v-html后，表示以html的形式展示。
```
<div id="app">
<h1 v-html="message">h1>
div>
```

v-pre

添加v-pre后，将不会解析标签内的内容，原封不动展示。
```
<div id="app">
<h1>{{message}}h1>
<h1 v-pre>{{message}}h1>
div>
```

v-cloak

在vue解析后，会删除div中的v-cloak属性。

可以用于避免vue解析前给人看到vue的原始代码。(但后期隐藏通常用虚拟dom)

<head>
<style>[v-cloak] {display: none;
    }style>
head>
<body>
<div id="app" v-cloak>{{message}}div>
body>

v-bind

在属性前加上v-bind后，vue会将该属性的值当成变量。

【:】是v-bind的语法糖。

<div id="app">
<img v-bind:src="imgURL">
<img :src="imgURL">  
div>

v-bind对象语法

v-bind绑定的属性值，可以是一个对象，当对象中的value为true时才会显示key。
```
<div id="app">
<img v-bind:class="{active: true,line: false}">  
div>
```

点击确定键，切换文字颜色。

<html><head><meta charset="utf-8" /><title>title><script src="js/vue.js" type="text/javascript" charset="utf-8">script><style>.active {color: red;
			}style>head><body><div id="app"><h1 v-bind:class="{active:isActive}">测试文字h1><button @click="butClick">点击button>div>body><script>const app = new Vue({
			el: '#app',
			data: {
				isActive: false
			},
			methods:{
				butClick: function () {this.isActive = !this.isActive
				}
			}
		})script>html>

【目前学习进度一览】