Vue学习笔记（三）常用指令、生命周期-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue学习笔记（三）常用指令、生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue学习笔记（三）常用指令

vue指令：html标签上带有 v- 前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
常用指令：

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为html标签绑定属性值，如设置href，css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为html标签绑定事件

v-for

语法： v-for = “(item,index) in items”
当 index 索引/下标为0时，可以省略，省略语法： v-for = “item in items”

......
 <tr v-for="article in articleList">
	<td>{{article.title}}</td>
	<td>{{article.category}}</td>
	<td>{{article.time}}</td>
	<td>{{article.titstatele}}</td>
</tr>
......

v-bind

作用：为html标签的属性动态绑定属性值

<a v-bind:href="url">test</a>

## 简化写法
<a :href="url">test</a>

v-if & v-show

作用：都是用来控制元素的显示与隐藏功能

v-if
语法：v-if=“表达式”，表达式值为 true 显示；false 隐藏；
可配合 v-else-if / v-else 进行链式调用条件判断；
场景：基于条件判断，来控制创建或移除元素节点，不频繁切换；

v-show
语法： v-show=“表达式” ，表达式值为 true 显示；false 隐藏；
场景：基于css样式display来控制显示与隐藏，频繁切换显示隐藏的场景；

v-on

作用：为html标签绑定事件
语法：v-on:事件名=“函数名” 简写为 @事件名=“函数名”
注意：函数名需在methods中定义；

createApp({
	data(){
		......需要用到的数据.....
	},
	methods:{
		......需要用到的方法......
	}
});

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model=“变量名”

Vue学习笔记（四）生命周期

Vue学习笔记（三）常用指令、生命周期,vue,vue指令,vue生命周期,vue常用指令
生命周期的八个阶段文章来源地址https://www.toymoban.com/news/detail-830379.html

状态	阶段周期
beforeCreate	创建前
create	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	数据更新前
updated	数据更新后
beforeUnmount	组件销毁前
unmounted	组件销毁后

<script type="module">
import {createApp} from 'https://.../vue.esm-browser.js'
const app=createApp({
	data(){
		return{
			message:"hello vue"
		}
	},
	// 生命周期-钩子函数 mounted
	mounted(){
		console.log("vue 挂载完毕，发送请求获取数据....");
	}
}).mount("#app");
</script>

到了这里，关于Vue学习笔记（三）常用指令、生命周期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！