Vue3基础---vue(2)

vue基础语法

其实昨天也简单的记录了几个

1. v-bind 可以简化为 :参数
2. v-on 简化为 @监听事件
3. v-model
   下来今天接着来哈

估计大家到现在都不知道这个v-model到底能干嘛对吧
其实一开始我也不知道，但是大家看看下面这个代码
会不会有点启发呢

<input type="text" v-model="formData.username"><br>
<input type="text" v-model="formData.password"><br>
<button @click="submit">提交</button>

data() {
	return {
		counter: 0,
		message: "我是Vue",
		formData: {
			username: null,
			password: null
		}
	}
}

submit() {
	console.log(this.formData)
}

大家看到这其实已经知道我要干嘛了，是的，我把input的两个值与 data中的formData中的参数进行的绑定，那么我们就可以不用操作DOM来实时的获取用户输入的值，大家注意一下哈，我上面说了，v-on可以简写为@
所以

<button @click=“submit”>提交

等效为

<button v-on：click=“submit”>提交

是不是非常的 easy ok！看下结果哈

这不，结果和咱们想的一模一样，那么在后期，提交表单，判断用户信息，只需要把fromData进行请求就行了，剩下交给服务器。ok！就先到这，下一个哈！

这个就到这，后面我会做项目练习的，到时候在一起好好聊

---

有的同学会问了 难道一个好的框架连个判断啥的都没有？？？

那是不可能的！！！

来看 ==v-if== 不过插一句哈，后端学这些确实是如鱼得水。一看if基本都知道是啥东西了

<div v-if="show">
	v-if test!
</div> -->
<button @click="show = false">隐藏</button>

data() {
	return {
		show: true
	}
}

解释一下：
在div后面加了一个v-if 后面的 show 是指向 data 中的 show 的
而show的初始值是true，所以会显示的；
而@click=“show = false” 这是内联的写法，其实后面应该是方法，也就是function;@的话我就不解释了啊，v-on的意思

@click=“show = false”

等效于

v-on:click=“方法名”
方法名 ：function(){
this.show = false
}

这样是不是就明了了！嘿嘿嘿嘿！！！
当然等show变成false时，也就是
消失了，因为 v-if=”show“ 已经为false了
一起来看看结果

视频正在审核，之后再补充

---

好了，if也看过了，再来一个大家很熟悉的
for循环
不论时学哪个语言的这个for大家都认识吧
ok，简单明炼的快速过一遍

<ol>
	<li v-for="todo in todos">
		{{todo.text}}
	</li>
</ol>
没有数组下标
<hr>
有数组下标
<ol>
	<li v-for="(todo,index) in todos">
		{{todo.text}}---{{index}}
	</li>
</ol>

data() {
	return {
		todos: [
		{ text: '起床' }, 
		{ text: '吃饭' }, 
		{ text: '学习' }
		]
	}
}

其实这一节，我感觉没啥说的，直接看结果，用结果说话

过程是这样的，给大家大体说一下：

todos：是我们定义的数组
通过in进行遍历
todo就是遍历出来的单个对象

todos: [
{ text: ‘起床’ },
{ text: ‘吃饭’ },
{ text: ‘学习’ }
]
每个对象都有一个 text 属性，
所以就有了 todo.text
也就是text的每个值

	而index
	<li v-for="(todo,index) in todos">
	{{todo.text}}---{{index}}
	</li>
	其实大家都知道数组是从0开始的
	那么这就显而易见了index就是获取他的下标

ok了奥~~，我感觉应该差不多了吧！哈哈哈哈，有问题评论啊

---

组件
其实一开始我是由疑惑的，组件到底能干嘛，一套开发下来，直接，模块划分就好了，扯那玩意有啥用，但是，前辈能想到的东西并且可以应用广泛，那必然有他的好处，给大家小小的说一下吧

大家看这个页面，下面的控制键，这就是一个组件，难道每个开发的都需要把这个组件写一遍？代码复制一遍？
不是吧！那么组件就出来了，直接用，直接性的提高了代码复用性，而且更容易进行模块性的管理，这不是很爽吗
说不明白就上代码！！！

== 注意啊，所欲的东西必须放在你挂载的那个元素下面 ==

<todo-Item></todo-Item>

//定义组件
const todoItem = {
	//定义模板
	template: `<li> 这是一个组件 </li> `
}

const Counter = {
	// 加载组件
	components: {
	// 当名字与组件相同时可以直接写，也就是
	//todoItem 等价于 todoItem : todoItem
		todoItem
	}
}
Vue.createApp(Counter).mount('#counter')

ok!分析分析吧
定义了组件todoItem
todoItem 的模板为  <li> 这是一个组件 </li>

在Counter中通过components: { todoItem }
将组件todoItem注册进了Counter

所以最后
Vue.createApp(Counter).mount(‘#counter’)
可以看到的是应用实例还是Counter
通俗易懂的来说就是
Counter里面加了一个todoItem

调用的时候就是直接用组件名，

注意，组件名调用根据驼峰式命名的在多个单词之间要加 -，不然不起作用

ok，结果没问题！

---

父组件给子组件传递数据

在子组件中我们不能就代办的显示静态数据吧！
所以需要动态的数据，那么，怎样去获取数据呢！
直接

{{ 变量 }}

给大家说啊，在子组件中是没法直接去使用父组件的数值的，所以说直接在template 中使用 {{变量}}是没用的
那么怎样去实现它呢？
看代码！！！！！在分析！！！！

<todo-Item v-for="todoitem in todos" v-bind:todo="todoitem"></todo-Item>

const todoItem = {
	//接收数据,参数从父组件传递
	props: ["todo"],
	template: `<li> 这是一个组件  --- {{todo.text}} </li> `
}
        
const Counter = {
	// 加载组件
	components: {
		todoItem
	},
	data() {
		return {
		todos: [
		{ text: '起床' },
		{ text: '吃饭' },
		{ text: '学习' }]
	}
}

大家看一下这一行代码
v-for=“todoitem in todos” v-bind:todo=“todoitem”
我们将todos中的元素进行遍历 遍历的每个元素为 todoitem
在后面我们将todoitem 绑定为 todo
再看这行代码
props: [“todo”],
template: <li> 这是一个组件 --- {{todo.text}} </li>
其实大家不难发现，todo刚好时props中的值，而下面的模块也是直接用了todo中的text，这样才有了数值，这样才把父组件中的值通过绑定进而到了子组件中，进而达成了数值的传递