与Vue的第一次邂逅

400 阅读6分钟

[toc] #VUE 基础篇

基础标签

v-cloak

实例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="lib/vue-2.4.0.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					msg:123,
					
				}
			});
		</script>
	</body>
</html>

其中**{{msg}}在网络情况不佳的时候会显示默认值,然后再显示真实的数据,为了解决这个问题,可以使用v-cloak**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="lib/vue-2.4.0.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-cloak>{{msg}}</p>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					msg:12344234,
					
				}
			});
		</script>
	</body>
</html>

在css中要添加:

[v-cloak] {
    display: none;
}

其中不起作用的话,考察2个点:

  1. v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级:
[v-cloak] {
    display: none !important;
}
  1. 样式放在了@import引入的css文件中,可以放在link引入的css文件里或者内联样式中

v-text

作用和v-cloak相似,但是自带解决闪烁问题

区别:

  1. v-cloak需要自己解决闪烁问题,v-text不用
  2. v-cloak只会替代{{key}}的内容,而v-text会覆盖元素中所有的内容
<template>
  <div id="app">
		<p v-cloak>{{msg}}+++++++++</p>
		<p v-text="msg">+++++++++</p>
	</div>
</template>

<script>
export default{
	
	data(){
		return {
			msg:213,
		};
	}
}
</script>

结果页面:

运行结果

V-html

这个有点类似于安卓的,且也会覆盖里面原有的属性

TextView.setText(Html.fromHtml(msg));

实例代码:

<template>
  <div id="app">	
		<p v-cloak>{{htmlMsg}}</p>
		<p v-text="htmlMsg"></p>
		<p v-html="htmlMsg"></p>
	</div>
</template>

<script>
export default{
	data(){
		return {
			msg:213,
			htmlMsg:"<h1>凌宇好帅哇~!(★ ω ★)</h1>"
		};
	}
}
</script>

运行结果:

image.png

V-bind

绑定属性,可以被简写为:

		<input type="button" value="按钮" :title="htmlMsg"/>
		<input type="button" value="按钮" v-bind:title="htmlMsg"/>

值得注意的是: v-bind里面可以写js表达式

v-on

事件绑定机制

<template>
  <div id="app">
		
		<p v-cloak>{{htmlMsg}}</p>
		<p v-text="htmlMsg"></p>
		<p v-html="htmlMsg"></p>
		<input type="button" value="按钮" :title="htmlMsg"/>
		<input type="button" value="按钮" v-bind:title="htmlMsg" v-on:click="showAlert(htmlMsg)"/>
		
	</div>
</template>

<script>
export default{
	
	data(){
		return {
			msg:213,
			htmlMsg:"<h1>凌宇好帅哇~!(★ ω ★)</h1>"
		};
	},
	methods:{
		showAlert:function(msg){
			alert(msg)
		}
	}
	 
}
</script>

V-model

数据双向绑定的标签

总结练习:跑马灯

<template>
	<div>

		<p v-text="msg"></p>


		<input type="button" value="开始" v-on:click="startRun()" />
		<input type="button" value="结束" v-on:click="stopRun()" />

	</div>

</template>
<script>
	export default {
		data() {
			return {
				msg: "凌宇好帅哇~!(★ ω ★)",
				myInterval: null,
			};
		},
		methods: {
			startRun: function () {
				if (this.myInterval != null) return;
				this.myInterval = setInterval(() => {
					var startStr = this.msg.substring(0, 1);
					var endStr = this.msg.substring(1);
					var result = endStr + startStr;
					this.msg = result;
				}, 300);
			},
			stopRun: function () {
				clearInterval(this.myInterval);
				this.myInterval=null;
			},
		}
	}
</script>

事件修饰符

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件监听器时使用事件捕获模式
  • .self 只当事件在该元素(比如不是子元素)触发时触发回调
  • .once 事件只触发一次

class类样式绑定的几种方法

常规方法

 <h1 class="red big">{{msg}}</h1>

v-bind 方法

  <h1 v-bind:class="['red','big']">{{msg}}</h1>

使用三元表达式

<h1 v-bind:class="['red',isBig?'big':'']">{{msg}}</h1>

在数组中使用三元表达式,提高代码可读性

 <h1 v-bind:class="['red',{'big':isBig}]">{{msg}}</h1>

直接使用类

<h1 v-bind:class="{red:true,big:isBig}">{{msg}}</h1>

完整代码为:

<template>
  <div>
    <!--// 常规方法-->
    <h1 class="red big">{{msg}}</h1>

    <!--v-bind 方法-->
    <h1 v-bind:class="['red','big']">{{msg}}</h1>

    <!--使用三元表达式-->
    <h1 v-bind:class="['red',isBig?'big':'']">{{msg}}</h1>

    <!--在数组中使用三元表达式,提高代码可读性-->
    <h1 v-bind:class="['red',{'big':isBig}]">{{msg}}</h1>

    <!--直接使用类-->
    <h1 v-bind:class="{red:true,big:isBig}">{{msg}}</h1>
  </div>

</template>

<script>
    export default {
       data(){
         return {
           msg:'凌宇是个大帅逼 (★ ω ★)',
           isBig:true
         };
       }
    }
</script>

<style scoped>
  .red{
    color: red;
  }
  .big{
    font-size: 24px;
  }
</style>

style属性绑定的几种方法

常规操作

 <!--常规操作-->
    <p :style="{color:'red'}">{{msg}}</p>

指向一个类

 <!--指向一个类-->
    <p :style="redObject">{{msg}}</p>

指向一个数组

 <!--指向一个数组-->
    <p :style="[redObject,bigObject]">{{msg}}</p>

完整代码为:

<template>


  <div>
    <!--常规操作-->
    <p :style="{color:'red'}">{{msg}}</p>
    <!--指向一个类-->
    <p :style="redObject">{{msg}}</p>
    <!--指向一个数组-->
    <p :style="[redObject,bigObject]">{{msg}}</p>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '凌宇是个大帅逼 (★ ω ★)',
        redObject:{color:'red'},
        bigObject:{fontSize:'40px'}
      };
    }
  }
</script>

<style scoped>

</style>

v-for的几种使用方法

注意:在新版本中,v-for都需要一个key, 1. key只能是string或者number属性 2. key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值

只要item的遍历

<p v-for="item in  list">{{item}}</p>

要item和索引的遍历

 <p v-for="(item  , i ) in list">
    {{i+"===="+item}}
    </p>

####遍历对象

<p v-for="(key,val,i) in Handsome">
      {{i}} =={{val}} = {{key}}
    </p>

数字迭代

<p v-for="i in 10">{{i}}</p>

完整代码为

<template>


  <div>
    <!--只要item的遍历-->
    <!--<p v-for="item in  list">{{item}}</p>-->

    <!--要item和索引的遍历-->
    <!--<p v-for="(item  , i ) in list">-->
    <!--{{i+"===="+item}}-->
    <!--</p>-->
    <!--遍历对象-->
    <!--<p v-for="(key,val,i) in Handsome">-->
      <!--{{i}} =={{val}} = {{key}}-->
    <!--</p>-->
    <!--数字迭代-->
    <!--<p v-for="i in 10">{{i}}</p>-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [1, 32, 433, 234, 32, 543, 43655, 234, 4325],
        Handsome: {
          name: 'Ly',
          age: "18",
          sex: "guy"
        }
      };
    }
  }
</script>

<style scoped>

</style>

v-if 和 v-show

相同

  1. 都可以起到根据某一个flag显示隐藏控件的作用

不同点

  1. v-if 每次都会重新删除或者创建元素
  2. v-show 不会进行dom的删除创建,只是切换了disable:none样式

总结

  1. v-if 有较高的切换性能消耗
  2. v-show 有较高的初始渲染消耗
  3. 如果涉及频繁切换,最好不要用v-if,而是推荐使用v-show;如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if。(因为如果一个元素可能永远不会显示出来,使用v-show,那么它实际上会被添加到dom中,而v-if是只有显示的时候才会加入)