Vue第一篇：最基本的概念（背诵专用）

一、背诵目录结构

1、创建一个Vue实例

2、Vue选项名称（8种）

3、vue实例挂载元素

4、vue实例绑定数据

5、vue.js提供的实例属性和方法

6、数据绑定

（1）文本插值

（2）输出HTML内容

（3）绑定HTML属性

（4）绑定HTML属性的简写

7、过滤器

（1）表示形式

（2）定义全局过滤器

（3）定义本地过滤器

8、条件判断指令

（1）单一元素判断

（2）一组元素判断

9、循环指令

（1）遍历数组指令及2种使用形式

（2）对一组元素进行循环

（3）遍历对象的使用形式

（4）遍历整数

10、数组更新方法

11、计算属性定义及形式

12、监听属性与计算属性的差别（2点）

13、监听属性的定义及使用方法

14、class属性绑定

（1）内联绑定

（2）非内联绑定

15、style样式绑定

（1）内联绑定

（2）非内联绑定

16、事件监听指令及简写

17、表单元素的双向绑定指令

18、绑定复选框

（1）单个复选框绑定

（2）多个复选框绑定

19、v-model修饰符

（1）延后同步

（2）用户输入转为数值类型

（3）过滤输入字符串首尾空格

20、注册自定义指令

（1）注册全局自定义指令及示例

（2）注册局部自定义指令

21、自定义指令中常用钩子函数

22、注册组件

（1）注册全局组件及示例

（2）注册局部组件

（3）组件中的data和template选项

23、父组件传递数据给子组件

24、传递动态Prop的方法及示例

25、父组件接收子组件的信息及示例

26、内容分发的定义

27、插槽的使用举例

（1）基础用法

（2）具名插槽

28、常用的vue组件声明周期函数

29、动态组件的方法

30、组件动态切换时保存状态的方法

31、实现路由、数据请求、状态管理的插件名称

32、vue-router的作用

33、vue-router的基础用法

34、嵌套路由的方法

35、vue内置动态导航的方法

36、路由视图中多界面显示的方法

37、Axios的get请求方法，返回成功/失败的出来，以及相应的示例

38、vuex的作用

39、vuex中store的作用以及包含项

40、vuex的工作原理

41、vuex中的...mapState和...mapActions功能

----------------------------------------------------------------------------------------------------------------

二、对应内容

1、创建一个vue实例

var vm=new Vue({})

2、Vue选项名称（8种）

el / data / methods / computed / watch / filters / direcitves / components

3、vue实例挂载元素

使用el选项，比如el: “#app”

4、vue实例绑定数据

使用data选项

5、vue.js提供的实例属性和方法

带有前缀$，比如vm.$data.company

6、数据绑定

（1）文本插值

使用{{}}双大括号标签，比如{{ message }}

（2）输出HTML内容

       使用v-html指令，比如v-html=”message”

（3）绑定HTML属性

       不能直接使用文本插值的方式，需要使用v-bind:属性 指令，比如v-bind:src=”src”

（4）绑定HTML属性的简写形式

       :属性 即可，比如:src=”src”

7、过滤器

（1）表示形式

由管道符号”|”表示，比如{{ message | myFilter }}

（2）定义全局过滤器

       Vue.filter(ID, function(){})

（3）定义本地过滤器

       在Vue创建的构造函数中应用filters选项

8、条件判断指令

（1）单一元素判断

v-if / v-else / v-else-if

比如：<p v-if=”a<b”>

（2）一组元素判断

使用<template>元素作为包装元素

比如：<template v-if=”show”>

9、循环指令

（1）遍历数组指令及2种使用形式

v-for指令

使用形式：v-for=”item in items” / “(item, index) in items”

（2）对一组元素进行循环

使用<template>元素作为包装元素

<template v-for=”item in items”>

（3）遍历对象的使用形式

v-for=”value in object” / v-for=”(value, key) in object”

（4）遍历整数

v-for=”n in 5”

10、数组更新方法

push() / pop() / shift() / unshift() / splice() / sort() / reverse()

比如：vm.items.push()

11、计算属性定义及形式

定义在computed属性中，该属性依赖的数据变化则该属性值会更新，同时依赖该属性的数据绑定也会更新。

比如：

computed: {

       newstr: function(){}

}

12、监听属性与计算属性的差别

• 计算属性的值在computed中定义，而监听的在data中定义
• 计算属性的值是可以缓存的，而监听属性则每次都计算一遍

13、监听属性的定义及使用方法

每当监听的属性发生变化时都会执行特定的操作。

使用方法：可以定义在watch选项中，或者使用实例方法vm.$watch()

14、class属性绑定

（1）内联绑定

将元素的class属性直接绑定为对象的形式

v-bind:class=”{active: isActive}”

（2）非内联绑定

将元素的class属性绑定的对象定义在data选项中

v-bind:class=”classObject”

15、style样式绑定

（1）内联绑定

将元素的style属性直接绑定为对象

v-bind:style=”{fontWeight: weight}”

（2）非内联绑定

将元素的style属性绑定的对象定义在data选项中

v-bind:style=”styleObject”

16、事件监听指令形式及简写

v-on指令

比如：v-on:click=”show” 或者 @click=”show”

17、表单元素的双向绑定指令

v-model指令

18、绑定复选框

（1）单个复选框绑定

使用v-model绑定一个布尔值

比如：

<input type=”checkbox” v-model=”checked”>

然后data选项中checked: false

（2）多个复选框绑定

使用v-model绑定一个数组

 比如：

<input type=”checkbox” value=”A” v-model=”brand”>

<label>A</label>

<input type=”checkbox” value=”B” v-model=”brand”>

<label>B</label>

然后data选项中brand: []

19、v-model的修饰符

（1）延后同步

添加lazy修饰符后转变为使用change事件进行同步

（2）用户输入转为数值类型

使用number修饰符

（3）过滤输入字符串首尾空格

使用trim修饰符

20、注册自定义指令

（1）注册全局自定义指令及示例

使用Vue.directive(id, definition)方法。definition是特定的指令钩子函数。

示例：

Vue.directive(‘focus’, {

       inserted: function(el){

         el.focus();

}

})

（2）注册局部自定义指令

在directives选项中注册一个局部自定义指令。

21、自定义指令中常用钩子函数

bind：只调用一次，在指令第一次绑定到元素上时调用。

inserted：被绑定元素插入父元素时调用

update：当绑定值发生变化时调用

22、注册组件

（1）注册全局组件及示例

使用Vue.component(tagName, options)方法。

示例：

Vue.component(‘my-component’, {

       template: ‘<div> 注册全局组件 </div>’

})

（2）注册局部组件

在components选项中注册一个局部组件。

（3）组件中的data和template选项

一个组件的data选项必须是一个函数，而不是一个对象。

template就是html的页面信息

23、父组件传递数据给子组件

通过Prop功能实现。

子组件需要显示地用props选项来声明Prop，父元素通过该属性把数据传递给子组件。

24、传递动态Prop的方法及示例

通过v-bind的方式将父组件中的data数据传递给子组件。

示例：

<my-component v-bind:boxoffice=”boxoffice_data”>

25、父组件接收子组件的信息及示例

子组件通过调用内建的$emit()方法并传入事件名称来触发自定义事件，父组件通过v-on监听子组件实例的自定义事件。

emit方法的格式：

vm.$emit(eventName, 参数)

父组件通过$event访问到传递的参数

示例：

子组件中：

this.$emit(‘enlarge’, value);

父组件中：

v-on:enlarge=”fontSize += $event”

26、内容分发的定义

Vue.js提供的一种混合父组件内容和子组件模板的方式。

在子组件中通过<slot>元素作为原始内容的插槽。

27、插槽的使用举例

（1）基础用法

父元素：

<my-slot>{{ message }} </my-slot>

子组件：

在template中添加<slot></slot>

渲染时父组件的{{message}}会代替子组件中的<slot>标签。

（2）具名插槽

在组件模板中使用多个插槽，此时需要用到<slot>元素的name属性。在向具名插槽提供内容时，可以在一个<template>元素上使用v-slot指令。v-slot指令的参数需要与子组件中slot元素的name值匹配。

父元素：

<my-slot>

<template v-slot:title>

  {{ title_data }}

</template>

</my-slot>

子组件：

在template中添加<slot name=”title”></slot>

28、常用的vue组件声明周期函数

created：实例已经创建完成之后被调用

mounted：el被新创建的vm.$el替换并被挂载到实例上时被调用

updated：数据更改时被调用

29、动态组件的方法

使用<component>元素，动态绑定到它的is属性，根据is属性的值来判断使用哪个组件。

30、组件动态切换时保存状态的方法

将切换后的状态保留在内存中，以避免重复渲染，使用一个<keep-alive>元素将动态组件包含起来。

31、实现路由、数据请求、状态管理的插件名称

路由管理：vue-router

数据请求：axios

状态管理：vuex

32、vue-router的作用

将每个路径映射到对应的组件，并通过路由进行每个组件之间的切换

33、vue-router的基础用法

（1）页面端

通过router-link进行导航，其中的to属性指定链接

再配置路由出口router-view

（2）脚本端

定义路由组件

定义路由

var routes = [{path: ‘/first’, component: first}]

创建router实例

var router = new VueRouter({routes});

挂载根实例

var app = new Vue({router}).$mount(‘#example’);

34、嵌套路由的方法

再定义路由时，除了path和component信息外，再增加children信息。children中也是path和component的信息。

35、vue内置动态导航的方法

this.$router.push({name: '<url-name>'})

36、路由视图中多界面显示的方法

在router-view中增加name的信息

比如：

<router-view name=”left”></router-view>

<router-view name=”right”></router-view>

37、Axios的get请求方法，返回成功/失败的处理，以及相应示例。

axios.get()

.then(function(response){console.log(response.data);})

.catch(function(error){console.log(error);})

38、vuex的作用：

将某个组件的状态变化影响到其他组件，使它们也进行相应的修改。

39、vuex中store的作用以及包含项

用于存储整个应用需要共享的数据或状态信息

包含信息为：

State: 定义的状态信息

Getters: 相当于计算属性

Mutations: 定义用于更改状态的mutation函数

Actions：定义提交mutations中方法来改变状态的action

40、vuex的工作原理

在Vue组件中通过dispatch方法触发一个action，在action中通过commit方法提交一个mutation，通过mutation对应的函数更改一个新的state值，vuex会将新的state值渲染到组件中。

41、vuex中的...mapState和...mapActions功能

...为对象展开符，这意味着后面跟着的是数组，可以使其展开。

mapState函数返回的是数组对象，它将store中的state进行映射，在template中可以直接使用，不需要通过this.$store.state一个个获取store中的state数据。
比如：
computed:{
    ...mapState(['name', 'age'])  // 与state中的名字相同，在template中可以直接使用name，age
}

否则计算属性中：
name: state => this.$store.state.name
age:  state => this.$store.state.age
所以在与store.js同名情况下，使用mapState简化了编写
 

mapActions工具函数会将store中的dispatch方法映射到组件的methods中。
比如：
...mapActions([
    'logoutAction'
])
如果使用mapActions则写为：
logoutAction(){
    this.$store.dispatch('logoutAction')
}
所以在与store.js同名情况下，使用mapActions简化了编写。