Vue--Vue基础(二)

文章目录

Vue--Vue基础(二)
- [1.Vue 指令详解](#1.Vue 指令详解)
- - [1.1.v-if 条件渲染](#1.1.v-if 条件渲染)
  - [1.2.v-else 指令](#1.2.v-else 指令)
  - [1.3.v-show 显示隐藏](#1.3.v-show 显示隐藏)
  - [1.4 v-if vs v-show](#1.4 v-if vs v-show)
  - [1.5 v-on 事件绑定](#1.5 v-on 事件绑定)
  - [1.6v-model 双向绑定](#1.6v-model 双向绑定)
  - [1.7v-bind 属性绑定](#1.7v-bind 属性绑定)
  - [1.8v-for 列表渲染](#1.8v-for 列表渲染)
- [2.Vue 核心配置项](#2.Vue 核心配置项)
- - 2.1el
  - 2.2data
  - 2.3methods
- [3.Vue 优点](#3.Vue 优点)

1.Vue 指令详解

1.1.v-if 条件渲染

vue 复制代码

<div id="app">
    <p v-if="isShow">表达式的值为真，我就能显示</p>
</div>

<script>
new Vue({
   el:"#app",
    data: {
        isShow: true
    }
});
</script>

1.2.v-else 指令

vue 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.min.js"></script>
		<title>条件渲染</title>
	</head>
	<body>
		<div id="app">
			<h1 v-if="awesome">Vue is awesome</h1>
			<h1 v-else>oh</h1>
		</div>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					awesome:false
				}
			})
		</script>
	</body>
</html>

1.3.v-show 显示隐藏

vue 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.min.js"></script>
		<title>v-show</title>
	</head>
	<body>
		<div id="app">
			<h1 v-show="awesome">Vue is awesome</h1>
			<h1 v-show="!awesome">oh</h1>
			<button @click="awesome = !awesome">切换显示</button>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					awesome: true
				}
			})
		</script>
	</body>
</html>

1.4 v-if vs v-show

特性	v-if	v-show
渲染机制	条件为false时不渲染到DOM	始终渲染，通过display控制显示
切换消耗	高（涉及DOM操作）	低（只是CSS切换）
初始渲染	低消耗	高消耗
适用场景	条件不太可能改变	需要频繁切换

1.5 v-on 事件绑定

vue 复制代码

<!-- 基本用法 -->
<button v-on:click='fn()'>点击</button>

<!-- 简写形式 -->
<button @click='fn'>点击</button>

<!-- 传递参数 -->
<button @click="say('Hi')">Hi</button>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="js/vue.min.js"></script>
		<title>事件处理</title>
	</head>
	<body>
		<div id="example">
			<!-- <button v-on:click="greet">点击</button> -->
			<button @click="greet()">点击</button>
		</div>
		
		<script>
			var app=new Vue({
				el:"#example",
				data:{
					message:"hello 99"
				},
				methods:{
					//方法必须定义到vue Menthods对象中
					greet:function(){
						alert(this.message);
					}
				}
			})
		</script>
	</body>
</html>

1.6v-model 双向绑定

vue 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.min.js"></script>	
		<title>双向绑定v-model</title>
	</head>
	<body>
		<!-- <div id="example">
			输入文本：<input type="text" v-model="message"/>{{message}}
		</div> -->
		<div id="example">
			<input type="radio" name="sex" value="男" v-model="message" checked/>男
			<input type="radio" name="sex" value="女" v-model="message"/>女
			<p>
				选中了：{{message}}
			</p>
		</div>
		
		<script>
			var app=new Vue({
				el:"#example",
				data:{
					message:" "
		
			}
		});
		</script>
	</body>
</html>

适用元素：表单元素（input、textarea、select等）

1.7v-bind 属性绑定

vue 复制代码

<!-- 基本用法 -->
<img v-bind:src="imageSrc">

<!-- 简写形式 -->
<img :src="imageSrc">

<!-- 动态类名 -->
<div :class="{ divclass: isRed }"></div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.min.js"></script>
		<title>v-bind示例</title>
	</head>
	<body>
		<div id="app">
             <img v-bind:src="imageSrc">
    
		</div>
		
		<script>
            var vm = new Vue({
                el: '#app',
                data: {
                    imageSrc: "images/5.jpg",
                    isRed: true
                }
            });
        </script>
	</body>
</html>

1.8v-for 列表渲染

vue 复制代码

<div id="app">
    <!-- 遍历对象 -->
    <li v-for="(value, key, index) in person">
        {{index}} - {{key}} - {{value}}
    </li>
    
    <!-- 遍历数组 -->
    <li v-for="(item, index) in lesson" :key="index">
        {{index}} - {{item.name}} - {{item.type}}
    </li>
    
    <!-- 双层嵌套 -->
    <li v-for="(item, index) in lesson">
        <span v-for="(childValue, index) in item.type">
            {{index}} - {{childValue}}
        </span>
    </li>
</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.min.js"></script>
		<title>列表渲染</title>
	</head>
	<body>
		<table id="example" border="1" >
			<tr>
				<td>序号</td>
				<td>学号</td>
				<td>姓名</td>
			</tr>
			<tr v-for="(item,index) in list">
				<td>{{(index+1)}}</td>
				<td>{{item.StudentNo}}</td>
				<td>{{item.StudentName}}</td>
			</tr>
		</table>
		<script>
			var app=new Vue({
				el:"#example",
				data:{
					list:[
						{
						   StudentName: "张三",
						   StudentNo:1000
						},
						{
							StudentName: "李四",
						    StudentNo:1001
						},
						{
							StudentName: "王五",
						   StudentNo:1002
						}
					]
				}
			})
		</script>
	</body>
</html>

key的作用：高效重用和重新排序现有元素，建议提供唯一标识

2.Vue 核心配置项

2.1el

指定Vue实例挂载的元素
值：选择器字符串或DOM元素

2.2data

定义响应式数据
在模板中通过插值表达式或指令使用

2.3methods

定义方法
在模板中通过v-on指令调用

3.Vue 优点

简洁：模板+数据+实例，结构清晰
轻量：35KB大小，性能优秀
渐进式：可以边学边用，逐步深入
数据驱动：视图与数据分离，无需直接操作DOM
社区丰富：大量中文资料和开源案例