vue学习（基础下）
Posted 嵌入式-老费
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue学习（基础下）相关的知识，希望对你有一定的参考价值。
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】
vue框架所涉及到的很多方法，其实在其他框架也都有涉及，但是没有一个框架像vue这样被大规模认可和使用。这里面可能有几点原因，第一，学习的门槛必须要足够的低，太复杂的东西一般不太容易推广；第二，必须要有立竿见影的效果，这样马上可以给人以反馈，提醒我们是否可以继续学下去；第三，要有活跃的社区，有了社区才能不断添加新的功能，并且fix之前存在的bug；第四，大公司的支持，靠志愿者的热情，开源的框架一般都是走不远的，有大公司出钱出力，这样才能不断推着框架不停向前走，给开发者以奖励，毕竟谁也不是生活在空气中的，总要过日子的。
当让，闲话说了这么多，今天继续学习vue的其他特性。
6、输入框的双向绑定
<!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">
<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.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">
<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.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> </my-component-li>
</div>
<script>
Vue.component("my-component-li",
template:'<li>Hello vue</li>'
)
var app = new Vue(
el:"#app",
data:
message:"Hello Vue!",
selected:''
)
</script>
</body>
</html>
组件从功能上看，可以认为是模板。比如上面这段代码，定义了一个my-component-li的组件，对应的内容是<li>Hello vue</li>。有了这个定义的模板之后，输入<my-component-li> </my-component-li>，浏览器就可以把my-component-li对应的template内容渲染上去了。
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:'<li>item</li>'
)
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:"<div><slot name=\\'todo-title-name\\'></slot><ul> <slot name=\\'todo-content-name\\'></slot> </ul> </div>"
)
Vue.component("todo-title",
props:['title'],
template:"<div> title </div>"
)
Vue.component("todo-content",
props:['content'],
template:"<li> content </li>"
)
var app = new Vue(
el:"#app",
data:
title_data:'标题',
content_data:'插槽'
)
</script>
</body>
</html>
如果要掌握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做绑定，这样才能实现整个数据的显示。
12、自定义事件
<!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">
<todo>
<todo-title slot="todo-title-name" v-bind:title="title_data"></todo-title>
<todo-content slot="todo-content-name" v-for="(city, index) in cities" v-bind:content="city" v-bind:offset="index" v-on:remove="remove_content_data(index)"></todo-content>
</todo>
</div>
<script>
Vue.component("todo",
template:"<div><slot name=\\'todo-title-name\\'></slot><ul> <slot name=\\'todo-content-name\\'></slot> </ul> </div>"
)
Vue.component("todo-title",
props:['title'],
template: "<div> title </div>"
)
Vue.component("todo-content",
props:['content', 'offset'],
//template:"<li> content <button v-on:click='handle_button' >删除</button></li>",
template:"<li> offset -- content <button @click='handle_button' >删除</button></li>",
methods:
// 发送事件
handle_button:function(event)
this.$emit("remove")
)
var app = new Vue(
el:"#app",
data:
title_data:'插槽',
cities:['beijing', 'shanghai', 'nanjing']
,
methods:
// 真正处理事件的地方
remove_content_data: function(index)
this.cities.splice(index, 1)
)
</script>
</body>
</html>
对于组件中的函数，如果想要操作全局数据，那么有必要通过自定义事周转一下来解决。比如上面这段代码，在todo-content中除了正常的offset、content打印之外，还有一个删除按钮。这样如果需要实现删除这个功能，那么有必要先定义一个remove事件。这样按钮按下的时候，框架会先调用handle_button这个函数，函数中emit一个remove事件，通过v-on实现了remove事件和回调函数remove_content_data的绑定，这样就会进一步调用remove_content_data函数。最终通过splice这个子函数实现了数据的删除。
上面7个范例基本上是按照从易到难逐步升级的，建议一定要在掌握前面范例的基础上，再开始学习后面的内容，不然很容易越来越没有信心的。此外，一定要相信自己，一定可以学会vue的。
以上是关于vue学习（基础下）的主要内容，如果未能解决你的问题，请参考以下文章