1.vue的简介及常用指令

1.vue是什么？

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。

拓展：MVVM 的工作流程​

Model（数据层）

​​View（视图层）​​

ViewModel（逻辑层）​​从 ​​Model​​ 获取数据，并转换成 ​​View​​ 能直接使用的格式（如过滤、排序）。

<!-- View（模板） -->
<div id="app">
  <p>{{ message }}</p>  <!-- 数据绑定 -->
  <button @click="reverseMessage">反转文本</button>  <!-- 事件绑定 -->
</div>

<script>
// ViewModel（Vue 实例）
new Vue({
  el: '#app',
  data: {  // Model（数据）
    message: 'Hello, MVVM!'
  },
  methods: {  // 视图逻辑
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');  // 更新 Model
    }
  }
});
</script>

2.vue.js常用指令

1.v-if 条件渲染（销毁 DOM）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>Hello, Vue.js!</h1>
			<h1 v-if="yes">Yes!</h1>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		
		var vm = new Vue({
			el: '#app',
			data: {
				yes: true
			}
		})
	</script>
</html>

2.v-show 切换显示（CSS 控制）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>Hello, Vue.js!</h1>
			<h1 v-show="yes">Yes!</h1>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		
		var vm = new Vue({
			el: '#app',
			data: {
				yes: true
			}
		})
	</script>
</html>

3.v-else v-if 的 else 块

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1 v-if="age >= 25">Age: {{ age }}</h1>
			<h1 v-else>Name: {{ name }}</h1>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				age: 28
			}
		})
	</script>
</html>

4.v-for 列表循环

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="styles/demo.css" />
	</head>

	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<th>Name</th>
						<th>Age</th>
						<th>Sex</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="person in people">
						<td>{{ person.name  }}</td>
						<td>{{ person.age  }}</td>
						<td>{{ person.sex  }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				people: [{
					name: 'Jack',
					age: 30,
					sex: 'Male'
				}, {
					name: 'Bill',
					age: 26,
					sex: 'Male'
				}]
			}
		})
	</script>

</html>

5.v-bind 动态绑定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="styles/demo.css" />
	</head>
	<body>
		<div id="app">
			<ul class="pagination">
				<li v-for="n in pageCount">
					<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
				</li>
			</ul>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				activeNumber: 1,
				pageCount: 10
			}
		})
	</script>
</html>

6.v-on 绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>
				<!--click事件使用内联语句-->
				<button v-on:click="say('Hi')">Hi</button>
			</p>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			methods: {
				say: function(msg) {
					alert(msg)
				}
			}
		})
	</script>
</html>

 如果前端感兴趣：添加微信: LarkMidTable2021 ，备注：前端 ，平时进行前端的学习交流使用。

posted @ 2025-06-13 12:58  LarkMidTable  阅读(63)  评论(0)    收藏  举报