Vue2.5去哪儿学习笔记【一】

一、Vue简介

Vue官方文档:https://cn.vuejs.org/

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

二、Vue下载

在官方文档下载开发版本 vue.js

https://cn.vuejs.org/v2/guide/installation.html

三、Vue入门使用——HelloWorld案例

①在div标签里显示一个Hello World的字符串，应该怎么做？

JS做法：获取div标签，对其innerHTML属性设置文本内

Vue做法：引入Vue库，创建Vue实例管理目标区域的所有内容

其中的el元素限制了实例管理的区域范围，data元素定义一组数据，实例可以通过插值表达式去调用data里的数据

②在div标签里显示一个Hello World的字符串，隔2秒钟去更改里面的内容，应该怎么做？

JS做法：

Vue做法：

从以上例子可以看出，vue不需要去关注dom上的操作，而是把精力集中到数据的管理上

四、使用指令实现简易的TodoList

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

1.v-for

v-for是vue的指令之一。

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for:告诉vue执行的循环语句，用来迭代、遍历数据

2.v-on

v-on是vue的指令之一,用于组件的事件绑定。

3.v-model

v-model是vue的指令之一.

v-model：实现数据的双向绑定。

当给某个组件添加指令v-model双向绑定某个数据后，组件绑定的数据发生变化时，vue实例里data的数据也会发生变化，页面也会发生变化。

同理，vue实例里data的数据发生变化，组件绑定的数据也会发生变化，页面也会发生变化。

4.简易TodoList案例

案例介绍：在文本框输入内容后按提交，即可把内容添加到下面的列表中。

该案例可以通过以上3个vue指令来实现。

给input添加指令v-model双向绑定一个名为inputValue的数据后，当input框里的内容发生变化的时候，vue实例里data的inputValue也会发生变化，页面也会发生变化。

v-on:click="handleBtnClick" 给组件绑定点击事件

v-for = "item in list" 可以理解为遍历list中的每一项保存到item去

五、前端组件化

一个页面有好多部分组成。如果没有组件化，业务逻辑会很多，维护起来很困难。一个页面由原来的一个整体划分成一个个部分，每个部分称之为一个组件。把页面拆分成一个个组件之后，会使得代码后续的维护性大大提高。

六、使用组件化思想修改TodoList

使用组件化思想修改TodoList:可以将列表项整体变成一个组件

在这个案例中，需要学习新的指令,一个用于注册一个组件的私有资源和创建组件的方法

1.v-bind

v-bind是vue的指令之一.

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定

2.Vue.component(实现全局注册)

Vue.component('component-name', { /* ... */ })

通过这个方法可以注册一个组件，该组件名就是Vue.component 的第一个参数.

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中.

例如：创建一个名为hello的组件，并用在Vue 根实例 (new Vue) 的模板中

3.props和template

pros和template在创建或注册组件时经常用到。

props 代表了当前组件预期从父组件处获得的外部数据。可以和v-bind搭配使用。props 选项有一个简单的基于数组的写法，也有一个可选的基于对象的写法。

template意为模板,用来写 html 模板

4.使用组件化思想修改TodoList

修改之前的TodoList案例

①全局组件的使用:使用Vue.component方法全局注册组件

②局部组件的使用：在vue实例使用components:{tagName:option}（tagname是自定义的组件名称,option是组件构造器）。需要将局部组件注册到实例里

5.总结

不管是全局组件还是局部组件，组件的使用有三个步骤：

1、创建组件构造器

2、注册组件

3、使用组件

全局组件使用Vue.component方法；局部组件使用components:{tagName:option}

组件中使用camelCased（驼峰式）命名，在html中应改为kebab-case（短横线）命名方式。

七、简单的组件间传值

父组件向子组件传值:使用子组件的时候，通过v-bind的绑定的变量的值，把对应的值传给子组件

子组件向父组件传值:子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg )

修改TodoList案例:点击列表项时可以将其删除
<div id="app">
     <input type="text" v-model="inputValue">
     <button v-on:click="handleBtnClick">提交</button>
     <ul>
         <todo-item :content="item" :index="index" v-for="(item,index) in list" @delete="handleItemDelete"></todo-item>
     </ul>
</div>

<script>
      var TodoItem = {
          props: ['content', 'index'],
          template: "<li @click='handleItemClick'>{{content}}</li>",
          methods: {
             handleItemClick: function() {
             this.$emit("delete", this.index);
             }
          }
      }
      var app = new Vue({
          el: '#app',
          components: {
              TodoItem: TodoItem
          },
          data: {
              list: [],
              inputValue: ''
          },
          methods: {
              handleBtnClick: function() {
                 this.list.push(this.inputValue)
                 this.inputValue = ''
             },
         handleItemDelete: function(index) {
              this.list.splice(index, 1)
             }
         }
     })
 </script>
父组件可以使用 props 把数据传给子组件。

子组件可以使用 $emit 触发父组件的自定义事件。

v-bind:数据变量名简写为 :数据变量名

v-on:事件名简写为 @事件名

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。因此推荐使用 kebab-case 的事件名。