vue

小德 2021-12-02 12:58:53

Categories： Tags：

1 前端工具 VSCode

安装: 下载安装包进行安装。https://code.visualstudio.com/

Auto Close Tag
Auto Rename Tag
Chinese Lanage
Close HTML/XML Tag
ESLint
HTML CSS Support
HTML Snippets
JavaScript
Jquery
Live Server
open in browser
vetur

常用到的快捷键   
新建文件:   Ctrl+N
关闭当前窗口:   Ctrl+W
文件之间切换:   Ctrl+Tab
代码格式化:   Shift+Alt+F
向上或向下移动一行:   Alt+Up 或 Alt+Down
向上或向下复制一行:   Shift+Alt+Up 或 Shift+Alt+Down
在当前行下方插入一行:   Ctrl+Enter
在当前行上方插入一行:   Ctrl+Shift+Enter  
删除某一行  shift+delete

2 ES6

1什么是 ES6

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，
但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

ECMAScript 的背景
JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA（European computer manufactures association，欧洲计算机制造联合会），希望这种语言能够成为国际标准，随后 ECMA 发布了规定浏览器脚本语言的标准，即 ECMAScript。这也有利于这门语言的开放和中立。
    
ECMAScript 的历史
ES6 是 ECMAScript 标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

1997 年 ECMAScript 1.0 诞生。
1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；2015年6月， ES6 正式通过，成为国际标准。

2 ES6 的新特性

1 let 和 const

let 定义的变量不会被变量提升，
const 定义的常量不能被修改，let 和 const 都是块级作用域

ES6前，js 是没有块级作用域 {} 的概念的。（有函数作用域、全局作用域、eval作用域）

ES6后，let 和 const 的出现，js 也有了块级作用域的概念，前端的知识是日新月异的~

变量提升：在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部；不在函数内即在全局作用域的最顶部。这样就会引起一些误解。例如：
    
    
console.log(a); // undefined
var a = 'hello';
 
# 上面的代码相当于
var a;
console.log(a);
a = 'hello';


 
# 而 let 就不会被变量提升
console.log(a); // a is not defined
let a = 'hello';



const 定义的常量不能被修改
    
var name = "bai";
name = "ming";
console.log(name); // ming
const name = "bai";
name = "ming"; // Assignment to constant variable. 常量给变量赋值
console.log(name);


注意的点:

let 关键词声明的变量不具备变量提升（hoisting）特性
let 和 const 声明只在最靠近的一个块中（花括号内）有效
当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING
const 在声明时必须被赋值

2 箭头函数（Arrow Functions）

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：

老的 写法:

var getPrice = function() {
    return 4.55;
};
console.log(getPrice());


var getPrice= ()=>{return 555};
console.log(getPrice());

() 代表函数中的参数  {中 写  函数体}



一个返回值: 还可以直接简写:
var getPrice= ()=>666;
console.log(getPrice());


箭头函数，本质上就是一个匿名函数 ，箭头函数的特性： 箭头函数内部的 this, 永远和 箭头函数外部的 this 保持一致 
    
简写方法有三种变体：

变体1：如果箭头函数，左侧的形参列表中，只有一个参数，则，左侧小括号可以省略；
变体2：如果右侧函数体中，只有一行代码，则，右侧的{ }可以省略；
变体3：如果箭头函数左侧 只有一个 形参，而且右侧只有一行代码，则 两边的()和{}都可以省略
    
注意： 如果我们省略了 右侧函数体的{ }，那么，默认会把 右侧函数体中代码的执行结果，当作箭头函数的调用结果 return 出去；
    
注意: 箭头函数 不能使用 this， 如果要使用对象中的变量，要用对象的名字 . 属性。
    
    <script type="text/javascript">
        var student={
            name:'張三',
            age:23,
            say:()=>{
               //  console.log(this.name);
               console.log(student.name);
            }
        }

        student.say();
    </script>

3 函数参数默认值

let hello=(a,b=3.14)=>{
   return b*a*a;
}

// 调用可以 单个调
console.log(hello(3));
// 也可以两个参数传
console.log(hello(3,2));

4 模板字符串（Template String）

ES6 提供了几个 新的 API
    
includes(): 返回布尔值，表示是否包含该字符串。
startsWith()
endsWith()

let str="你好我好大家好";
console.log(str.startsWith('你好'));
console.log(str.includes("大家"));
console.log(str.endsWith("大家"));

用一对反引号（`模板字符串`）标识 ，它可以当普通字符串使用（'普通字符串'），也可以用来定义多行字符串 ，
    
在模板字符串中可以嵌入变量 ，js表达式或函数等 ，变量，js表达式或函数需要写在${}中
 
模板中可以 插值。  也可以调方法  ${  }
    
<div id="dd"></div>

<script type="text/javascript">          
    let a=10;
	const U={
  	  template:
        `
            <div>
            <h1>Hello</h1>
            <p>你好啊${a+10}</p>
            </div>
            `
	}
	document.getElementById("dd").innerHTML=U.template;
</script>

5 变量的解构赋值

Es6允许按照一定的模式 ，从数组和对象中提取值 ，对变量进行赋值 ，这被称作解构赋值 ，
意思就是把 某个对象中的属性，当作变量，给解放出来，这样，今后就能够当作变量直接使用了；

数组的解构:
以前:

let [a,b,c]=[10,"你好",true];
console.log(a);
console.log(b);
console.log(c); 

对象的解构:

let user={
    id:1001,
    name:"张三"
}
const{name,id}=user;
console.log(name);
console.log(id);

6 对象扩展

属性简写：允许对象中直接写变量 ，这时属性名为变量名 ，属性值为变量值

let  a=10;
let  b=20;
function show(){
    console.log("是个好人.");
}

var user={a,b,show};
user.show();



对象简写中:可以省略function 关键字
const h={
    user:function(){
        console.log("你好");
    }
}    
    
const h={
    user(){
        console.log("你好");
    }
}


Object 中扩展了很多新的方法:  如

keys(obj): 获取对象的所有 key 形成的数组
values(obj): 获取对象的所有value 组成的数组
entries(obj): 获取对象组成的 所有 key 和 value 组成的二维数组，[[k1,v1],[k2,v2]]
    
assign(dest,...src):  将多个src对应的值 拷贝得到 dest中，(第一层为申拷贝，第二次为浅拷贝)
    合并对象。
    
let student={
    id:232,
    name:'張三',
    say(){
        console.log("我是"+name);
    }
}

console.log(Object.keys(student));
console.log(Object.values(student));
console.log(Object.entries(student));

<script type="text/javascript">   
    const a={'a':'b'};
    const b={'a1':'b1'};
    const c={'a2':'b2'};
    Object.assign(a,b,c);
    console.log(a);
</script>

7 展开运算符（…）

// 1 将字符串 转换成 数组


let str="abcd";
const arr=[...str];
console.log(arr);

// 2 合并数组

const arr1=[1,2,3];
const arr2=[4,5,6];
const arr=[...arr1,...arr2];
console.log(arr);

8 类 javaScript模拟面向对象

ES6 中有 class 语法。
值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。
函数中使用 static 关键词定义构造函数的的方法和属性：
    
class Perple{
    constructor(){
        console.log("people 被初始化了..");
    }
}

let a=new Perple();


class Perple{
    constructor(){
        console.log("people 被初始化了..");
    }

    say(){
        console.log("人会说话..");
    }
}

类中的继承: 构造子类的时候 必须先构造父类

class Perple{
    constructor(){
        console.log("people 被初始化了..");
    }

    say(){
        console.log("人会说话..");
    }
}

class Student extends Perple{
    constructor(){
        super();
        console.log("我是学生");
    }
}

let s1=new Student();
s1.say();

9 模块化

模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出
    
多个JS 文件中 内容可以相互运用。
    
如: 有两个 js 文件 , a.js 和 b.js
    
a.js中 
    
let util={
    sum(a,b){
        return a+b;
    }
}

const PI=3.14;
let a=100;
// export 可以导出 一切 js變量 如变量  函数 数组
export {a,PI,util}


b.js 中导入 使用
    
import a from './a.js'
console.log(a);    

现在浏览器 不支持，要 node .

3 VUE

1 什么是VUE

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

VUE 官网: https://cn.vuejs.org/

1_1 为什么学习VUE

Vue框架以其简单易学并且渐进式的特点深受开发者喜爱
    
无论是中小型还是大型项目都可使用Vue框架来开发，在前端开发领域非常流行
    
VUE优点:
解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM (Virtual DOM)

2 MVVM 思想

Vue在设计上使用的MVVM（Model-View-ViewModel）模式
Model:负责数据存储
View:负责页面展示
ViewModel:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
    
MVVM 模式的优势:

低耦合
视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化时Model可以不变，当Model变化时View也可以不变
可重用性
可以把一些视图逻辑放在一个ViewModel里面，让多个View重用这段视图逻辑代码
独立开发
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

MVVM解决的问题是将业务逻辑代码与视图代码进行完全分离，使
各自的职责更加清晰，后期代码维护更加简单

2_1 VUE DOM监听

DOM监听
视图层发生变化，DOM监听到之后，会传到逻辑层进行处理
数据绑定
逻辑层把数据处理完成之后，通过数据绑定，把处理后的结构返回给视图层

3 VUE安装

1 直接引入 VUE,  下载 开发版本或者 生产版本。
   
  https://cn.vuejs.org/v2/guide/installation.html

  引入 JS 文件。
      

2 CDN 安装。
      
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      
3  NPM 安装
      
  在用 Vue 构建大型应用时推荐使用 NPM 安装
      
  NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
      
  # 最新稳定版
      
  1  在 要操作的文件夹 下面 初始化
      
     npm  init  -y           
      
     初始化完成之后，会生成一个  package.json ，表示 是 npm 管理的项目。
      
  2  npm install vue  
     
     安装vue
      
     安装nodejs
      
  3 在 项目外面 引入 node_modules中的 vue
      
    
      
  <script src="./node_modules/vue/dist/vue.js"></script>

4 VUE使用

1 体验 VUE

<body>
    <div id="dd">
        <h1>你好{{message}}</h1>
    </div>
    <script>
        let vm=new Vue({
            el:"#dd",
            data:{
                message:"张三"
            }
        });
    </script>
</body>

2 体验VUE

<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>Hello，{{ name }}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {  name: ""  }
        })
    </script>
</body>

app.message

5 插值表达式讲解

插值表达式简介

插值表达式是使用双大括号来包裹 js 代码构成插值表达式，插值表达式作用是将双大括号中的数据替换成对应属性值进行展示
双大括号语法也叫模板语法或者Mustache语法
Mustache是一款经典的前端模板引擎。在前后端分离的技术架构下，前端模板引擎是一种技术选型
插值表达式中可以写入的内容
JSON数据
数字
字符串
插值表达式

示例:

<div id="app">
    <h1>{{ msg }}</h1>
    <h1>{{ 10 }}</h1>
    <h1>{{ "string" }}</h1>
    <h1>{{ 12+13 }}</h1>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello" }
    });
</script>

6 指令简介

指令（Directive）是特殊的带有 v-前缀的特性
常用Vue指令
v-if指令、v-else指令、v-show指令、v-on指令、v-model指令、v-bind指令、v-for指令…
    
指令的作用
当表达式的值改变时，将某些行为应用到DOM上
点击toggle按钮，会显示红色方块，再次点击，红色方块消失，这里就是通过控制属性的真假并作用到红色方块上来显示隐藏方块

v-if

v-if 指令

v-if指令称为条件渲染指令，根据表达式的真假来插入和删除元素
    
语法: v-if = "表达式"
    
<div id="app">
    <h1 v-if="isShow">表达式的值为真，就能显示</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {    isShow: true    }
    });
</script>

v-else

v-else 指令指令为v-if指令添加“else块”，v-else元素必须立即跟在v-if元素的后面

<!-- v-else 后面不需要表达式 -->
<h1 v-else> v-if不成立的时候，才会显示</h1>

    
    
<div id="app">
    <h1 v-if="isShow">表达式的值为真，就能显示</h1>
    <h1 v-else>v-if不成立的时候，才会显示</h1>
</div>
var vm = new Vue({
        el: '#app',
        data: { isShow: false}
});

v-show

v-show指令控制切换一个元素的显示和隐藏

v-show指令控制切换一个元素的显示和隐藏
    
v-show = "表达式"
    
<div id="app">
    <h1 v-show='isShow'>表达式为真，元素显示</h1>
</div>
    
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {  isShow: true   }
    });
</script>

v-show 和 v-if指令的区别?

按下F12键，打开控制台查看  查看控制台。
    
    
v-if指令满足条件时会渲染到HTML中，不满足条件时，不会渲染，不会加载
使用v-show指令的元素始终会被渲染到HTML中
只是简单地为元素设置CSS的style属性。当不满足条件的元素被设置style="display:none"样式
    
应用场景的区别
v-if指令有更高的切换消耗，当v-if指令条件成立的时候会将元素加上，不成立的时候，就会移除DOM，并且内部的指令不会执行
v-show指令有更高的初始渲染消耗，v-show只是简单的隐藏和显示

v-on

v-on 指令为HTML元素绑定事件监听

v-on：事件名称 ="函数名称() "
简写形式   @事件名称 ="函数名称()"
    
关键代码:

<div id="app">
     <button v-on:click='fn'>toggle</button>
     <div class="div1" v-show='bol'></div>
</div>

<script>
  var vm = new Vue({
            el:"#app",
            data: {  bol: false },
            methods: {
                fn: function () { 
                    this.bol = !this.bol;  
                }
            }
  });
</script>

v-model

v-model 指令能轻松实现表单输入和应用状态之间的双向绑定

语法:   v-model ="变量"

<div id="app">
    <input type="text" v-model='msg' />
    <h1>{{ msg }}</h1>
</div>
    
    
var vm = new Vue({
        el: '#app',
        data: { msg: 'hello' }
 });

v-bind

v-bind指令可以在其名称后面带一个参数，参数通常是HTML元素的特性（attribute）

v-bind:属性名 ="表达式" 
简写形式    :属性名 ="表达式"

    
<style>
        .textColor{color:red}
        .textSize{font-size: 50px;}
</style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imageSrc"/>
        <div v-bind:class="[isA?classA:classB]">类名作为一个属性值保存</div>
        <div :class="[classA,classB]">你好</div>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data: {  
                imageSrc: "images/a.png",
                classA:'textColor',
                classB:'textSize',
                isA:false
            }
        });
    </script>    
</body>

v-for

v-for 指令可以遍历data中的数据，并在页面进行数据展示

v-for =” (item, index) in items”

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in lesson" :key="index">
                {{index}} - {{item.name}} - {{item.type}}
                <br />
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data: {  
               lesson:[
                   {name:'前端',type:['HTML','CSS','JavaScript']},
                   {name:'前端框架',type:['Vue','React','Angular']},
               ]
            }
        });
    </script>    
</body>

7 VUE小案例

1
2
3

制作导航页面，当前辈点击的项目内容会显示 在绿色方块中，并且被点击的背景会变成红色。
    
使用 v-for 遍历导航 项目，  v-on 添加事件。 v-bind 动态绑定  class 和key 属性。

核心代码:

<body>
    <div id="app">
        <nav>
            <a v-for="(item,index) in items" :key="index" 
			:class="{'show': item.active}" 
			@click="makeActive(item, index)">
			{{item.name}}
			</a>
        </nav>
        <p>选择了 <b>{{active}}</b></p>
    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            active: 'HTML',
            items: [
                { name: 'HTML', active: true },
                { name: 'CSS', active: false },
                { name: 'JavaScript', active: false },
                { name: 'Vue.js', active: false }
            ]
        },
        methods: {
            makeActive: function (item, index) {
                // 得到当前点击导航的文本内容
                this.active = item.name;
                for (var i = 0; i < this.items.length; i++) {
                    // 遍历让所有的背景都去掉颜色
                    this.items[i].active = false;
                }
                // 当前点击的背景变为红色
                this.items[index].active = true;
            }
        }
    });
</script>

8 VUE 过滤器

什么是过滤器？

　　过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
    
   Vue支持 {{}} 插值的尾部添加一个管道符 {|} 对数据进行过滤，经常用于格式化文本，加货币单位等。

<body>
    <div id="app">
        <h1>价格:{{price}}</h1>
        <h1>添加价格符号:{{price| myCurry('￥')}}</h1>
    </div>
    <script>
    // filter
    new Vue({
        el: '#app',
        data: {
           price:5000
        },
        //过滤器的本质 就是一个有参数有返回值的方法
        filters: {
            // value: 第一个值: 要处理的值
            // arg1: 过滤器要传递过来的 ￥
            myCurry: function(value, arg1) {
                return value +arg1;
            }
        }
    })
    </script>  
</body>

9 Axios库

Vue.js Ajax(axios)
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
    
Github开源地址： https://github.com/axios/axios

Axios 库常用于  Ajax请求，它本身具有如下特征:

支持从浏览器创建  XMLHttpRequest 对象
支持从 node.js 发出http请求

官方 提供的 API方法，可以参看 Github 
    
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
    
Axios 提供了8种API方法，官方没有明确推荐 使用哪种方法。一般使用 get()  和 post()
    

    
可以练习测试：
 
为了 避免跨域问题，可以现在 VSCode 中 安装插件   Live  Server 插件。
    
运行的时候，在 HTML中 点击  Open with  Live Server。

get 请求案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>姓名:{{msg.name}}</h1>
        <h1>年龄:{{msg.age}}</h1>
        <button @click="dj">点击</button>
    </div>
    


      <script type = "text/javascript">
       var vm= new Vue({
            el: '#app',
            data:{
                msg:{}
            },
            methods:{
               dj(){
                    axios
                    .get('a.txt',{params:{ID:1}})
                    .then(response => (this.msg=response.data))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
               }
            }
      })
      </script>
</body>
</html>
            
            
{
"name":"Tom",
"age":13
}

Post发送请求

axios.post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


axios.get('a.txt',{params:{ID:1}})

get 和 post 的区别

get  携带参数 需要放在 params 命名 对象中，而post 方法不需要。
    
其他 和 普通的 get   post 一致。
    
post()的使用和get()基本一致，只是在携带参数的时候各自携带的参数方式不同

10 生命周期函数

“生命周期”指实例对象从构造函数开始执行（被创建）到被GC（Garbage Collection）回收销毁的整个存在的时期
生命周期函数是为了在实例对象的各个阶段方便开发者控制而产生，在不同的时期有不同的生命周期函数，可以利用不同时期的生命周期函数去完成不同的操作

    
可以查看官网的 生命周期图谱。

<!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>vue生命周期</title>
    <script src="js/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{message}}</h1>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Vue的生命周期'
        },
        /*// 生命周期的写法需要注意，适合data在一个级别的
        beforeCreate: function() {
          console.group('------beforeCreate创建前状态------');
          console.log("el: " + this.$el); //undefined
          console.log("data: " + this.$data); //undefined 
          console.log("message: " + this.message) //undefined 
          // 在这个时期 ,说明 el 和 data 并未初始化
          // 这个时候做的操作,例如:加一些loading事件
        },*/
        created: function () {
            console.group('------created创建完毕状态------');
            console.log("el: " + this.$el); //undefined
            console.log("data: " + this.$data); //已被初始化 
            console.log("message: " + this.message); //Vue的生命周期,说明已被初始化
            //  这个时期,data 数据已经初始化，但是 el没有
            //  这个时候可以做的操作例如:结束loading事件，还做一些初始化，实现函数自执行等

        },
        beforeMount: function () {
            console.group('------beforeMount挂载前状态------');
            // console.log("el: " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("data: " + this.$data); //已被初始化  
            console.log("message: " + this.message); //已被初始化  
            // 到这个时期,data 和 el 都已经 初始化
        },
        /* mounted: function() {
          console.group('------mounted 挂载后状态------');
          // console.log("el: " + this.$el); //已被初始化
          console.log(this.$el);    
          console.log("data: " + this.$data); //已被初始化
          console.log("message: " + this.message); //已被初始化 
          // 完成挂载，这个生命周期用的是比较多的
          // 最常见的就是:1、发起后端请求，拿回数据 2、接收页面之间的传递的参数 3、子组件向父组件传递参数
          
        }, */
        beforeUpdate: function () {
            console.group('------beforeUpdate 更新前状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        updated: function () {
            console.group('------updated 更新后状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
            // 当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。我们在console中输入 vm.message = '触发组件更新'
            // 这里就比较好理解了：当希望更新组件前做一些操作的时候，我们就可以调用 beforeUpdate钩子函数，同理使用 updated 钩子函数
        },
        beforeDestroy: function () {
            console.group('------beforeDestroy 销毁前状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
            // beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
        },
        destroyed: function () {
            console.group('------destroyed 销毁后状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
            // destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
        }/**/
    })
</script>

</html>

4 安装VUE脚手架。

1 安装node

https://blog.csdn.net/wulala_hei/article/details/85000530

安装好 之后 查看是否安装: node -v

2 使用npm 全局安装 webpack

使用 npm（不知道npm的同学，可以自行百度，或者看我上面 nvm的安装教程 ） 
    
全局安装 webpack，
    打开命令行工具输入：npm install webpack -g  
    
    安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功。

如果不能执行  webpack -v

  
powershell
    
打开系统禁用脚本:  set-ExecutionPolicy  RemoteSigned
    
注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g

https://blog.csdn.net/weixin_51370367/article/details/115164263

3 全局安装 vue-cli

在命令行中输入 npm install -g vue-cli
    
安装完成后，检验是否安装成功，输入 vue  -V (注意：这里是大写的 “V”)，如果出现版本号，则说明安装成功。 
    
打开 node 的安装目录，也可以看到我们全局安装的 vue-cli

3 搭建一个项目

1  首先，在D盘新建一个文件夹作为项目的存放地，然后cd到目录下，输入命令，创建项目
    
    vue init webpack vue-demo
    
2 等待模板下载成功后，会有一个交互式的选项让你选择：
   
  ? Project name vue-demo # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
	Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router，路由肯定要的
? Use ESLint to lint your code? NO # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我


 3 安装完成后，安装提示，cd 到项目目录, 执行命令 npm install 进行初始化。
    
   
 4 启动项目   npm run dev   ,  启动项目的时候，一定要 切入到 项目中。

 如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js 的 post
    
    
 vue-cli 的 webpack 配置分析

从 package.json 可以看到 开发 和 生产 环境的入口。
    
    
dev 就是开发环境的启动命令
build 是生产打包环境的命令
lint 是ESLint的检查命令 在 --ext 前加一个 --fix 可以自动修复不符合规范的代码
    
    
   
    
 打包上线 

运行 npm run build 命令，就可以进行打包工作了，打包完成后，会生成 dist 目录，项目上线时，把dist 目录下的文件放到服务器就可以了。
    
1 npm run build
    
2 把dist 目录下的文件放到服务器就可以了。
    
vue 打包。
   
https://www.cnblogs.com/lightmusic/p/11474910.html

4 用脚手架搭建好前端程序后，写一个自己的页面

1	测试以下，配置好地址路径

5 VUE做增删改查

安装 ： 
    
2、cnpm i element-ui -S  如果没有使用淘宝镜像的就使用npm i element-ui -S命令
    
3  导入:  我们要先导入axios模块，命令：npm install axios  然后再输入npm run dev 运行项目。

1
2
3

vue 前后端 分离demo
    
VUE中引入静态文件的路径:  https://blog.csdn.net/HY_358116732/article/details/82219387

1	搭建好 Emp的页面后:

<template>
    <div id="wrap">
			<div id="top_content"> 
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20
							<br />
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="#">main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						Welcome!
					</h1>
					<table class="table">
						<tr class="table_header">
							<td>
								ID
							</td>
							<td>
								Name
							</td>
							<td>
								Salary
							</td>
							<td>
								Age
							</td>
							<td>
								Operation
							</td>
						</tr>
						<tr class="row1" v-for="user in obj1">
							<td>
								{{user.id}}
							</td>
							<td>
								{{user.name}}
							</td>
							<td>
								{{user.salary}}
							</td>
							<td>
								{{user.age}}
							</td>
							<td>
								<a href="emplist.html">delete emp</a>&nbsp;<a href="updateEmp.html">update emp</a>
							</td>
						</tr>
						
					</table>
					<p>
						<input type="button" class="button" value="Add Employee" onclick="location='addEmp.html'"/>
					</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
				ABC@126.com
				</div>
			</div>
		</div>
</template>

<script>
export default {
  name: 'Emp',
  mounted(){
    this.getUserInfo();
  },
  data(){
      return {obj1:[]}
  },
  methods:{
      getUserInfo(){
          console.log("大家伙....................");
          this.$axios.get('http://localhost:8080/findAll')
                    .then(response => (this.obj1=response.data))
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
      }
  }
}
</script>

<style scoped>
    
	body 
	{
		margin: 0;
		font-size: 62.5%;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		padding: 15px 0;
		background: #eeeeee;
	}

	#wrap {
		width: 820px;
		margin: 0 auto;
		background:  #FFFFFF;
	}

	#top_content {
		padding: 0 10px;
	}

	#topheader {
			padding: 25px 15px 15px 15px;
			margin: 0 auto 0 auto;
			background:  #85C329;
	}

	#rightheader {
		float: right;
		width: 375px;
		height: 40px;
		color: #FFFFFF;
		text-align: right;
	}
	#rightheader p {
		padding: 35px 15px 0 0;
		margin: 0;
		text-align: right;
	}
	#rightheader p span {
		font-weight: bold;
	}
	#rightheader a:link, #rightheader a:visited {
		color: #FFFFFF;
		text-decoration: underline;
	}

	#title {
		padding: 0;
		margin: 0;
		font-size: 2.5em;
		color: #FFFFFF;
	}
	#title span {
		font-size: 0.5em;
		font-style: italic;
	}
	#title a:link, #title a:visited {
		color: #FFFFFF;
		text-decoration: none;
	}
	#title a:hover {
		color: #E1F3C7;
	}

	#navigation {
		background: #74A8F5;
		border-top: 1px solid #ffffff;
		height: 25px;
		clear: both
	}
	#navigation ul {
		padding: 0;
		margin: 0;
		list-style: none;	
		font-size: 1.1em;
		height: 25px;
	}
	#navigation ul li {
		display: inline;
	}
	#navigation ul li a {
		color: #FFFFFF;
		display: block;
		text-decoration: none;
		float: left;
		line-height: 25px;
		padding: 0 16px;
		border-right: 1px solid #ffffff;
	}
	#navigation ul li a:hover {
		background: #5494F3;
	}
	
	#content {
		padding: 0 15px;
		margin: 0 auto 0 auto;
		background:  #ffffff;
		color: #666666;
	}

	#content p#whereami {
		padding: 20px 0 15px 0;
		margin: 0;
	}
	#whereami a:link, #whereami a:visited {
		color: #73A822;
		text-decoration: underline;
	}
	
	#content h1, #content h2, 
	#content h3, #content h4 , #content h5 {
		color: #74A8F5;
	}
	#content h1 {
		font-family: "Trebuchet MS", Arial, Helvetica;
		padding: 0;
		margin: 0 0 15px 0;
		font-size: 2em;
	}
	#content h2 {
		font-family: "Trebuchet MS", Arial, Helvetica;
		padding: 0;
		margin: 0 0 15px 0;
		font-size: 1.5em;
	}

	#top_body, #content_body {
		padding: 0 25px;
	}

	#footer {
	
		color: #FFFFFF;
		padding: 0 10px 13px 10px;
	}
	#footer p {
		padding: 0;
		margin: 0;
	}
	#footer p a:link, #footer p a:visited {
		color: #FFFFFF;
		font-style: italic;
		text-decoration: none;
	}
	#footer #footer_bg {
		padding: 15px 15px 25px 15px;
		border-top: 1px solid #7BB425;
	}

	#footer #design {
		display: block; 
		width: 150px; 
		height: 30px;
		float: right;
		line-height: 20px;
		padding: 0 5px;
		text-align: right;
		color: #E1F3C7;
	}
	#footer #design a {
		color: #FFFFFF;
		text-decoration: underline;
	}

	.table {
		margin-bottom: 15px;
		width: 100%;
		border-collapse: collapse;
	}
	.table_header td {
		padding: 5px 10px;
		color: rgb(70,122,167);
		border-top: 1px solid #CBD6DE;
		border-bottom: 1px solid #ADBECB;
		font-size: 1.1em;
		font-weight: bold;
	}
	.table_header td a:link, .table_header td a:visited {
		text-decoration: underline;
		color: rgb(70,122,167);
	}
	.table_header td a:hover {
		text-decoration: underline;
		color: #73A822;
	}
	.table_header td {
		border: 1px solid #CBD6DE;
	}

	.row1 td, .row2 td, .row_hover td, .paging_row td {
		padding: 5px 10px;
		color: #666666;
		border: 1px solid #CBD6DE;
	}
	.row1 td {
		background: #ffffff;
	}
	.row2 td {
		background: #eeeeee;
	}
	.row_hover td {
		background: #FBFACE;
		color: #000000;
	}
	
	.hidden {
		display: none;
	}

	.little {
		font-size: 10px;
	}
	
	.clear {
		clear: both;
	}
	
	.img_left {
		float: left;
		padding: 1px;
		border: 1px solid #cccccc;
		margin: 0 10px 10px 0;
		width: 110px;
		height:150px;
	}

/* #content ul basic style for unordered lists
------------------------------------------------*/
	#content ul {
		font-size: 1.1em;
		line-height: 1.8em;
		margin: 0 0 15px 0;
		padding: 0;
		list-style-type: none;
	}

/* #content p paragraphs
-----------------------------*/
	#content p {
		font-size: 1.2em;
		margin: 0;
		padding: 0 0 15px 0;
	}

/* #content p a links in paragraphs
------------------------------------*/
	#content p a:link, #content p a:visited, 
	.table a:link, .table a:visited,
	.link a {
		color: #73A822;
		text-decoration: none;
	}
	#content p a:hover, .table a:hover, .link a:hover {
		text-decoration: underline;
	}

/* #content ul.green (73A822)
--------------------------------*/
	#content ul.green li {
		padding: 0 0 0 20px;
		margin: 0;
		font-size: 1.1em;
	}
	#content ul.green li a:link, #content ul.green li a:visited {
		color: #73A822;
		text-decoration: none;
	}
	#content ul.green li a:hover {
		color: #73A822;
		text-decoration: underline;
	}
	
/* #content ul.black (73A822)
--------------------------------*/
	#content ul.black li {
		padding: 0 0 0 20px;
		margin: 0;
		font-size: 1.1em;
	}
	#content ul.black li a:link, #content ul.black li a:visited {
		color: #666666;
		text-decoration: none;
	}
	#content ul.black li a:hover {
		color: #999999;
		text-decoration: underline;
	}
	
/* #content ol
--------------------------------*/
	#content ol {
		padding: 0 0 0 25px;
		margin: 0 0 15px 0;
		line-height: 1.8em;
	}
	
	#content ol li {
		font-size: 1.1em;
	}
	#content ol li a:link, #content ol li a:visited {
		color: #73A822;
		text-decoration: none;
	}
	#content ol li a:hover {
		color: #73A822;
		text-decoration: underline;
	}

/* #content p.paging 
---------------------------------*/
	#content p.paging {
	padding: 5px;
	border: 1px solid #CBD6DE;
	text-align: center;
	margin-bottom: 15px;
	background: #eeeeee;
	}

/* .small_input smaller text in inputs/combos
-----------------------------------------------*/
	.small_input {
		font-size: 10px;
	}

/* .form_table style for table used in forms
---------------------------------------------*/
	.form_table {
		margin-bottom: 15px;
		font-size: 1.1em;
	}
	.form_table p {
		margin: 0;
		padding: 0;
	}
	.form_table td {
		padding: 5px 10px;
	}

/* .checkbox_nomargins clear all margins from a checkbox
---------------------------------------------------------*/
	.checkbox_nomargins {
		/*margin:0;width:13px;height:13px;overflow:hidden;
		font-size: 10px;*/
		margin: 0;
		padding: 0;
	}
	
/* .button some buttons style - inspired from wordpress
------------------------------*/
	input.button {
		margin: 0;
		padding: 2px;
		border: 3px double #999999;
		border-left-color: #ccc;
		border-top-color: #ccc;
		font-size: 11px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
/* form style for forms
-------------------------*/
	form {
		padding: 0;
		margin: 0;
	}

/* input.inputgri - some style for inputs
--------------------------------------------*/
	input.inputgri, select.inputgri, textarea.inputgri {
		background: #eeeeee;
		font-size: 14px;
		border: 1px solid #cccccc;
		padding: 3px;
	}
	input.inputgri:focus, select.inputgri:focus , textarea.inputgri:focus {
		background: #ffffff;
		border: 1px solid #686868;
	}

/* .notice - messages to user
--------------------------------*/
	.notice {
		background: #CAEA99; 
		border: 1px solid #70A522; 
		padding: 15px 15px 15px 15px; 
		margin-bottom: 15px;
		font-size: 1.2em;
		color: #333333;
	}
	.notice_error {
		background: #FEDCDA; 
		border: 1px solid  #CE090E; 
		padding: 15px 15px 15px 15px; 
		margin-bottom: 15px;
		font-size: 1.2em;
		color: #333333;
	}
	#notice a {
		color: #333333;
		text-decoration: underline;
	}

/* Other links 
----------------*/
	.other_links {
		background: #eeeeee;
		border-top: 1px solid #cccccc;
		padding: 5px;
		margin: 0 0 15px 0;
	}
	#content .other_links h2 {
		color: #999999;
		padding: 0 0 0 3px;
		margin: 0;
	}
	#content .other_links ul {
		padding: 0;
		margin: 0;
	}
	#content .other_links ul li {
		padding: 0 0 0 20px;
	}
	#content .other_links a, #content .other_links a:visited {
		color: #999999;
		text-decoration: underline;
	}
	#content .other_links a:hover {
		color: #666666;
	}
	
/* code */
	code {
		font-size: 1.2em;
		color: #73A822;
	}
</style>

main.js中导入 axios库

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios";
Vue.prototype.$axios = axios;
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

后端代码解决跨域问题

@RestController
public class EmpController {
    @RequestMapping("/findAll")
    @ResponseBody
    @CrossOrigin(origins="http://localhost:8888",allowCredentials = "true")
    // @CrossOrigin(origins = "*",maxAge = 3600)
    public List<Emp> findAll(){
        List<Emp> list=new ArrayList<>();
        list.add(new Emp(1,"张三",232323.2,23));
        list.add(new Emp(2,"张三2",2232323.2,23));
        return list;
    }
}

注解@CrossOrigin解决跨域问题  

其中

origins:是允许访问的列表（origins=“网址”）

maxAge:准备响应前的 缓存持续的 最大时间
    
    
    
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.use(Router)
    
    
post请求 拿不到 值:

https://www.cnblogs.com/yuerdong/p/10277177.html

面试

其他

vue

1 前端工具 VSCode

2 ES6

1什么是 ES6

2 ES6 的新特性

1 let 和 const

2 箭头函数（Arrow Functions）

3 函数参数默认值

4 模板字符串 （Template String）

5 变量的解构赋值

6 对象扩展

7 展开运算符 （…）

8 类 javaScript模拟面向对象

9 模块化

3 VUE

1 什么是VUE

1_1 为什么学习VUE

2 MVVM 思想

2_1 VUE DOM监听

3 VUE安装

4 VUE使用

5 插值表达式讲解

6 指令简介

v-if

v-else

v-show

v-on

v-model

v-bind

v-for

7 VUE小案例

8 VUE 过滤器

9 Axios库

10 生命周期函数

4 安装VUE脚手架。

1 安装node

2 使用npm 全局安装 webpack

3 全局安装 vue-cli

3 搭建一个项目

4 用脚手架搭建好前端程序后，写一个自己的页面

5 VUE做增删改查

4 模板字符串（Template String）

7 展开运算符（…）