vue学习（基础下） - 码农知识堂

vue学习（基础下）
【声明：版权所有，欢迎转载，请勿用于商业用途。联系信箱：feixiaoxing @163.com】

vue框架所涉及到的很多方法，其实在其他框架也都有涉及，但是没有一个框架像vue这样被大规模认可和使用。这里面可能有几点原因，第一，学习的门槛必须要足够的低，太复杂的东西一般不太容易推广；第二，必须要有立竿见影的效果，这样马上可以给人以反馈，提醒我们是否可以继续学下去；第三，要有活跃的社区，有了社区才能不断添加新的功能，并且fix之前存在的bug；第四，大公司的支持，靠志愿者的热情，开源的框架一般都是走不远的，有大公司出钱出力，这样才能不断推着框架不停向前走，给开发者以奖励，毕竟谁也不是生活在空气中的，总要过日子的。

当让，闲话说了这么多，今天继续学习vue的其他特性。

6、输入框的双向绑定
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
		<title> 表单输入绑定</title>
	</head>
	
	<body>
		<div id="app">
			<input type="text" v-model="message" value="hello">
			<p> {{message}}</p>
			</input>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"Hello Vue!",
				}
			})
		</script>
	</body>
 
</html>
```
用输入框来理解双向绑定再适合不过了。如上面代码所示，网页中有一个输入框，绑定的数据是message，这样不管输入什么数据，v-model中的message都会传递给data中的message。除此之外，data中的mesage和{{message}}也做了绑定，这样才实现了真正的双向绑定。即输入框不管输入什么数据，都会在{{messaege}}实时修改回来。

7、选择框的双向绑定
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
		<title> 选择框</title>
	</head>
	
	<body>
		<div id="app">
			<select v-model="selected">
				<option disabled value="">请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<span> Selected:{{selected}}</span>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"Hello Vue!",
					selected:''
				}
			})
		</script>
	</body>
 
</html>
 
```
如果觉得输入框的双向绑定解释的还不是很清楚，可以通过选择框这个示例进一步了解一下。如上面代码所示，有一个选择框，内容分别是A、B、C，通过v-model和selected做了绑定。这样，用户在选择了不同的数值之后，selected数值就会发生修改。除此之外，data中的selected还和span中的{{selected}}做了绑定，这样，用户一旦做了不同选择，span中打印的数据就会立刻发生改变。所以，这也是一种双向绑定。

8、组件基础
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
		<title> 组件</title>
	</head>
	
	<body>
		<div id="app">
			<my-component-li> </my-component-li>
		</div>
		
		<script>
			Vue.component("my-component-li", {
				template:'
Hello vue
'
```
})
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!",
selected:''
}
})
</script>
</body>
</html>

组件从功能上看，可以认为是模板。比如上面这段代码，定义了一个my-component-li的组件，对应的内容是

Hello vue

9、带参数的组件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
		<title> 带参数组件</title>
	</head>
	
	<body>
		<div id="app">
			<my-component-li v-for="it in cities" v-bind:item="it"> </my-component-li>
		</div>
		
		<script>
			Vue.component("my-component-li", {
				props:["item"],
				template:'
{{item}}
'

})

var app = new Vue({

el:"#app",

data:{

					cities:['beijing','shanghai','nanjing'],

selected:''

}

})

		</script>

	</body>

</html>

和8中的组件不一样，这里的代码添加了一个item参数。同样，代码中定义了一个名为my-component-li的组件，参数是item，props中也做了说明。正因为有了props做铺垫，在my-component-li中可以通过v-bind把item和v-for中的it绑定在一起，实现循环输出了。

10、计算属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
		<title> 计算属性</title>
	</head>
	
	<body>
		<div id="app">
			<p> {{getCurrentTime()}}</p>
			<p> {{getCurrentTime1}}</p>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"Hello Vue!",
				},
				
				// 方法
				methods:{
					getCurrentTime:function(){
						return Date.now()
					}
				},
				
				// 计算属性
				computed:{
					getCurrentTime1:function(){
						return Date.now()
					}
				}
			})
		</script>
	</body>
 
</html>

计算属性听上去很复杂，其实并不复杂，完全可以把计算属性当成一个函数指针来看待。从上面这段网页中，有两个函数，一个是getCurrentTime，一个是getCurrentTime1。前者是放在methods里面，调用的时候，必须要添加括号，即getCurrentTime()。后者在computed里面，调用的时候，直接用getCurrentTime1即可，不需要后面添加括号。

11、slot插槽


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
		<title> slot插槽</title>
	</head>
	
	<body>
		<div id="app">
			<todo> 
				<todo-title slot="todo-title-name" v-bind:title="title_data"></todo-title>
				<todo-content slot="todo-content-name" v-bind:content="content_data"></todo-content>
			</todo>
		</div>
 
		<script>		
			Vue.component("todo", {
				template:"  
 
"
			})
		
			Vue.component("todo-title", {
				props:['title'],
				template:" {{title}} 
"
			})
			
			Vue.component("todo-content", {
				props:['content'],
				template:"
 {{content}} 
"

如果要掌握slot原理，最好要理解一下8和9中组件的内容。本质上，slot就是组件里面嵌套组件，这样就必须用到slot这个关键字。以上面这段代码为例，整个script中定义了三个组件，分别是todo、todo-title、todo-content。其中todo里面嵌套了两个组件，暂时命名为todo-title-name和todo-content-name。这样在实际使用的时候，就可以把todo-title和todo-title-name做绑定、todo-content和todo-content-name做绑定。不仅仅如此，还需要把todo-title中的title和data中的title_data、todo-content中的content和data中的content_data做绑定，这样才能实现整个数据的显示。

对于组件中的函数，如果想要操作全局数据，那么有必要通过自定义事周转一下来解决。比如上面这段代码，在todo-content中除了正常的offset、content打印之外，还有一个删除按钮。这样如果需要实现删除这个功能，那么有必要先定义一个remove事件。这样按钮按下的时候，框架会先调用handle_button这个函数，函数中emit一个remove事件，通过v-on实现了remove事件和回调函数remove_content_data的绑定，这样就会进一步调用remove_content_data函数。最终通过splice这个子函数实现了数据的删除。

上面7个范例基本上是按照从易到难逐步升级的，建议一定要在掌握前面范例的基础上，再开始学习后面的内容，不然很容易越来越没有信心的。此外，一定要相信自己，一定可以学会vue的。