• vue基础复习

    vue基础复习


    目录


    1. MVVM

    在这里插入图片描述


    2. 基本模板语法

    el:‘’ 唯一根标签，控制页面中的哪个视图区域

    data:{} 数据对象

    methods:{} 定义方法

    filters:{} 过滤器

    directives:{} 指令

    components:{} 组件

    watch:{} 监听

    computed:{} 计算

    router:’’ 路由挂载


    3. 指令

    v-text 显示文本
    v-html 显示文本，能够识别html标签
    v-show 元素显示
    v-if 元素隐藏
    v-on 事件绑定
    v-bind 属性绑定
    v-model 双向数据绑定
    v-for 遍历(结合key属性使用，标识数据的唯一性)


    4. 案例

    ①隔行变色

    
DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
	<script src="./lib/vue-2.4.0.js">script>
	<style>
		li{
			width: 100px;
			height: 100px;
			margin: 10px;
		}
		.pink{
			background-color: pink;
		}
		.yellow{
			background-color: yellow;
		}
	style>
head>
<body>
	<div id="app">
		<ul>
			<li v-for="(item,index) in fruit" key="index" :class="{'pink': index%2 === 0, 'yellow': index%2 !== 0}">{{index}} {{item}}li>
		ul>
	div>
	<script>
		let a = new Vue ({
			el:'#app',
			data:{
				fruit:["苹果","香蕉","橘子","桃子"]
			}
		})
	script>
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39


    ②商品栏切换

    DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
	<script src="lib/vue-2.4.0.js">script>
	<script src="lib/vue-router-3.0.1.js">script>
	<style>
		.main_div{
			height: 300px;
			width: 500px;
			border: 1px solid black;
		}
		.top{
			height: 50px;
			width: 100%;
			border-bottom: 1px solid black;
		}
		.tx{
			height: 30px;
			width: 30px;
			border-radius: 50%;
			margin-top: 10px;
			margin-left:10px;
		}
		.hello{
			float: right;
			margin-right: 10px;
		}
		.b_left{
			float: left;
			width: 150px;
			height: 250px;
			border-right: 1px solid black;
			text-align: center;
			line-height: 40px;
		}
		.b_right{
			float: right;
			width: 340px;
			height: 250px;
			/* background-color: black; */
		}
		.tab{
			width: 150px;
			height: 40px;
			border-bottom: 1px solid black;
		}
	style>
head>
<body>
	<div id="app" class="main_div">
		<headerdiv>headerdiv>
		<leftdiv>leftdiv>
		<rightdiv>rightdiv>
	div>
	<template id="headerdiv">
		<div class="top">
			<img src="./img/shsf爅.jpg" class="tx"/>
			<p class="hello">欢迎您，amyp>
		div>
	template>
	<template id="leftdiv">
		<div class="b_left">
			<div class="tab"><router-link to="/user">商品信息router-link>div>
			<div class="tab"><router-link to="/goods">用户信息router-link>div>
		div>
	template>
	<template id="rightdiv">
		<div class="b_right">
			<router-view>router-view>
		div>
	template>
	<template id="user">
		<h1>这是用户信息的内容h1>
	template>
	<template id="goods">
		<h1>这是商品信息的内容h1>
	template>
	<script>
	let user={
		template:"#user"
	}
	let goods={
		template:"#goods"
	}
	let routerObj = new VueRouter({
		routes:[
			{path:"/user",component:user},
			{path:"/goods",component:goods},
		]
	})
	let a = new Vue({
		el:'#app',
		data:{
			
		},
		components:{
			"headerdiv":{
				template: "#headerdiv"
			},
			"leftdiv":{
				template:"#leftdiv"
			},
			"rightdiv":{
				template:"#rightdiv"
			}
		},
		router:routerObj
	})
	script>
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115


    本篇博客为本人学习Vue时的详细笔记，如有错误之处，还望各位指正。
    文章为原创，如要转载请注明出处

  • 相关阅读:
    java毕业设计大学生心理健康教育及咨询系统Mybatis+系统+数据库+调试部署
    layui中多个checkbox只能进行单选且一个被选中则取消其他的选中状态
    基于改进量子粒子群算法的电力系统经济调度（Matlab代码实现）
    合工大现代企业管理期末报告--阿里巴巴企业管理模式探究
    java家庭财务管理系统设计与实现计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
    Android轮播图控件com.github.pinguo-zhouwei:MZBannerView:v2.0.2
    在Node.js中，什么是事件发射器（EventEmitter）？
    java 云MAS业务平台_中国移动
    总结710
    若依 ruoyi 路径 地址 # 井号去除
  • 原文地址：https://blog.csdn.net/m0_59188912/article/details/136736934