Vue.js学习笔记（第一弹）

最新推荐文章于 2022-10-23 18:44:27 发布

彼岸~流觞

最新推荐文章于 2022-10-23 18:44:27 发布

阅读量413

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_41325924/article/details/105606896

版权

Vue是响应式的，数据变更时，可以实时变更页面数据

JS/JQ：命令式编程

VUE：声明式编程

1.Vue的初体验

<div id='app'>
	<h1>{{message}}</h1>
	<h2 style="color:pink">{{lyf}}</h2>
</div>
<script>
	//let(变量)/const(常量)
	//编程范式：声明式编程
	const app = new Vue({
		el:'#app',//用于挂载要管理的元素
		data:{//定义数据
			message:'WALYF',
			lyf:'Love'
		}
	})
</script>

2.Vue的列表(循环) v-for

<div id="app">
	<ul>
		<li v-for="item in dvd">{{item}}</li>
	</ul>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			dvd:['穿越时空的爱恋','乌龙院','神雕仙侣','仙剑奇侠传']
		}
	})
</script>

3.Vue计算器 v-on:click(@click)

@click 语法糖

this.对象，可以在methods方法中调用data定义的对象

<div id="app">
	<h5>计算器：{{conter}}</h5>
	<!-- <button v-on:click="conter++">+</button>
	<button @click="conter--">-</button> -->
	<button @click="add()">+</button>
	<button @click="sub()">-</button>
	<!-- @click语法糖 -->
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			conter: 0,
		},
		methods:{
			add:function(){
				this.conter++;
			},
			sub:function(){
				if(this.conter!=0)
				{
					this.conter--;
				}
			}
		}
	})
</script>

4.vue的mvvm

ViewMidel（DataBinding：将Model实时变化反应到View中数据绑定

DomListener：Dom监听(click/touch/滚动)）

关于这部分的详细解释转载于简书的关于Vue的MVVM

什么是MVVM？

概念介绍
- MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
  1、 M：模型层，主要负责业务数据相关；
  2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
  3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
- MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦

关系图

5.Vue的option选项

（1）el：类型：string|HTMLElment

作用：决定Vue实例会管理哪一个DOM

（2）data：类型：Object|Funtion

作用：Vue实例对应的数据对象

（3）metheds：类型：{[key:string]:Function}

作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

（4）生命周期：钩子 created：网络请求

6.插值操作-mustache（双大括号）{{}}

<div id="app">
	<h4>{{message}}</h4>
	<h4>{{message}}，李云龙</h4>
	<h2>{{FirstName}}  {{LastName}}</h2>
	<h2>{{FirstName +' '+ LastName}}</h2>
	<h5>{{conter*5}}</h5>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'Hello!',
			FirstName:'LYF',
			LastName:'Hg',
			conter:100
		},
	})
</script>

7.插值操作-其他指令使用（v-once v-html v-text v-pre v-cloak）

（1） v-once（只改变一次值，之后值动态改变，定义了v-once指令的不变）

<div id="app">
	<h4>{{message}}</h4>
	<h4 v-once>{{message}}</h4>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'Hello'
		}
	})
</script>

（2）v-html（将文本内容转换为html）

<div id="app">
	<h4>{{url}}</h4>
	<h4 v-html="url"></h4>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			url:'<a href="http://www.baidu.com" target="_blank">度娘一下</a>'
		}
	})
</script>

（3）v-text

<div id="app">
	<h4>{{message}}</h4>
	<h4 v-text="message"></h4>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'Hello2'
		}
	})
</script>

（4）v-pre（原封不动的显示内容）

<div id="app">
	<h4 v-pre>{{message}}</h4>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'Hello3'
		}
	})
</script>

（5）v-cloak（在Vue解析之前，div中有一个属性 v-cloak，在Vue解析之前，div中没有一个属性 v-cloak）

Vue自动会在加载完代码后，去掉v-cloak，所以，我们可以利用这个属性在页面加载完成前先隐藏代码

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

<body>
<div id="app" v-cloak>
	<h4 >{{message}}</h4>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'Hello3'
		}
	})
</script>
</body>

8.v-bind的基本使用

v-bind:src：语法糖（:src）

<div id="app">
	<!--错误的做法：这里不可以使用mustache语法-->
	<!--<img src="{{image}}" alt=""/>-->
	<!--正确的做法：使用v-bind指令-->
	<img v-bind:src="image" alt="lyf"/>
	<a :href='href'  traget="_blank">BAIDU</a>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'Hello3',
			image:'https://gju2.alicdn.com/tps/i3/O1CN01Q0Nk6Y1MMOzTjrzPN_!!0-juitemmedia.jpg_400x400Q90.jpg',
			href:'http://baidu.com'
		}
	})
</script>

9.v-bind动态绑定class(对象语法)

（1）直接在div上动态绑定（用对象true或false动态控制clss是否显示）

<div id="app">
	<h2 class="title" v-bind:class="{active:iactive,line:iline}">哈哈</h2>
	<button @click="click()">Change</button>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			iactive:true,
			iline:true
		},
		methods:{
			click:function(){
				this.iactive = !this.iactive;
			}
		}
	})
</script>

（2）在方法中上动态绑定

<div id="app">
	<h2 class="title" v-bind:class="{active:iactive,line:iline}">哈哈</h2>
	<h2 class="title" v-bind:class="GetChange()">哈哈2</h2>
	<button @click="click()">Change</button>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			iactive:true,
			iline:true
		},
		methods:{
			click:function(){
				this.iactive = !this.iactive;
			},
			GetChange:function(){
				return {active:this.iactive,line:this.iline}
			}
		}
	})
</script>

10.v-bind动态绑定class(数组语法)

在数据中定义class名称读取到页面 :class="[active,line]" data:{active:'aa',line:''bb}

:class="['active','line']" 加了单引号的则是直接定义class名称是active和line

也可以直接在方法中直接定义数组语法

<div id="app">
	<h5 class='title' :class="['active','line']">嘿嘿</h5>
	<h5 class='title' :class="[active,line]">嘿嘿</h5>
	<h5 class='title' :class="GetActive()">嘿嘿</h5>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			active:'lyf',
			line:'hg'
		},
		methods:{
			GetActive:function(){
				return [this.active,this.line];
			}
		}
	})
</script>

11.v-for和v-bind相结合（练习）

点击列表中的哪一项，那么该项的文字变成红色

<div id="app">
	<ul>
		<li @click="Click(index)"  :class="iactive==index?'active':''" v-for="(item,index) in fun">{{index}}--{{item}}</li>
	</ul>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			fun:['红豆','大红豆','芋头','搓搓搓','你要加什么料'],
			iactive:0,
		},
		methods:{
			Click:function(index){
				this.iactive = index;
			}
		}
	})
</script>

12.v-bind动态绑定style(对象语法)

（1）直接在div上动态绑定

:style="{key(属性名):value(属性值)" 可以进行字符串拼接

<div id="app">
	<!--<h2 :style="{key(属性名):value(属性值)">{{message}}</h2>-->
	<!--'50px'必须加上单引号，否则是当成一个变量去解析-->
	<h2 :style="{fontSize:'50px'}">{{message}}</h2>
	<!--font当成一个变量使用-->
	<!--<h2 :style="{fontSize:font}">{{message}}</h2>-->
	<h2 :style="{fontSize:font +'px',background:bg}">{{message}}</h2>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'How are you',
			font:'100',
			bg:'#c00'
		}
	})
</script>

（2）在方法中上动态绑定

<div id="app">
	<!--<h2 :style="{key(属性名):value(属性值)">{{message}}</h2>-->
	<!--'50px'必须加上单引号，否则是当成一个变量去解析-->
	<h2 :style="{fontSize:'50px'}">{{message}}</h2>
	<!--font当成一个变量使用-->
	<!--<h2 :style="{fontSize:font}">{{message}}</h2>-->
	<h2 :style="{fontSize:font +'px',background:bg}">{{message}}</h2>
	<h2 :style="Get()">{{message}}</h2>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'How are you',
			font:'100',
			bg:'#c00',
			Bg:'#e00'
		},
		methods:{
			Get:function(){
			  	return {fontSize:this.font+"px",background:this.Bg};
			}
		}
	})

13.v-bind动态绑定style(数组语法)

<div id="app">
	<h4 :style="[back1,back2]">嘻嘻</h4>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			back1:{background:'#eee',color:'pink'},
			back2:{fontSize:'200px'},
		}
	})
</script>

14.计算属性的基本使用（computed和methods）

<div id="app">
	{{lastname}} {{firstname}} </br>
	{{firstname +' '+ lastname}}
	<h2>{{Add()}}</h2>
	<h1>{{add}}</h1>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			lastname:'lyf',
			firstname:'hg',
		},
		computed:{//计算属性
			add:function(){
				return this.firstname + ' ' + this.lastname; 
			}
		},
		methods:{
			Add:function(){
				return this.firstname +' '+ this.lastname;
			}
		}
	})
</script>

15.计算属性的复杂操作

<div id="app">总价格：{{totalPrice}}</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			books:[
				{id:100,name:'A',price:100},
				{id:101,name:'B',price:101},
				{id:102,name:'C',price:102},
				{id:103,name:'D',price:103},
			]
		},
		computed:{
			totalPrice:function(){
				let result = 0;
				for(let i=0;i<this.books.length;i++)
				{
					result += this.books[i].price
				}
				return result
			}
		}
	})
</script>

2020.4.19,好久没有这种连续学习的畅快感啦，今天就到这里啦，明天继续努力！ヾ(◍°∇°◍)ﾉﾞ