vue脚手架的安装与使用2

微信小程序生命周期

参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#生命周期回调函数
细节：onShow回调函数和onReady的区别？
参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#生命周期

前端面试题

数组去重方法1-2种
trim方法
addClass方法
removeClass方法
克隆方法
extend方法

vue起步

注意：VUE项目是一个单页应用开发！

当前最火的MVVM框架

了解一下：mvc，mvp

MVC:Model View Controller

模型(model)－视图(view)－控制器(controller)
一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

MVP:Model-View-Presenter

MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。

MVVM框架

数据相应原理

数据(model)改变驱动视图（view）更新

组件化

扩展HTML元素，封装可重用代码

单页应用和组件化编程思路

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

组件设计原则（重点）

页面上每个独立的可视/可交互区域视为一个组件；
每个组件对应一个工程目录，组件需要的各种资源（js,css,images）在这个目录下就近维护；
页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面；

VUE项目组成的重点内容：

vue, vue-router, vuex
vue
相关参考地址：https://cn.vuejs.org/v2/guide/

Vuex: 项目的数据状态

Vuex相关api：https://vuex.vuejs.org/zh-cn/
vuex:https://vuex.vuejs.org/zh/guide/

vue路由

Vue路由api:https://router.vuejs.org/zh/
vue路由，Demo：https://github.com/chrisvfritz/vue-2.0-simple-routing-example

起步

环境搭建和配置
安装nodejs：http://nodejs.cn/
淘宝NPM镜像：https://npm.taobao.org/
安装淘宝镜像：$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 vue-cli(Vue的脚手架) ：
cnpm install --global vue-cli 或者 npm install --global vue-cli
Tip：脚手架的意思是帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库(vue,vue-ruter)

项目执行命令
项目执行命令

全局安装 vue-cli

$ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖

$ cd my-project
$ npm run dev

Runtime Only 和 Runtime+Compiler的区别
Runtime Only
我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript，因为是在编译阶段做的，所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量。
在将 .vue 文件编译成 JavaScript的编译过程中会将组件中的template模板编译为render函数，所以我们得到的是render函数的版本。所以运行的时候是不带编译的，编译是在离线的时候做的。

Runtime+Compiler
我们如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字符串，则需要在客户端编译模板，如下所示：
// 需要编译器的版本 new Vue({ template: ‘

{{ hi }}

’ }) // 这种情况不需要 new Vue({ render (h) { return h(‘div’, this.hi) } })
因为在 Vue.js 2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本。

总结：

1、一般我们写代码都是写在中；
2、这个编译过程对性能会有一定损耗；
所以通常我们更推荐使用 Runtime-Only的Vue.js；

项目命令
npm run dev：启动项目
npm run build：编译项目

dependencies 和 devDependencies是什么？有什么区别？
dependencies：运行程序是所依赖的模块，生产环境；
devDependencies：程序运行环境所需要的模块（less预处理插件，babel，es转换插件），开发环境；

修改别名的配置
webpack.base.conf.js文件
配置项目别名
alias: {
‘@’: resolve(‘src’),
‘cmp’: resolve(‘src/components’)
}

config/index.js配置文件
修改vue项目服务器端口号

我的第一个组件编写
创建一个vue实例，创建一个组件
hello world vue!
代码如下：

{{ msg }}

注意：包含3个主要的文件：template ，脚本，样式

vue-data
data：是vue组件实例中的一个属性；
代码如下：
data() {
return {
msg: “我的第一个组件1111111”
};
}
注意：data可以存放任意类型的数据

指令：v-for
这个是循环指令；
语法：

• {{ item.message }}

参考地址：https://cn.vuejs.org/v2/guide/list.html

vue组件的生命周期
注意：整个项目，有且只创建一个vue实例！
注意：在自动化构建工具开发项目过程中，每个组件实例，并不是使用new Vue创建的，他们只是一个字面量对象！

虚拟dom结构

参考：https://www.jianshu.com/p/616999666920

create和mounted的区别

参考：https://blog.csdn.net/xdnloveme/article/details/78035065
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

必须弄懂 ：created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

模板语法

参考地址：https://cn.vuejs.org/v2/guide/syntax.html
双大括号语法：{{}}
特性 + v-bind指令
例如：
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

v-bind指令缩写形式：

特性
通用特性总结：id, class, name,
特性：通用特性，src ，href，checked，value…
例如：

事件处理

参考案例：https://cn.vuejs.org/v2/guide/events.html
指令：v-on：事件类型=“事件处理函数”
或者使用缩写形式： @事件类型=“事件处理函数”
事件名：click，dbclick,mouseenter。。。。
案例：
1234567” @click=“changeMsg” >

总结：
语法：@事件类型=“事件处理函数名”
语法：@事件类型=“事件处理函数(参数1，成熟2)”

计算属性
参考地址：https://cn.vuejs.org/v2/guide/computed.html

模板内的表达式

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

{{ message.split('').reverse().join('') }}

总结：在实际编码中，不要在{{}}内写如复杂的表达式，尽量避免去写表达式，推荐使用计算属性！

计算属性的语法

computed:{
计算属性名称(){
return "";
	}
}

案例：

computed: {
  reverseMsg() {
    return this.message
      .split("")
      .reverse()
      .join("");
  }
},

实践：当data中的数据发生变化的时候，会触发计算属性监听回调函数，因此对应的计算属性数据也会发生变化。

计算属性setter的用法

代码如下：
reverseMsg: {
  get() {
    console.log("获取计算属性的数值");
    console.log("数值发生了变化");
    return this.message
      .split("")
      .reverse()
      .join("");
  },
  set(newValue) {
    console.log("设置计算属性");
    console.log(`计算属性的newValue:${newValue}`);
    this.message = newValue;
  }
}

侦听器

参考地址：https://cn.vuejs.org/v2/guide/computed.html#侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

案例代码如下：

watch: {
  message(newMsg, oldMsg) {
    console.log(newMsg);
    console.log(oldMsg);
    let changMsg = "";
    //异步从服务器上拉取数据，特点，有延迟
    setTimeout(() => {
      console.log("服务请求成功....");
      changMsg = "服务器返回的数据";
      this.reverseMsg =
        this.message
          .split("")
          .reverse()
          .join("") + changMsg;
    }, 2000);
  }
}

监听器和计算属性总结
同步执行的时候，改变数据状态，我们推荐使用计算属性；
异步操作数据的时候，推荐使用监听器属性；
如果没有开销比较大的情况，一般我们推荐使用计算属性，不是监听属性；
监听器属性开销要比计算属性要大；

vue组件化开发

创建组件三步骤：
编写template；
编写script；
编写style；

vue组件分为2大类型
一种是页面级别的组件（注意：本质还是组件）
一种是嵌套中的组件（子父组件的关系）

页面级别的组件的特点
通过路由来改变组件的状态；
在路由中配置组件；

嵌套组件

child.vue–>myFirstDemo组件中子组件

新建一个组件：

 

 

父组件关键代码：
导入：

import slider from "comps/slider";

注册：

components: {
  slider
}

使用

组件的复用
父组件中代码如下：

通过 Prop 向子组件传递数据

参考地址：https://cn.vuejs.org/v2/guide/components-props.html