vue-cli

脚手加安装

 1.安装 npm npm install -g 

 2.安装cnpm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

 3.安装vue-cli（构建vue环境） cnpm install -g vue-cli

 4.安装打包工具webpack初始化项目 vue init webpack 项目名称 

 5.进项目 cd 项目名

 6.安装package.json安装插件c cnpm install 

 7.运行 npm run dev1. packpag.json中 在终端运行（npm run dev/build/lint）scripts 开发脚本dev 开发模式build 上线模式( 压缩合并 )lint 检测有没有语法错误dependencies 开发依赖环境为什么要压缩合并上线？提高用户体验

1.更改端口号 prot config => index.js => dev => prot

2.src 指源码 （一般在src中开发）

3. src中的东西 App.vue 根组件 components 子组件 router 路由器 main . js vue会把vue用到的文件合并生成一个main . js （主入口文件）

4.index.html 主模板 默认入口文件 main . js代码放在主模板 视图容器放在根组件模板中

5. import 引用文件的 （npm安装的文件） 首先要有 文件导出 export default {} import 名字 from 地址 @符只能引到src中的文件

6. main.js 文件 导入文件 vue router App（根组件） 实例vue new Vue({ el : "#app", // 根组件 index.html 里使用的 router， //路由 components :{ App}, template : "" // 默认使用模板（根组件模板） }) 

7. 那个组件里用组件就那个里引组件

8. router配置 （router => index.js） 

       import Vue from "vue" //导入

      vue import Router from "vue-router" //导入 

     vue-router import Hello from "@ / components/Hello" //导入组件

     Vue . use (Router) //安装

    vue-router export default new Router({ //导出Router实例 routes : [ //配置     路由 { path:" / " , components : Hello //导入文件时的名字 } ] })

9. 使用sass//在这个组件中使用sass布局

                            vue概述

一、MVC（Model-View-Controller）

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

二、MVVM（Model-View-ViewModel）

View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。(ViewModel可以理解为实例)

三、虚拟DOM

1、用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中。

2、当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

3、把2所记录的差异构建到真正的DOM树上

四、计算属性 computed

计算属性是基于数据的依赖关系进行缓存的。计算属性只会在某些数据依赖项发生更改时才会重新评估。

(我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。)

五、watch

当你有一些数据需要随着另外一些数据变化时 可以使用watch ,过度滥用 watch 属性会造成一些性能问题

computed methods watch的区别：

1）computed与watch

尽量用computed计算属性来监视数据的变化，因为它本身就这个特性，用watch没有computed“自动”，手动设置使代码变复杂。

2)computed与methods

computed是计算属性，methods是方法。计算属性只会在某些数据依赖项发生更改时才会重新评估。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

六、父子组件传参

父传子：

通过在子组件里面声明一个props属性 在使用子组件的时候 使用 v-bind:(props 定义的属性名)

子传父：

1、在子组件中通过 $emit('事件名','要传递的数据')向上传递一个 事件

2、在调用子组件的时候，用v-on:'事件名'='父组件的事件处理函数'

3、父组件的事件处理函数的参数中获得子组件传递过来的值

路由传参：

第一步：在路由字典中配置 规则（/info/:id）id就是想传递的参数

第二步：在router-link 中 ：to={path:/info/+item.id}

第三步：在info这个组件中 通过 $router.params.id 获得传递过来的参数

vue生命周期 的八个钩子函数

1、beforeCreate/created

在页面创建的时候调用，且仅执行一次。此时页面的DOM元素还未生成，若在created中执行document.getElementsByClassName(‘name’)将得不到任何数据。

2、beforeMount/mounted

针对组件，在组件【初次】被渲染的时候调用。若某一个组件v-if=false则表示该组件未被渲染过，当组件v-if=true初次被渲染的时候，调用该函数。注意，当v-if再次为false时mounted不会再被调用。

3、beforeUpdate/updated

当组件中有数据发生改变的时候即调用

4、beforeDestroy/destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁 

this.$destroy() 函数销毁组件

                     vue指令

$on 绑定事件（js里）

@    绑定事件 （模板里)

v-bind:title="message"  鼠标悬停几秒钟查看此处动态绑定的提示信息！

v-bind 指令意思是将元素节点title特性和vue实例的message属性保持一致

v-if 返回true元素添加

返回false元素删除

v-show 返回true元素显示

返回false元素隐藏

v-for  循环遍历数据，元素

v-for = "(item , index) in arr"

item 数据

index 下标

注意：不能循环视图模型 根元素

必须有唯一根元素

v-model  双向数据绑定（一般用于表单元素）

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

v-html 输出html代码

v-on:click或者@click

el  规定作用域范围

data  数据

computed 能够缓存数据（计算属性）

methods 每次都得重新执行一遍方法（定义方法）

filters  自定义过滤器