Vue学习

Vue

• v-text：设置标签的内容（textContent）

       <div id="app">
			<h2 v-text="message"></h2>
			//默认写法会替换全部内容。
			
			<h1>北京{{message}}</h1>
			差值表达式{{}}可以替换指定内容。
		</div>


        <script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"你好!"
				}
			})
		</script>

• v-html：设置元素的innerHTML

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


       <script>
			var app = new Vue({
				el:"#app",
				data:{
				content:"<a href='http://www.baidu.com'>百度</a>"
				}
			})
		</script>

• v-on为元素绑定事件

        <div id="app">
            <input type="button" value="v-on指令" v-on:click="doIt()" />   //事件名不需要写On
			<input type="button" value="v-on简写" @click="doIt()" />       //指令可以简写为@
			<h2 @click="changeFood()">{{ food }}</h2>
		</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

     	<script>
			var app = new Vue({
				el: "#app",
				data:{
					food:"西红柿炒蛋"
				},
				methods: {                        //绑定的方法定义在methods属性中
					doIt: function() {
						alert("做It");
					},
					changeFood:function(){
						this.food+="好好吃!"           //方法内部通过 this 关键字可以访问定义在 data 中数据
					}
				},
			})
		</script>

• v-show 根据真假切换元素的显示状态

1. 原理是修改元素的display，实现显示隐藏
2. 指令后面的内容，最终会被解释为布尔值
3. 值为true元素显示 值为false元素隐藏
4. 数据改变之后，对应元素的显示状态会同步更新

        <div id="app">
			<input type="button" value="切换事件 " @click="changIsShow()" />
			<img v-show="isShow" src="./img/1.png" />
		</div>

        <script src="https://cdn.jsdelivr.net/npm/vuse"></script>

        
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:true,
				},
				methods:{
					changIsShow:function(){
						this.isShow = !this.isShow;
					},
			})
		</script> 

• v-if 根据表达式的真假切换元素的显示状态

1. 本质是通过操纵dom元素来切换显示状态
2. 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
3. 频繁的切换用v-show（操纵样式）反之使用v-if (操纵dom树)前者的切换消耗小

    	<div id="app">
			<input type="button" value="切换属性" @click="toggleIsShow()" />
			<p v-if="isShow">我是一个P标签</p>
			<h2 v-if="aaa>35">热</h2>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
					aaa:30
				},
				methods:{
					toggleIsShow:function(){
						this.isShow = !this.isShow;
					}
				}
			})
		</script>

• v-bild 为元素绑定属性

1. 完整的写法是 v-bild：属性名
2. 简写的话可以直接省略v-bild 只保留 :属性名

       <style>
			.active{
				border: 1px solid red;
			}
		</style>


		<div id="app">
			<img v-bind:src="imgSrc" />
			<img :src="imgSrc" :title="imgTitle+'!!'":class="{active:isActive}" @click="isActive()"/>
		                                        	// 对象方法{active:isActive}  active是否生效取决于isActive的值
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					imgSrc:"图片链接",
					imgTitle:"你好",
					isActive:false
				},
				methods:{
					toggleisActive:function(){
						this.isActive = !this.isActive
					}
				}
			})
		</script>

• v-for 根据数据生产列表结构

1. 数组经常和v-for结合使用
2. 语法是 （item，index）in 数据 // （个别数据 ，索引） in 数据
3. item 和 index 可以结合其他指令一起使用
4. 数组长度的更新会同步到页面上 是响应式的

• v-on 事件绑定的方法可以写成函数形式，可以传入自定义参数

1. 定义方法时需要定义形参来接收传入的实参
2. 事件的后面跟上**.修饰符**可以对事件进行限制
3. .enter可以限制触发的按键为回车
4. 事件修饰符有多种

• v-model 便捷的设置和获取表单元素的值

1. 绑定的数据会和表单元素值相关联
2. 绑定的数据**<— —>**表单元素的值（相互的）