【Vue】什么？2020年了，你连vue都没学，还不快来入门！

【Vue】什么？2020年了，你连vue都没学，还不快来入门！

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

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

基本指令篇

1.v-text

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

<div v-text="content"></div>

<div>{{text}}</div>

2.v-html

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

<div v-html="content"></div>

<div>{{content}}</div>

3.v-on

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

<div v-on:click="do"></div>

<div @click="do"></div>(推荐)

<div @click="do(t1)"></div>(传递参数)
<script>
	new Vue({
    	el: '#app',
  	},
  	methods:{
  		do(ti){
			alert(ti)
		}
  	}
	});
</script>

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

4.v-show

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

<div v-show="1>3"></div>  false，元素隐藏

5.v-if

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

<div v-if="1>3"></div>  false，删除元素

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

6.v-bind

设置元素属性
两种用法:

<img v-bind:src="imgSrc">

<img :src="imgSrc">
<script>
	new Vue({
    	el: '#app',
  	data:{
     	imgSrc:'img/logo.png'
  	}
	});
</script>

7.v-for

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

<ul>
 	<li (item,index) in arr :key='index'>		  
 		{{index}}{{item}}
 	</li>
</ul>
//使用 v-for 的时候提供 key 属性，以获得性能提升。
说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，
并且会移除 key 不存在的元素。
//item为元素内容，index为元素下标,这两个名字均可改变，
但是必须和{{}}里的名字对应上，不然没有内容
<script>
	new Vue({
    	el: '#app',
  	data:{
     	arr:['你好','我好','大家好']
  	}
	});
</script>

8.v-model

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

<input type="text" v-model="message">
	<script>
	export default{
				data(){
					return{
					message:'',
						}
					}
				}
	</script>
	//data中的message就是输入框中输入的元素

9.v-cloak

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

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

<div v-cloak>
	{{message}}
</div>

10.v-once

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

用法:

<span v-once>
	{{alertDanger}}
</span>
<script>
	new Vue({
    	el: '#app',
  	data:{
     	alertDanger:'警告'
  	}
	});
</script>

11.v-pre

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

用法:

<span v-pre>
	{{alertDanger}}
</span>
<script>
	new Vue({
    	el: '#app',
  	data:{
     	alertDanger:'警告'
  	}
	});
</script>

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