前端文章汇总

https://www.jianshu.com/p/82fa0c99e019

友情链接

前置文章： ES6入门基础版
后置文章：ElementUI整合

官方文档

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

用到的命令

1、生成的默认的package.json
npm init -y
2、初始化一个 vue 项目
npm install vue
3、全局安装 webpack
npm install webpack -g
4、全局安装脚手架
npm install -g @vue/cli-init
5、脚手架使用 webpack 初始化一个 vue-demo项目
vue init webpack vue-demo
6、默认启动命令
npm run dev

注：node.js新手出现问题看这里(解决部分)

https://www.jianshu.com/p/1f19c97f8033

1、何为MVVM

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

M:即 Model,模型，包括数据和一些基本操作
V:即view，视图，页面渲染结果
VM:即 View-Model，模型与视图间的双向操作（无需开发人员干涉)

（1）在MVVM之前（eg:MVC），开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到view中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
（2）而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的
（3）原理图一张：

image.png

2、第一个hello

(1)输入上面第一条和第二题命令，然后创建一个index.html测试
(2)代码编写

image.png

(3)页面效果

image.png

(4)测试效果

image.png

3、指令

单向绑定和双向绑定

单向绑定：改了vue管控的值，html也会被改动；而改了html，vue的属性值不会改变
双向绑定：模型变化，视图跟着变化，反之亦然；
(1)双向绑定案例代码:

image.png

(2)页面效果：

image.png

(3)添加一个点击按钮控制：

image.png

小结：
1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，该过程是响应式的
2、指令(v-on:click,v-model......)来简化对dom的一些操作。

1、v-text、 v-html
(1)代码：

image.png

(2)效果：

image.png

(3)设置网络延迟(3G)：测试出插值闪烁

image.png

(4)刷新查看延迟状态：变成源码样式，然后再显示最终效果，而下面的直接不显示，等到有值再显示

image.png

2、v-bind：给html标签属性绑定(eg：href、name、src.....)，简写(v-bind:class 为 :class)
(1)代码：

image.png

(2)测试：class 取消为false

image.png

(3)测试：修改样式

image.png

3、v-model：双向绑定指定

image.png

4、v-on：绑定事件，简写(v-on:click为 @click)
(1)基本写法：点赞案例

image.png

(2)事件修饰符：

'.stop` :阻止事件冒泡到父元素
`.prevent' :阻止默认事件发生
`.capture` :使用事件捕获模式
`.self` :只有元素自身触发事件才执行。（冒泡或捕获的都不执行)
'.once` :只执行一次

阻止事件冒泡到父元素

阻止默认事件发生

image.png

(3)按键修饰符：

`.enter' ：回车键
`.tab` ：制表符
`.delete`
`.esc`
`.space` ：退格键
`.up`
`.down`
`.left`
`.right`

image.png

(4)组合按钮：

image.png

5、v-for：做遍历循环
(1)遍历数组集合，格式：v-for=" item in users"

image.png

(2)数组索引下标，格式：v-for=" (item,index) in users"

image.png

(3)遍历对象信息(key为属性名，value为属性值)，格式：v-for=" (v,k,i) in user"

image.png

(4)遍历的时候加上 :key（v-bind:key）区分不同的元素，提高vue 渲染效率

1、如果是对象用 id (唯一)
2、如果是常规数据(字符串，数值) 用索引值

image.png

6、v-if 和 v-show：判断和显示

v-if：满足条件显示，不满足则改元素不存在
v-show：满足条件显示，不满足隐藏（用标签隐藏，实际依旧存在）

点击消失前

点击消失后

7、v-else 和 v-else-if

跟传统计算机语言一样，满足 if 不执行 else-if 以此类推

image.png

8、v-if和v-for混用

image.png

4、计算属性和侦听器

1、计算属性（computed）：某些结果是基于之前数据实时计算出来的，可以利用计算属性的侦听器

image.png

2、侦听器（）：监听数据变化，而做出一些处理，类似Mysql中的触发器（两个参数 newVal 变化后的新值，oldVal 变化前的老值）

image.png

3、过滤器：常用于文本格式化操作，可用于：双括号插值表达式和 v-bind 表达式

局部过滤器：只能在对应管控的Vue实例可以使用
全局过滤器：可以在任意使用

image.png

image.png

image.png

5、组件化（抽取，封装，复用），component

简介：可以理解为类，每个实例出来的都是独立的

1、在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。
例如可能会有相同的头部导航。
2、但是如果每个页面都独自开发，这无疑增加了我们开发的成本。
所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
3、在vue里，所有的vue实例都是组件。
注意：data不再是一个对象，而是一个函数

image.png

image.png

image.png

image.png

6、生命周期钩子函数

生命周期：

1、每个Vue实例在被创建时都要经过一系列的初始化过程︰创建实例，装载模板，渲染模板等等。
Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当vue实例处于不同的生命周期时，
对应的函数就会被触发调用。
2、生命周期:你不需要立马弄明白所有的东西。

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <span id="num">{{num}}</span>
    <button @click="num++">赞！</button>
    <h2>{{name}}，有{{num}}个人点赞</h2>
  </div>

  <script src="../node_modules/vue/dist/vue.js"></script>

  <script>
    let app = new Vue({
      el: "#app",
      data: {
        name: "张三",
        num: 100
      },
      methods: {
        show() {
          return this.name;
        },
        add() {
          this.num++;
        }
      },
      beforeCreate() {
        console.log("=========beforeCreate=============");
        console.log("数据模型未加载：" + this.name, this.num);
        console.log("方法未加载：" + this.show());
        console.log("html模板未加载：" + document.getElementById("num"));
      },
      created: function () {
        console.log("=========created=============");
        console.log("数据模型已加载：" + this.name, this.num);
        console.log("方法已加载：" + this.show());
        console.log("html模板已加载：" + document.getElementById("num"));
        console.log("html模板未渲染：" + document.getElementById("num").innerText);
      },
      beforeMount() {
        console.log("=========beforeMount=============");
        console.log("html模板未渲染：" + document.getElementById("num").innerText);
      },
      mounted() {
        console.log("=========mounted=============");
        console.log("html模板已渲染：" + document.getElementById("num").innerText);
      },
      beforeUpdate() {
        console.log("=========beforeUpdate=============");
        console.log("数据模型已更新：" + this.num);
        console.log("html模板未更新：" + document.getElementById("num").innerText);
      },
      updated() {
        console.log("=========updated=============");
        console.log("数据模型已更新：" + this.num);
        console.log("html模板已更新：" + document.getElementById("num").innerText);
      }
    });
  </script>
</body>

</html>