Vue 学习02——常用模版语法菜鸟教程【v-if / v-show / v-bind / v-for】

㋀㏩

✎ 前言

◆ v-for 绑定事件指令

① 数组循环

❶ item in items

▶ 全写demo（不含index）

❷ (item, index) in items

▶ 全写demo（含index）

② 对象循环

③ 组件循环

前言： <componentA v-for="(value,key) in objList" :key="key"></componentA>

▶ 1.创建a.vue

▶ 2.在App.vue中编写组件a.vue循环

▶ 3.效果图

④ v-for 遇到的问题

✎ 总结

◆ 直接书写标签属性和使用v-bind定义的区别（x.vue）

▶ class的3种用法

变量

数组

[classA,classB]

数组和对象的混用（style的写法）

script里面的data（附件）

v-if%20%2F%20show%20%2F%20bind%E6%95%B4%E5%90%88-toc" style="margin-left:40px;">◆ 小试牛刀v-if / show / bind整合1

① 效果图

v-if%20%2F%20else%20%E6%95%B4%E5%90%882-toc" style="margin-left:40px;">◆ 小试牛刀v-if / else 整合2

✎ 总结

前言

之前我们已经了解到了vue的框架是MVVM，MODEL就是数据结构，el标识绑定的元素，只有在绑定元素的内部，我们才可以使用vue的实例和vue的处理过程，data是可以直接在视图模板中使用的。

vue学习关注的东西

view实例【渲染数据的HTML】
view-model（就是script里面的内容）

我们要做的事情就是理解vue的指令！！

vue%E6%8C%87%E4%BB%A4">常见的vue指令

v-if%20%2F%20v-show%20%E7%BB%91%E5%AE%9A%E5%85%83%E7%B4%A0%E6%8C%87%E4%BB%A4">v-if / v-else / v-show 绑定元素指令

判断ifshow是否为真，真则div元素显示，两个指令的效果是一样的。

v-show区别在于元素师存在的但是是设置了display:none，而v-if是元素直接移除！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE-001</title>
</head>
<body>
<div id="app">
    <div v-if="ifshow">
        {{message}}
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script type="text/javascript">
    var myvue = new Vue({
        el: "#app",
        data: {
            ifshow: true,
            message: "hello world"
        }
    })
</script>

</body>
</html>

v-bind 绑定事件指令
简写demo

全写demo

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>

....

<div id="app">
    <a v-bind:href="links">百度</a>
</div>

....

</body>
</html>

v-for 绑定事件指令(数组、对象、组件循环)
数组循环

❶ item in items

v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

全写demo（不含index）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in userList">{{item.username}}</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<script type="text/jscript">
			var myvue = new Vue({
				el: "#app",
				data: {
					userList: [{
						username: "zhangsan",
						age: 23
					}, {
						username: "lisi",
						age: 20
					}]
				}
			})
		</script>
	</body>
</html>

❷ (item, index) in items

v-for 指令还可以取到列表的索引值，(item, index) in items ，在循环列表中取到的index值即其索引值。

全写demo（含index）

<div id="app">
	<ul>
		<li v-for="(item,index) in userList">
			{{index}}
		    {{item.username}}
		</li>
	</ul>
</div>

<!-- ---------------------x.vue写法--------------------- -->

<template>
    <div>
		<!-- 数组的循环渲染 -->
		<p v-for="(item,index) in list">{{index}}:{{item.name}} - {{item.price}}</p>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				hello: 'world',
				num: 1,
				status: true,
				list: [{
						name: 'apple',
						price: 34
					},
					{
						name: 'banana',
						price: 56
					},
				],
				objList: {
					name: 'apple',
					price: 34,
					color: 'red',
					weight: 14
				}
			}
		}
	}
</script>

对象循环

<template>
    <div>
		<!-- 对象的循环渲染  -->
		<p v-for="(value,key) in objList">{{key + value}}</p>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				hello: 'world',
				num: 1,
				status: true,
				list: [{
						name: 'apple',
						price: 34
					},
					{
						name: 'banana',
						price: 56
					},
				],
				objList: {
					name: 'apple',
					price: 34,
					color: 'red',
					weight: 14
				}
			}
		}
	}
</script>

组件循环
vue">创建a.vue

<template>
	<div>
		{{hello}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				hello: "i am component a"
			}
		}
	}
</script>

<style scoped>
</style>

在App.vue中编写组件循环

<template>

	<div>
		<!-- 3.循环渲染组件 -->
		<!-- 
		驼峰命名方法（componetA）在html标签里面，要转成（componet-a）中划线的命名方式，因为在标签内部是不区分大小写的，
		但是在vue2.0可以直接写成componetA也可以写成componet-a，所以该版本及其以上不需要关心大小写对应组件关系；
		PS：但是还是建议中划线的命名
		-->
		
		<componetA></componetA>
		<componet-a></componet-a>
		<br>
		
		<p>A</p>
		<componentA v-for="(value,key) in objList" :key="key"></componentA>
		<br>
		<p>-a</p>
		<component-a v-for="(value,key) in objList" :key="key"></component-a>
		
	
	</div>
</template>

<script>
	import componentA from './components/a'
	/* 
	 * 1.import componentA from './components/a.vue' 这里可以省略 ".vue"，因为它会依次去找js
	 * a.x一直找到a.vue，发现有a.vue这个文件，就将a.vue这个文件引入到componentA里面
	 * 2.接下来我们需要将componentA的template渲染到App.vue中<componentA></componentA>
	 * 3.完成componentA完成注册
	 */

	export default {
		components: {
		  componentA/* componentA:componentA es6语法，注意单词不要打错了*/
		},
		data() {
			return {
				hello: 'world',
				num: 1,
				status: true,
				list: [{
						name: 'apple',
						price: 34
					},
					{
						name: 'banana',
						price: 56
					},
				],
				objList: {
					name: 'apple',
					price: 34,
					color: 'red',
					weight: 14
				}
			}
		}
	}
</script>

<style>
	html {
		height: 100%;
	}

	body {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	#app {
		color: #2c3e50;
		margin-top: -100px;
		max-width: 600px;
		font-family: Source Sans Pro, Helvetica, sans-serif;
		text-align: center;
	}
</style>

效果图

v-for 遇到的问题

1、./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js --路径错误，注意import是总 ./ 开头，下面的components和import的名字不要写错

2、component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info

:key="key" 在循环组件的时候必须写上

v-if%2Fshow%2Fbind%E6%95%B4%E5%90%88">直接书写标签属性和使用v-bind定义的区别

前言：前者是字符串，后者是data里面的属性

<!-- App.vue文件 -->
<template>

	<div>
		<!-- 不通过v-bind绑定属性时，link就是一个string -->
		<a href="link" :title="hello">to Vue org</a>
		<!-- 通过v-bind绑定属性时，link就是data里面的一个变量 -->
		<a :href="link" :title="hello">to Vue org</a>
		<br>
		<componentA :dataA="dataA"></componentA>
	</div>
</template>

<script>
	import componentA from './components/a'
	
	export default {
		components: {
			componentA /* componetA:componetA es6语法 */
		},
		data() {
			return {
				hello: '<span><img>world</span>',
				link: 'https://vuejs.org/',
			}
		},
	}
</script>

<style>
</style>

效果图

class的3种用法
变量

<a :href="link" :title="hello" v-bind:class="classStr" class="class-href">class变量</a>

数组

<a :href="link" :title="hello" :class="classArray">class数组</a>

[classA,classB]

<a :href="link" :title="hello" :class="[classA,classB]">[classA,classB]</a>

数组和对象的混用（style写法）

<a :href="link" :title="hello" :class="[classA,{'red-font':hasError}]">数组和对象的混用</a>

script里面的data（附件）

<!-- App.vue -->
<template>

	<div>
		<!-- 不通过v-bind绑定属性时，link就是一个string -->
		<a href="link" :title="hello">to Vue org</a>
		<br>
		<!-- 通过v-bind绑定属性时，link就是data里面的一个变量 -->
		<!-- class为字符串的方式 -->
		<a :href="link" :title="hello" v-bind:class="classStr" class="class-href">to Vue org</a>
		<!-- class 为对象的方式 -->
		<a :href="link" :title="hello" :class="classArray">class数组方式</a>
		<a :href="link" :title="hello" :class="[classA,classB]">[a,b]方式</a>
		<a :href="link" :title="hello" :class="[classA,{'red-font':hasError}]">数组和对象的混用</a>
		<!-- class为数组的方式 -->

		<br>
		<!-- style -->
		<a :style="linkCss">数组和对象的混用</a>
		<br>
		<componentA :dataA="dataA"></componentA>
	</div>
</template>

<script>
	import componentA from './components/a'

	export default {
		components: {
			componentA /* componetA:componetA es6语法 */
		},
		data() {
			return {
				hello: '<span><img>world</span>',
				link: 'https://vuejs.org/',
				classStr: 'red-font',
				className: {
					'red-font': true,
					'blue-font': false,
				},
				classArray: ['red-font', 'big-font'],
				classA: 'hello',
				classB: 'world',
				dataA: 12,
				hasError: true,
				linkCss: {
					'color': 'red',
					'font-size': '20px',
				},
				list: [{
						name: 'apple',
						price: 34
					},
					{
						name: 'banana',
						price: 56
					},
				],
				objList: {
					name: 'apple',
					price: 34,
					color: 'red',
					weight: 14
				}
			}
		},
	}
</script>

<style>
</style>

v-if%20%2F%20show%20%2F%20bind%E6%95%B4%E5%90%88">小试牛刀v-if / show / bind整合1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE最基本的指令v-if/v-show/v-bind</title>
	</head>
	<body>
		<div id="app">
			<div id="" v-if="ifshow">
				{{message}}
			</div>
			<!-- <a href="">百度</a> -->
			<a :href="links">百度1/:href</a>
			<br/>
			<a v-bind:href="links">百度2/v-bind:href</a>
		</div>

		<!-- 
		v-if   确定元素是否在视图中存在 
		v-show 确定元素是否在试图中显示，displa是none
		v-bind 给标记添加动态属性，属性从data里面来
		-->

		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<script type="text/jscript">
			var myvue = new Vue({
				el: '#app',
				data: {
					ifshow: true,
					message: 'hello world',
					links:'https://www.baidu.com/',
				}
			})
		</script>
	</body>
</html>

效果图

v-if%20%2F%20else%20%E6%95%B4%E5%90%882">小试牛刀v-if / else 整合2

<!-- App.vue -->

<template>

	<div>
		<!-- v-if/v-else -->
		<a v-if="isPartA">partA</a>
		<a v-else>no data</a>
		<button v-on:click="toggle">toggle</button>	
	</div>
</template>

<script>
	import componentA from './components/a'

	export default {
		components: {
			componentA /* componetA:componetA es6语法 */
		},
		data() {
			return {
				isPartA: true,
			}
		},
		methods: {
			toggle() {
				this.isPartA = !this.isPartA
			}
		}
	}
</script>

<style>
</style>

总结

v-if 确定元素是否在视图中存在
v-show 确定元素是否在视图中显示
v-bind 给标记添加动态属性