当前位置：首页 > news >正文

Vue--Vue基础(二)

news 2025/10/4 7:10:55

Vue–Vue基础(二)

文章目录

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

1.Vue 指令详解

1.1.v-if 条件渲染

<div id="app"><p v-if="isShow">表达式的值为真，我就能显示</p>
</div><script>
new Vue({el:"#app",data: {isShow: true}
});
</script>

1.2.v-else 指令

<!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 显示隐藏

<!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 事件绑定

<!-- 基本用法 -->
<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 双向绑定

<!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 属性绑定

<!-- 基本用法 -->
<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 列表渲染

<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的作用：高效重用和重新排序现有元素，建议提供唯一标识