vue必要的知识储备

Vue 核心技术

MVVM 模型

MVVM是 Model-View-ViewModel 的缩写，它是一种软件架构风格

Model：模型， 数据对象（data选项当中 的）

View：视图，模板页面（用于渲染数据）

ViewModel：视图模型，其实本质上就是 Vue 实例

通过数据驱动视图

把需要改变视图的数据初始化到 Vue中，然后再通过修改 Vue 中的数据，从而实现对视图的更新。

声明式编程：

按照 Vue 的特定语法进行声明开发，就可以实现对应功能，不需要我们直接操作Dom元素

{{xxxx}} 双大括号文本绑定（插值表达式）

v-xxxx 以v-开头用于标签属性绑定，称为指令

v-once：一次性插值，当数据改变时，插值处的内容不会更新

v-html：输出HTML指令

v-bind:元素绑定指令

完整格式： v-bind:元素的属性名='xxxx'

缩写格式： :元素的属性名='xxxx'

将数据动态绑定到指定的元素上

v-on:事件绑定指令

完整格式： v-on:事件名称="事件处理函数名"

@事件名称="事件处理函数名"

用于监听 DOM 事件

计算属性和监听器

computed选项定义计算属性

计算属性 类似于methods选项中定义的函数

计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。

函数 每次都会执行函数体进行计算。

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

watch

当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算

通过watch选项 或者 vm 实例的$watch()来监听指定的属性

条件渲染 v-if

v-if是否渲染当前元素

v-else

v-else-if

v-show 与v-if类似，只是元素始终会被渲染并保留在 DOM 中,只是简单切换元素的 CSS 属性 display 来显示或隐藏

v-if 与 v-show 比较

v-if)如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素 v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换

v-if有更高的切换开销

v-show有更高的初始渲染开销。

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行后条件很少改变，则使用 v-if 较好。

v-for

v-for 迭代数组  v-for="(alias, index) in array"

v-for 迭代对象的属性  v-for="(value, key, index) in Object"

事件处理 v-on

v-on:事件名="函数名"或v-on:事件名="函数名(参数...)"

用于监听DOM事件

事件修饰符

.stop阻止单击事件继续传播event.stopPropagation()

.prevent阻止事件默认行为event.preventDefault(）

.once点击事件将只会触发一次

表单数据双向绑定v-model

单向绑定：数据变，视图变；视图变，数据不变

双向绑定：数据变，视图变；视图变，数据变

过渡&动画效果

1.xxx-enter:定义显示前的效果。

2.xxx-enter-active:定义显示过程的效果。

3.xxx-enter-to:定义显示后的效果。

4.xxx-leave:定义隐藏前的效果。

5.xxx-leave-active定义隐藏过程的效果。

6.xxx-leave-to定义隐藏后的效果。

v- text等价于{{}}⽤于显示内容，但区别在于:{{}}会造成闪烁问题， v-text 不会闪烁

过滤器

过滤器对将要显示的文本，先进行特定格式化处理，然后再进行显示

全局过滤器
Vue.filter(过滤器名称,function(value1[value2], ]){


})

在Vue实例中使用 filter 选项 ， 当前实例范围内可用 
new Vue({
filters：{
过滤器名称：function(value1[value2, ]){

}
}
})

过滤器可以用在两个地方：双花括号 {{}} 和 v-bind 表达式

自定义插件

1. 插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等

2. Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能

3. 通过全局方法 Vue.use() 使用插件

Vue 组件化开发

组件（component） 是 Vue.js 最强大的功能之一

全局注册

一般把网页中特殊的公共部分注册为全局组件

Vue.component("组件名",{
template:'定义组件模板',
data:function(){
//data选项在组件中必须是一个函数
return {}
}
//其他选项：methods
})

局部注册（子组件）

一般把一些非通用部分注册为局部组件，一般只适用于当前项目的。

Vue 父子组件间通信

1. props 父组件向子组件传递数据

声明组件对象中定义 props

方式1：指定传递属性名，注意是 数组形式

方式2：指定传递属性名和数据类型，注意是 对象形式

指定属性名、数据类型、必要性、默认值

props 只用于父组件向子组件传递数据

所有标签属性都会成为组件对象的属性, 模板页面可以直接引用

如果需要向非子后代传递数据，必须多层逐层传递

兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

slot插槽

主要用于父组件向子组件传递 标签+数据

传递的插槽标签中的数据处理都需要定义所在父组件中

Vue.js 可通过 PubSubJS 库来实现非父子组件之间的通信 ，使用 PubSubJS 的消息发布与订阅模式，来进行数据的传递。 理解：订阅信息 ==== 绑定事件监听 ，发布消息 ==== 触发事件。

Vue 实例生命周期

生命周期钩子函数

生命周期分为三个阶段：初始化显示，更新显示。销毁vue实例

初始化的钩子函数：

beforeCreate（）实例创建前

created（）实例创建后

beforeMount（）数据挂载前

mounted（）数据挂载后

更新阶段的钩子函数

beforeUpdate（）模板更新前

updated（）模板更新后

销毁阶段的钩子函数：

beforeDestroy（）实例销毁前

destroyed（）实例销毁后

vue中常用的AJAX库

vue-resource

axios

Vue-Router 路由

通过根据不同的请求路径，切换显示不同组件进行渲染页面

HTML 路由切换

            <!-- 方式1: 传统方式 -->
            <li><a href="#/foo">Go Foo</a></li>
            <li><a href="#/bar">Go Bar</a></li>
            <!-- 方式2: 官方推荐 -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签， -->
            <!-- 通过传入 `to` 属性指定跳转链接，不用像上面加 `#` 号 -->
            <li>
                <router-link to="/foo">Go to Foo</router-link>
            </li>
            <li>
                <router-link to="/bar">Go to Bar</router-link>
            </li>
       <!-- 路由出口： 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>

缓存路由组件

<keep-alive> 可缓存渲染的路由组件实例

1. 默认情况下，当路由组件被切换后组件实例会销毁，当切换回来时实例会重新创建。

2. 如果可以缓存路由组件实例，切换后不用重新加载数据，可以提高用户体验。

Vue-CLI 3.x 脚手架

Vue-CLI 是 Vue 官方提供的, 用来搭建项目脚手架的工具，它是 Vue.js 开发的标准工具，它已经集成了

webpack , 内置好了很多常用配置, 使得我们在使用 Vue 开发项目时更加的标准化。

CLI 服务 ( @vue/cli-service ) 是一个开发环境依赖。针对绝大部分应用优化过的内部的 webpack 配置；

node_modules:存放下载依赖的文件夹
public:存放不会变动的静态文件
index.html:主页面文件
favicon.ico:在浏览器显示的图标
src:源码文件夹
assets:存放组件的静态资源
components:存放一些共用组件
views:存放所有的路由组件
App vue:应用根主组件
main.js:应用入口
gitignore:git版本管制忽略的配置
babel.config.js:es6语法编译配置
package-lock.json:各个包的来源和版本号
package.json:项目基本信息