Vue.js

Vue.js

Vue.js是什么?

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

安装

下载

传送门

兼容性

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

引入

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

声明式渲染

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

解决插值表达式闪烁问题

使用v-cloak插值

<style>
	[v-cloak]{
		display:none;
	}
</style>
<p v-cloak>{{msg}}</p>

默认v-text没有闪烁问题,

<h4 v-text='msg'></h4>

插值表达式与v-text和v-html

v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的占位符,不会把整个元素内容清空再填充
插值表达式和v-text 不能解析代码型字符串,v-html则可以

data: {
    message: '<h1>Hello Vue!</h1>'
  }

v-bind

绑定变量到属性
会把引号里面的东西当作JavaScript表达式

<div id="app">
  <input type="button" value="按钮" v-bind:title="mytitle + '123'">
  <input type="button" value="按钮" :title="mytitle + '123'">//缩写
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    mytitle:'321'
  }
})

v-on

<div id="app">
  <input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="show"> 
  <input type="button" value="按钮" v-bind:title="mytitle + '123'" @click="show"> //缩写
  <input type="button" value="按钮" v-bind:title="mytitle + '123'" @click="show()">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    mytitle:'321'
  }
  methods: {
  	show(){
  		setInterval( () =>{
  		alert(this.message)
  	},400)
  }
 }
})

事件修饰符

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

<div id="app">
  <input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="show"> 
  <input type="button" value="按钮" v-bind:title="mytitle + '123'" @click.stop="show"> //缩写
  <input type="button" value="按钮" :title="mytitle + '123'">//缩写
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    mytitle:'321'
  }
  methods: {
  	show(){
  		setInterval( () =>{
  		alert(this.message)
  	},400)
  }
 }
})

v-model双向数据绑定

只能使用在表单元素

<div id="app">
  <input type="button" value="按钮" v-model="mytitle">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    mytitle:'321'
  }
})

在Vue中使用样式

1.数组

<h1 :class="['red','thin']">123</h1>

2.数组中使用三元表达式

<h1 :class="['red','thin,isactive?'active':'']">123</h1>

3.数组中嵌套对象

<h1 :class="['red','thin',{'active':isactive}]">123</h1>

4.直接使用对象

<h1 :class="{red:true,thin:true,active:true">123</h1>

在Vue中使用内联样式

1.直接在元素通过:style的形式,书写样式对象

<h1 :style="{color:'red','font-size':'40px'}">123</h1>

2.将样式对象,定义到data中,并直接引用到:style
data上定义样式:

data:{
	h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'}
}

在元素中,通过属性绑定的形式,将样式对象应用到元素中:

<h1 :style="h1StyleObj">123</h1>

3.在:style中通过数组,引用多个data上的样式对象
data上定义样式:

data:{
	h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'}
	h1StyleObj2:{fontStyle:'italic'}
}

在元素中,通过属性绑定的形式,将样式对象应用到元素中:

<h1 :style="[h1StyleObj,h1StyleObj2]">123</h1>

v-for和key属性

1.迭代数组

<ul>
	<li v-for="(item,i) in list">索引:{{i}}--姓名:{{item.name}}--年龄:{{item.age}}</li>
</ul>

2.迭代对象中的属性

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

3.迭代数字

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

2.2.0+的版本里,当在组件中使用v-for时,key现在是必须的
当Vue.js用v-for正在更新已渲染的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的顺序,而是简单复用此处的每个元素,并且确保他在特定索引下显示已被渲染的每个元素。
为了给Vue一个提示,以便它跟踪每个节点的身份,从而重用和重新排列现有元素,你需要为每项提供一个唯一key属性(必须是数字或字符串类型)

<p v-for="item in list" :key="item.id">{{item}}</p>

v-if和v-show

一般来说,v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此,如果需要频繁切换v-show较好,如果在运行时条件不大可能改变v-if较好。

<h3 v-if="flag">123</h3>//删除/创建
<h3 v-if="show">123</h3>//切换样式display:none;

过滤器

对数据进行最后一步渲染处理
Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在两个地方:mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由管道符指示。

全局过滤器

<td>{{ item.Time | dataFormat}}</td>
<td>{{ item.Time | dataFormat('yy-mm-dd')}}</td>
<td>{{ item.Time | dataFormat | dataFormat2}}</td>
		Vue.filter('dataFormat', function(dataStr){//function(dataStr,pattern)可以继续传参
			var dt = new Date(dataStr)
			var y = dt.getFullYear()
			var m = dt.getMonth()+1
			var d = dt.getDate()
			return `${y}-${m}-${d}`
		})
		

私有过滤器

私有过滤器具有应用优先性

		var vm = new Vue({
			el:'#app',
			data:{
				keywords:'',
				id:'',
				name:'',
				cost:'',
				list: [
					{ id : 1 , name: '早餐' ,Time: new Date() ,Cost: 4},
					{ id : 2 , name: '午餐' ,Time: new Date() ,Cost: 20},
					{ id : 3 , name: '下午茶' ,Time: new Date() ,Cost: 30},
					{ id : 4 , name: '晚餐' ,Time: new Date() ,Cost: 60},
					{ id : 5 , name: '宵夜' ,Time: new Date() ,Cost: 30}
				]
			},
			methods:{
				add() {
					this.id = this.list.slice(-1)[0].id+1
					var pay = {id: this.id, name: this.name, Time: new Date() ,Cost: this.cost}
					this.list.push(pay)
					this.cost = this.name = ''
				},
				del(id){
					this.list.some((item, i) => {
						if (item.id == id) {
							this.list.splice(i, 1)
							return true;//在数组的some方法中,如果return true,就会立即终止这个数组的后续循环
						}
					})
				},
				search(keywords) {
					return this.list.filter(item =>{
						if (item.name.includes(keywords)) {//es6的字符串方法,验证是否包含包含
							return item
						}
					})
				}
			}
			filters:{
				dataFormat: function(dataStr){
								var dt = new Date(dataStr)
								var y = dt.getFullYear()
								var m = dt.getMonth()+1
								var d = dt.getDate()
								return `${y}-${m}-${d}`
							}

			}
		});

自定义键盘修饰符

应用场景

回车等于点按钮

<div class="panel-body form-inline">
				<label>Name:<input type="text" class="form-control" v-model="name"></label>
				<label>Cost:<input type="text" class="form-control" v-model="cost" @keyup.f2="add"></label>//自定义
				<label>Cost:<input type="text" class="form-control" v-model="cost" @keyup.enter="add"></label>//非自定义
				<input type="button" value="添加" class="btn btn-primary" @click="add()">
</div>
<script> 
		Vue.filter('dataFormat', function(dataStr){
			var dt = new Date(dataStr)
			var y = dt.getFullYear()
			var m = dt.getMonth()+1
			var d = dt.getDate()
			return `${y}-${m}-${d}`
		})
		Vue.config.keyCodes.f2 = 113 // 自定义全局键盘修饰符
		var vm = new Vue({
			el:'#app',
			data:{
				keywords:'',
				id:'',
				name:'',
				cost:'',
				list: [
					{ id : 1 , name: '早餐' ,Time: new Date() ,Cost: 4},
					{ id : 2 , name: '午餐' ,Time: new Date() ,Cost: 20},
					{ id : 3 , name: '下午茶' ,Time: new Date() ,Cost: 30},
					{ id : 4 , name: '晚餐' ,Time: new Date() ,Cost: 60},
					{ id : 5 , name: '宵夜' ,Time: new Date() ,Cost: 30}
				]
			},
			methods:{
				add() {
					this.id = this.list.slice(-1)[0].id+1
					var pay = {id: this.id, name: this.name, Time: new Date() ,Cost: this.cost}
					this.list.push(pay)
					this.cost = this.name = ''
				},
				del(id){
					this.list.some((item, i) => {
						if (item.id == id) {
							this.list.splice(i, 1)
							return true;//在数组的some方法中,如果return true,就会立即终止这个数组的后续循环
						}
					})
				},
				search(keywords) {
					return this.list.filter(item =>{
						if (item.name.includes(keywords)) {//es6的字符串方法,验证是否包含包含
							return item
						}
					})
				}
			}
			filters:{
				dataFormat: function(dataStr){
								var dt = new Date(dataStr)
								var y = dt.getFullYear()
								var m = dt.getMonth()+1
								var d = dt.getDate()
								return `${y}-${m}-${d}`
							}

			}
		});
	</script>			
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页