02、Vue3.x初步【四个秘密】

最新推荐文章于 2024-07-06 01:35:56 发布

原创最新推荐文章于 2024-07-06 01:35:56 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #vue初学 #vue入门 #vue教学 #vue的常见操作

Vuejs 从入门到应用专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Vue.js的基础知识，包括数据绑定、钩子函数、属性绑定、事件监听及双向数据绑定等核心概念。通过实例帮助读者快速掌握Vue的基本用法。

vue 的入门四个秘密

哈哈哈，有什么秘密，就是不知道起个什么名字，贫嘴一下。不过，真的是非常重要的入门例子。so, 我们书接上文，开始。
学会这四个，你就算，开始学习 vue了，可以做一些超级简单的例子了

1/4 数据绑定 -> {{}}

官网叫声明式渲染，太复杂，我就叫它简单的数据绑定。非常好写。
1. {{}} ，双花括号中写变量名
2. 在挂载点上写数据，
  - 用什么？ data() { } 。
  - 写什么？ return { } 。
  - 总结：在data()方法中return一个对象，对象里写要渲染的变量名

<!DOCTYPE html>
<html>
<head>
	<title>Vue入门到应用</title>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

	<div id="container">
		//1
		{{msg}}
	</div>

</body>

<script type="text/javascript">

	const HelloVueApp = {
		//2
		data() {
			return {
				msg: 'hello vue app'
			}
		}
	}

	Vue.createApp(HelloVueApp).mount('#container')
</script>

</html>

2/4 了解一个 `钩子函数` mounted

简单理解，水走阀门，从水塔下来，先到水厂，到分厂，到区水厂，到小区，到单元楼，有无数个阀门。水流淌就像一个生命周期，每个阀门就相当于钩子。在每个阀门处都可以进行特殊操作，例如，过滤水，净化水都行。（yy一下，并不懂水怎么流出来…）

mounted 是vue中的一个钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作
一个定时器调用的例子
步骤：
- 首先，在 data方法的返回对象中，定以一个counter,
- 将其绑定到页面上用 {{}}
- 在钩子函数里面调用一个函数 setInterval() , 两个参数， param1-定时执行的函数， param2-间隔时间
- 注意： mounted 是一层 {} ，不是两层和 data 不同。

<!DOCTYPE html>
<html>
<head>
	<title>Vue入门到应用</title>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

	<div id="container">
		{{msg}}
		<br>
		<span>
			// 2
			{{counter}}
		</span>
	</div>
	
</body>

<script type="text/javascript">

	const HelloVueApp = {

		data() {
			return {
				msg: 'hello vue app',
				//1
				counter: 0
			}
		},

		mounted(){
			//3
			setInterval( ()=>{
				this.counter++;
			}, 1000);
		}
	}

	Vue.createApp(HelloVueApp).mount('#container')
</script>

</html>

3/4 属性的绑定 v-bind

使用 v-bind: , 这也是第一次接触 指令. v-* 都是指令
暂时先不去说快捷键，到后面有符号可以快速绑定，不用写v-bind
现在多写写，明了自己在操作的是什么

将 v-bind: 绑定到属性(例如title)上, v-bind:title
v-bind:title 绑定后，要将变量赋值绑定上操作过来才能有意义，通过绑定的变量去挂载点找数据，
v-bind:title = “tmsg”
在data方法返回tmsg（进行数据加工或者直接返回）

<!DOCTYPE html>
<html>
<head>
	<title>Vue入门到应用</title>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

	<div id="container">
		{{msg}}
		<br>
		<span>
			{{counter}}
		</span>
		<hr>
		<span title="hello v-bind">鼠标悬停展示 hell v-bin</span>
		<br>
		<span v-bind:title="tmsg">鼠标悬停提示 显示的时间</span>

	</div>

</body>

<script type="text/javascript">

	const HelloVueApp = {

		data() {
			return {
				msg: 'hello vue app',
				counter: 0,
				tmsg:"time now is: "+new Date().toLocaleString(),
			}
		},

		mounted(){
			setInterval( ()=>{
				this.counter++;
			}, 1000);
		}
	}

	Vue.createApp(HelloVueApp).mount('#container')
</script>

</html>

4/4 事件监听 v-on

v-* 是什么来的？指令！
v-on 监听交互事件
例如， v-on:click 哈哈哈，看demo

<!DOCTYPE html>
<html>
<head>
	<title>Vue入门到应用</title>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

	<div id="container">
		{{msg}}
		<br>
		<span>
			{{counter}}
		</span>
		<hr>
		
		<span title="hello v-bind">鼠标悬停展示 hell v-bin</span>
		<br>
		<span v-bind:title="tmsg">鼠标悬停提示 显示的时间</span>
		
		<hr>
		
		// 1
		<span>{{happyWords}}</span>
		// 3
		<button v-on:click="reverseWords"> 点击翻转文字 </button>

	</div>


</body>

<script type="text/javascript">

	const HelloVueApp = {

		data() {
			return {
				msg: 'hello vue app',
				counter: 0,
				tmsg: "time now is: "+new Date().toLocaleString(),
				// 2
				happyWords: '1234567',
			}
		},

		mounted(){
			setInterval( ()=>{
				this.counter++;
			}, 1000);
		},

		// 4
		methods: {
			reverseWords(){
				// 5
				this.happyWords = this.happyWords.split('').reverse().join('')
			}

		}

	}

	Vue.createApp(HelloVueApp).mount('#container')
</script>

</html>

思考： data 写的什么结构？ mounted呢？ methods呢？

data 是一个函数，返回一个对象，在对象里进行变量的定义
mounted 是一个钩子函数，所以是个函数，因为是生命周期的钩子，所以在生命周期到了的点，直接回自动触发。
在函数中会自动，钩子函数内回自动执行。
methods , 定义了很多要进行触发调用的函数，是个对象，对象中放的函数不自动触发
综上， data 是一个函数，返回对象。 mounted是个生命周期钩子函数，自动执行包含的函数。methods 是个对象，存了会被触发调用的函数， methods 是对象，不是函数，且存的函数不自己直接调用。

5/4 双向数据绑定 v-model

还记得什么是单向绑定？我没说？我的错！第一个数据绑定就是单向的，哈哈哈我为什么没回去改，就是想问你这个问题。
学完了回答一下，单向和双向什么区别？

<!DOCTYPE html>
<html>
<head>
	<title>Vue入门到应用</title>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

	<div id="container">
		{{msg}}
		<br>
		<span>
			{{counter}}
		</span>
		<hr>
		
		<span title="hello v-bind">鼠标悬停展示 hell v-bin</span>
		<br>
		<span v-bind:title="tmsg">鼠标悬停提示 显示的时间</span>
		
		<hr>

		<span>{{happyWords}}</span>
		<button v-on:click="reverseWords"> 点击翻转文字 </button>

		<hr>
		// 1
		<span>{{myWrite}}</span><br>
		<input v-model="myWrite">

	</div>

</body>

<script type="text/javascript">

	const HelloVueApp = {

		data() {
			return {
				msg: 'hello vue app',
				counter: 0,
				tmsg: "time now is: "+new Date().toLocaleString(),
				happyWords: '1234567',
				//2
				myWrite: 'i am Silvercell, 祝你编程进步'
			}
		},

		mounted(){
			setInterval( ()=>{
				this.counter++;
			}, 1000);
		},

		methods: {
			reverseWords(){
				this.happyWords = this.happyWords.split('').reverse().join('')
			}
		}
	}
	
	Vue.createApp(HelloVueApp).mount('#container')
</script>

</html>