【Vue】什么?2020年了,你连vue都没学,还不快来入门!

【Vue】什么?2020年了,你连vue都没学,还不快来入门!

前言,本篇为vue的特别基础指令篇,适用于还没入门或者刚刚入门的同学。
vue大佬可以到我空间看看别的,哈哈

vue-cli,vue–router(组件篇)请看:
重点组件配置及用法(基础篇)

基本指令篇

1.v-text

往元素内部添加文本内容,相当于JS中的innerText
两种用法:

"content">
{{text}}
2.v-html

定义往元素内部添加dom元素或者文本内容,相当于JS中的innerHtml
两种用法:

"content">
{{content}}
3.v-on

为元素绑定事件
三种用法:

v-on:click="do">
"do">
(推荐)
(传递参数)

除了点击事件,还可以用鼠标移入移出,回车等事件,同样用法

4.v-show

根据表达式结果布尔值来显示或者隐藏元素
用法:

"1>3">
false,元素隐藏
5.v-if

根据表达式结果布尔值来删除或者添加 元素

"1>3">
false,删除元素

注意:频繁添加或者删除元素会降低性能,适用于删除警告框等一次性操作,其他频繁操作v-show更适用

6.v-bind

设置元素属性
两种用法:

v-bind:src="imgSrc">


7.v-for

根据数据生成列表结构
用法:

  • {{index}}{{item}}
//使用 v-for 的时候提供 key 属性,以获得性能提升。 说明:使用 key,VUE会基于 key 的变化重新排列元素顺序, 并且会移除 key 不存在的元素。 //item为元素内容,index为元素下标,这两个名字均可改变, 但是必须和
{{}}里的名字对应上,不然没有内容
8.v-model

获取和设置表单元素的值(双向数据绑定)
用法:


	
	//data中的message就是输入框中输入的元素
9.v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

防止刷新页面,网速慢的情况下出现{{ message }}等数据格式
用法:

{{message}}
10.v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

用法:


	{{alertDanger}}


11.v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

用法:


	{{alertDanger}}


//以上就是我这次分享的vue基本指令,还希望能够帮助大家

你可能感兴趣的:(web前端)