【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基本指令，还希望能够帮助大家