vue基础指令和基础属性

vue的指令

1. v-text 或 {{}} 输出字符串（ {{}} 还可以做算术题）
   语法格式：

<div id="app">
<div v-text="text"></div>
			<div>{{html}}</div>
			</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
			var app = new Vue({// 声明vue实例
				el: '#app',//选择作用域
				data: {// 数据(变量)
					text:"这是一个变量!",
					},
					}）

效果图

2. v-html 不仅可以输出字符串，还可以输出标签。
   语法格式：

<div id="app">
<div v-html="html"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
			var app = new Vue({// 声明vue实例
				el: '#app',//选择作用域
				data: {// 数据(变量)
					html:'<b>bbbb</b>',
				},
			})
		</script>

效果图

3. v-model 双向数据绑定,必须,只能是表单里面的标签，一般是input

		<div id="app">
		<input type="" name="" id="" value="" v-model="model" />
		<div v-text="model">
		</div>
		</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
			var app = new Vue({// 声明vue实例
				el: '#app',//选择作用域
				data: {// 数据(变量)
					model:0,
				},
			})
		</script>

效果图

4. v-if 判断 删除dom

<div id="app">
<div v-if="bool">4. v-if 判断</div>
</div>

v-if="" 引号里面，也可以写判断，只要最后得出来的值是布尔值就可以了

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
			var app = new Vue({// 声明vue实例
				el: '#app',//选择作用域
				data: {// 数据(变量)
					bool:true,
				},
			})
		</script>

效果图

5. v-show 可以控制css来显示隐藏dom元素

<div id="app">
<div v-show="bool">v-show</div>
</div>

v-show="" 和v-if一样 引号里面可以写判断，只要最后的值是布尔值就可以了

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
			var app = new Vue({// 声明vue实例
				el: '#app',//选择作用域
				data: {// 数据(变量)
					bool:true,
				},
			})
		</script>

效果图

6. v-else 必须和v-if同级且相邻
   v-else是需要和v-if搭配使用的

<div id="app">
<div v-if="bool">if</div>
<div v-else>else</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
			var app = new Vue({// 声明vue实例
				el: '#app',//选择作用域
				data: {// 数据(变量)
					bool:true,
				},
			})
		</script>

效果图
当bool=true时

当bool=false时

7. v-for 循环

<div id="app">
<div v-for="item in arr">{{item}}</div>
</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
				var app = new Vue({// 声明vue实例
					el: '#app',//选择作用域
					data: {// 数据(变量)
						arr:[12,22,34],
					},
				})
			</script>

效果图

8. v-on 或 @ 绑定事件
   v-on可以缩写成为@
   所以v-on有两种绑定方式

<!-- 第一种-->
<div id="app">
<button type="button" v-on:click="on">on</button>
</div>

<!-- 第二种-->
<div id="app">
<button type="button" @click="on()">on</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
			var app = new Vue({// 声明vue实例
				el: '#app',//选择作用域
				methods:{
					on(){
						alert('sac');
					},
				}
			})
			</script>

效果图

9. v-bind 或 : 绑定属性
   v-bind可以缩写成为：
   所以v-bind有两种语法格式

<style type="text/css">
		.b{
			color: aqua;
		}
	</style>

<-- 第一种-->
<div id="app">
<div v-bind:class="cla">安师大</div>
</div>
<-- 第二种-->
<div id="app">
<div :class="cla">安师大</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
			var app = new Vue({// 声明vue实例
				el: '#app',//选择作用域
				data: {// 数据(变量)
					cla:'b',
				},
			})
			</script>

效果图

课外小扩展
在上面我们只使用了3个属性
第一个 el – 选择元素,作用域
第二个 data – 数据,变量
第三个 methods – 事件