vue 简单入门-CSDN博客

本文链接：https://blog.csdn.net/weixin_39798049/article/details/83302659

一、引入vue

要使用框架就一定要引入。这里采用CDN方式引入，一共存在两种版本。

（1）是开发环境版本，这个版本比较大，有231kb，不过它提供了命令行警告。

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

(2) 是生产环境版本，该版本只有30.90KB

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

这里引入了开发环境版本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</html>

二、创建vue实例并使用模板语法

（1）首先来创建vue实例

<script>
	var app = new Vue({
		el:"#main",
		data:{
			msg:"hhhhh",
		}
	})
</script>

其中 el 是vue实例的挂载元素，即vue实例将数据，事件等绑定在el元素或它的子孙下，它的值可以是CSS选择符或者HTML元素。data指的就是mvvm模式中的Model，你可以把data里的数据通过指令或模板语法绑定到html中。

（2）在html中使用模板语法绑定数据

<div id="main">
	{{ msg }}
</div>

''{{ }} ''是绑定数据的模板语法，此处的msg对应vue实例data里的msg，所以运行时便会显示 " hhhhh "。

三、循环指令

数据量少时还能一个一个地用模板语法绑定，但是遇到大量数据时如果还是手写可以说是非常痛苦的了。所以，这就需要用上循环指令了。

首先假设这里有一个对象数组arr。

new Vue({
	el:"#main",
	data:{
		arr:[
			{name:"豆浆",price:10},
			{name:"鸡蛋",price:100},
			{name:"油条",price:50},
			{name:"热狗",price:60},
		]
	}
})

然后，用上循环指令 v-for=""

<div id="main">
	<ul>
		<li v-for="item in arr">
			{{ item.name +"-" + item.price +"$"}}
		</li>
	</ul>
</div>

item即指arr遍历的每一个成员。结果如图

循环指令结果图

四、条件指令

如果你想加个判断，那就该用上条件指令 v-if

先添加一个seen变量作为判断条件

new Vue({
	el:"#main",
	data:{
		arr:[
			{name:"豆浆",price:10},
			{name:"鸡蛋",price:100},
			{name:"油条",price:50},
			{name:"热狗",price:60},
		],
		seen:true,
	}
})

用上v-if 指令

<ul v-if="seen">
	<li v-for="item in arr">
		{{ item.name +"-" + item.price +"$"}}
	</li>
</ul>

五、添加事件

现在已经可以显示数据了。但你还是只能干看着啥也做不了，这个时候就该用上事件的绑定，让页面具有交互性。

methods:{
	handleClick(index){
		this.arr.splice(index,1);
	}
}

在vue实例中加入methods对象，然后定义handleClick方法。

<li v-for="(item,index) in arr">
	{{ item.name +"-" + item.price +"$"}}
	<button @click="handleClick(index)">delete</button>
</li>

添加v-on:click指令，也可以用指令简写符号 @click=" "。

完成后，你就可以通过点击按钮来删除指定项目。注意，这里是从arr中删除了那一项，然后响应式地改变视图。

六、样式绑定

这时候假如你想为class添加一个样式，就需要用上 v-bind 指令。

<ul v-if="seen">
	<li 
		v-for="(item,index) in arr" 
		v-bind:class="{ active:isActive }"
		@click="handleClick2()"
	>
		{{ item.name +"-" + item.price +"$"}}
		<button @click="handleClick(index)">delete</button>
	</li>
</ul>

想要绑定什么，就 v-bind:属性名例如这里的 v-bind:class 。如果想绑定style属性，那就是 v-bind:style 以此类推。再绑定一个处理点击项目的事件。

isActive:false

data中加入变量isActive。并设置为false。

methods:{
	    handleClick(index){
                this.arr.splice(index,1);
	    },
	    handleClick2(){
	        this.isActive = true;
	}
}

添加上handleClick2方法。

<style>
	.active{
		color: red;
	}
</style>

设置active类。

此时点击一下任意一个项目，就会使得全部项目字体变成红色。

七、双向绑定

从文章开头到现在，全都是单向数据绑定。data中的数据变化会使得视图发生改变。那么能不能视图的数据变化使得data中的数据发生改变呢？vue正好具有双向绑定的指令 v-model 。

<input type="text" v-model="name">
<h5>{{ name }}</h5>

添加这两行代码，一个是双向绑定到 name 变量的input元素，一个是用于显示 name 值的标题。

name:""

在data中添加该变量。

你在input中输入的值会绑定到inputValue ，而inputValue的值一发生变化，就会重新渲染视图。所以，你输入的值会同步出现在视图中。

再修改一下代码。

name:<input type="text" v-model="name">
price:<input type="text" v-model="price">
<button @click="addItem">add</button>

删除<h5>，再添加1个input，和一个按钮。

price:""

data中加入price

addItem(){
	this.arr.push({
		name:this.name,
		price:this.price,
	})
}

methods中加入方法addItem。

现在就可以填入name和price,然后点击添加按钮，来加入项目。

好吧，就这些内容而已。这都只是vue的冰山一角，详细内容还是得看官网。（流下了没技术的眼泪。。）