Vue.js入门基础(一)最近突然想学一下vue.js,之前遇到过比较麻烦的前端渲染操作,用jquery append() html元素,是真的有点头疼。然后了解到vue.js支持双向绑定什么的,会简单很多,专门来学习一下,当然也得从最基础的开始学起。

1.MVVM模式

MVVM是Model-View-ViewModel的简写MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="div01">
			<p>{{message}}</p>
		</div>
	</body>
</html>
<script>
	var vm = new Vue({
		el: "#div01", //表示当前实例要控制的元素
		data: {       //data属性中存放的是el中要用的数据
			message: '这是当前el下的data属性中的message'
		}
	})
</script>

2.v-text、v-html 基本使用

代码示例

v-text、以及插值表达式都可以想指定标签输入内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p >{{message}}-原值</p>       <!-- 插值表达式不会覆盖原值 -->
			<p v-text="message">-原值</p>  <!-- v-text会覆盖原值 -->
			<p v-html="message2"></p>      <!-- v-html可以将字符串解析为html -->
		</div>
	</body>
</html>
<script>
	var vm = new Vue({
		el: "#app" ,
		data: {
			message: 'Test',
			message2: '<h1>这是一个h1标签</h1>'
		      }
	})
</script>

效果

3.v-bind

v-bind:绑定属性的指令

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p >{{message}}-原值</p>       <!-- 插值表达式不会覆盖原值 -->
			<p v-text="message">-原值</p>  <!-- v-text会覆盖原值 -->
			<p v-html="message2"></p>      <!-- v-html可以将字符串解析为html -->
		    <button v-bind:title="title">按钮</button> <!-- v-bind:绑定属性的指令 -->
		</div>
	</body>
</html>
<script>
	var vm = new Vue({
		el: "#app" ,
		data: {
			message: 'Test',
			message2: '<h1>这是一个h1标签</h1>',
			title:  '这是一个标题'
			}
	})
</script>

效果

注意

 <button v-bind:title="title">按钮</button>
//也可以简写为下面的
 <button :title="title">按钮</button>

4.v-on

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-bind:title="title" v-on:click="show">按钮</button> <!-- v-bind:绑定属性的指令 -->
		</div>
	</body>
</html>
<script>
	var vm = new Vue({
		el: "#app",
		methods: { // methods属性中定义了当前示例所有可用的方法
			show: function() {
				alert("Hello");
			}
		}
	})
</script>

效果

5.跑马灯小练习小练习

效果

{{msg}}

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<button v-on:click="start">开始</button>
			<button v-on:click="stop">停止</button>
			<p>{{msg}}</p>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			msg: '我是头,我是尾巴`( ̄▽ ̄)` ',
			intervalId: null
		},
		methods: { // methods属性中定义了当前示例所有可用的方法
			start() {
				if (this.intervalId != null) {
					return
				};
				this.intervalId = setInterval(() => {
					var head = this.msg.substring(0, 1);
					var rear = this.msg.substring(1);
					this.msg = rear + head;
				}, 100);

			},
			stop() {
				console.log(this.intervalId);
				clearInterval(this.intervalId);
				this.intervalId = null;
			}
		}
	})
</script>

标签云

ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd Hexo IDEA JavaScript jsDeliver JS樱花特效 Linux markdown Maven MyBatis MyBatis-plus MySQL Pictures Sakura SEO Spring Boot SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运