Vue入门篇

Posted 2021-01-29 hungryforknowedge

一  ES6语法

1  ECMAScript

• 1995年，网景工程师Brendan Eich 花了10天时间设计了javascript语言。
• 1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
• 1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。JavaScript和JScript都是ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。

所以，ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现。

2 ES5和6的一些新特性

2.1  let和const命令

之前，js定义变量只有一个关键字：var。var有一个问题，就是定义的变量有时会成为全局变量：

for(var i = 0; i < 5; i++){
    console.log(i);
}
console.log("循环外：" + i)//5

let所声明的变量，只在let命令所在的代码块内有效。

for(let i = 0; i < 5; i++){
    console.log(i);
}
console.log("循环外：" + i)//not defined

const声明常量，不能修改。

2.2    箭头函数

var print = function (obj) {
    console.log(obj);
}
// 简写为：
var print2 = obj => console.log(obj);

参数=>{方法体}

2.3 模块化

比如定义一个js文件:hello.js，里面有一个对象：

const util = {
    sum(a,b){
        return a + b;
    }
}

使用export将这个对象导出：

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

// 导入util
import util from ‘hello.js‘
// 调用util中的属性
util.sum(1,2)

 

二  Vue入门

2.1    MVVM模式

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

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的。

vue就是一款MVVM模式的框架。

Vue是一个渐进式javascript框架，既可以只作为一个js库来使用，如果想将更多的业务逻辑放到前端来实现，它也有vue-router  vuex等等核心库来帮你实现。

2.2 Node和NPM

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。，我们先安装node及NPM工具。

2.2.1 node.js

下载地址：https://nodejs.org/en/download/

完成以后，在控制台输入：node –v

2.2.2 npm

安装完成Node应该自带了NPM了，在控制台输入npm -v查看：

npm默认的仓库地址是在国外网站，速度较慢，建议设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

首先安装nrm，这里-g代表全局安装:

npm install nrm –g

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

通过nrm use taobao来指定要使用的镜像源。

然后通过nrm test taobao来测试速度：

安装完成请一定要重启下电脑。

2.3 快速入门：

2.3.1 vue安装

三种方式：

1）下载地址：https://github.com/vuejs/vue   下载解压，得到vue.js文件。

2）使用cdn

<!-- 开发环境版本，包含了用帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3）vue官方提供了一个快速搭建vue项目的脚手架：vue-cli

使用它能快速的构建一个web工程模板

安装：npm install -g vue-cli

新建module  打开terminal进入目录，

用vue-cli命令，快速搭建一个webpack的项目：vue init webpack

2.3.2  vue渲染

渲染.html

app.name=”春哥”

• 首先通过 new Vue()来创建Vue实例
• 然后构造函数接收一个对象，对象中有一些属性：
• el：是element的缩写，通过id选中要渲染的页面元素，这里是一个div
• data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
• 页面中的h2元素中，通过{{name}}的方式，来渲染刚刚定义的name属性。

2.3.3 双向绑定

绑定.html

• 在data添加了新的属性：num
• 在页面中有一个input元素，通过v-model与num进行绑定。
• 同时通过{{num}}在页面输出

2.3.4事件处理

事件.html

• 用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
• 普通onclick是无法直接操作num的。

2.4 Vue的结构和生命周期

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({

  // 选项

})

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

• el
• data
• methods
• ...

2.4.1 模板

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。

可以通过el属性来指定。

例如一段html模板：

<div id="app">

   

</div>

然后创建Vue实例，关联这个div：

var vm = new Vue({

         el:"#app"

})

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

2.4.2数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html:

<div id="app">
    <input type="text" v-model="name"/>
</div>
Js:
var vm = new Vue({
    el:"#app",
    data:{
        name:"克总"
    }
})

 

• name的变化会影响到input的值
• input中输入的值，也会导致vm中的name发生改变

2.4.3 方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

html:

<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>

 

js:

var vm = new Vue({
    el:"#app",
    data:{
        num: 0
    },
    methods:{
        add:function(){
            // this代表的当前vue实例
            this.num++;
        }
    }
})

 

2.4.4生命周期：

1）生命周期：

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

2）钩子函数：

例如：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

html:
<div id="app">
    {{hello}}
</div>
js:
var vm = new Vue({
    el:"#app",
    data:{
        hello: ‘‘ // hello初始化为空
    },
    created(){
        this.hello = "hello, world！ 我出生了！";
    }
})

 

3)钩子函数执行顺序：

钩子.html

a）created和mounted

查看console：

beforecreated：el 和 data 并未初始化 
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成挂载

另外在beforemount，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

b)update

在 chrome console里执行命令:

app.message= ‘update vue ‘;

c)destroy

在console里执行下命令: app.$destroy();

对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

d)钩子函数怎么用：

beforecreate : 举个栗子：可以在这加个loading事件 
created ：在这结束loading，还做一些初始化，实现函数自执行 
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

2.5 指令

2.5.1 v-model v-if v-for v-on v-bind等等

2.5.2 计算属性

data:{
    birthday:1529032123201 // 毫秒值
}

 

假如希望得到yyyy-MM-dd的样式：

<h1>您的生日是：{{
    new Date(birthday).getFullYear() + ‘-‘+ new Date(birthday).getMonth()+ ‘-‘ + new Date(birthday).getDay()
    }}
</h1>

 

虽然能得到结果，但是非常麻烦。

Vue中提供了计算属性，来替代复杂的表达式：

var vm = new Vue({
    el:"#app",
    data:{
        birthday:1429032123201 // 毫秒值
    },
    computed:{
        birth(){// 计算属性本质是一个方法，但是必须返回结果
            const d = new Date(this.birthday);
            return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
        }
    }
})

 

计算属性本质就是方法，但是一定要返回数据。

2.5.3 watch

Watch.html

2.6组件化

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

2.6.1 全局组件

1)全局组件.html

• 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
• 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
• 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
• 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
• data的定义方式比较特殊，必须是一个函数。

2）定义好的组件，可以任意复用多次：

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

3）每个组件互不干扰，都有自己的count值。怎么实现的？

定义这个 <counter> 组件时，它的data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

 

2.6.2 局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const counter = {
    template:‘<button v-on:click="count++">涨了 {{ count }} 个粉</button>‘,
    data(){
        return {
            count:0
        }
    }
};
var app = new Vue({
    el:"#app",
    components:{
        counter:counter // 将定义的对象注册为组件
    }
})

 

• components就是当前vue对象子组件集合。
  • 其key就是子组件名称
  • 其值就是组件对象的属性
• 效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

2.7 组件通信

各个组件之间以嵌套的关系组合在一起，不可避免的会有组件间通信的需求。

2.7.1 父—>子

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

父子.html

2.7.2 子—>父

子父.html

<div id="app">
    <h2>num: {{num}}</h2>
    <!--使用子组件的时候，传递num到子组件中-->
    <counter :num="num"></counter>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
    Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减
        template:‘            <div>                <button @click="num++">加</button>                  <button @click="num--">减</button>              </div>‘,
        props:[‘num‘]// count是从父组件获取的。
    })
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        }
    })
</script>

 

• 子组件接收父组件的num属性
• 子组件定义点击按钮，点击后对num进行加或减操作

好像没问题，点击按钮报错：

子组件接收到父组件属性后，默认是不允许修改的。

既然只有父组件能修改，那么加和减的操作一定是放在父组件：

var app = new Vue({
    el:"#app",
    data:{
        num:0
    },
    methods:{ // 父组件中定义操作num的方法
        increment(){
            this.num++;
        },
        decrement(){
            this.num--;
        }
    }
})

但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？

我们可以通过v-on指令将父组件的函数绑定到子组件上：

<div id="app">
    <h2>num: {{num}}</h2>
    <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>

然后，当子组件中按钮被点击时，调用绑定的函数：

 Vue.component("counter", {
            template:‘                <div>                    <button @click="plus">加</button>                      <button @click="reduce">减</button>                  </div>‘,
            props:[‘count‘],
            methods:{
                plus(){
                    this.$emit("inc");
                },
                reduce(){
                    this.$emit("dec");
                }
            }
        })

vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数。

2.7.3 大量的组件间通信，用到vuex。

三 路由vue-router

3.1 场景模拟

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换。

3.1.1 登陆组件

3.1.2 注册组件

3.1.3 父组件

在route.html中使用刚刚编写的两个组件.  效果：route.html

3.1.4

当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

3.2 vue-router

在route.html中引入依赖：

<script src="vue-router.js"></script>

新建vue-router对象，并且指定路由规则：

// 创建VueRouter对象
const router = new VueRouter({
    routes:[ // 编写多个路由规则
        {
            path:"/login", // 请求路径
            component:loginForm // 组件名称
        },
        {path:"/register",component:registerForm},
    ]
})

• 创建VueRouter对象，并指定路由参数
• routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
  • path：路由的路径
  • component：组件名称

在父组件中引入router对象：

var vm = new Vue({
    el:"#app",
    components:{// 引用登录和注册组件
        loginForm,
        registerForm
    },
    router // 引用上面定义的router对象
})

页面跳转控制：

<div id="app">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <div>
        <!--vue-router的锚点-->
        <router-view></router-view>
    </div>
</div>

• 通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
• 通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

单页应用中，页面的切换并不是页面的跳转。仅仅是地址值变化。

四 webpack

4.1 Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

• 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
• 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
• 将代码打包的同时进行混淆，提高代码的安全性。

4.2 webpack四个概念

• 入口(entry)

　　webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据

• 输出(output)

　　出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。

• 加载器（loader）

　　webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。

• 插件(plugins)

　　插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。

4.3 安装

进入文件下，输入命令：npm install webpack webpack-cli --save-dev

4.4编写webpack配置

webpack.config.js

配置文件中就是要指定上面说的四个核心概念，入口、出口、加载器、插件。

加载器和插件是可选的。先编写入口和出口

4.4.1 入口

webpack打包的起点，可以有一个或多个，一般是js文件。所有的东西都集中在route.html，不是一个js，那怎么办？

新建一个js，把route.html中的部分内容进行集中，然后在index.html中引用这个js。

新建main.js, 然后把原来route.html中的js代码全部移动到main.js中:

// 使用es6的语法导入js模块
import Vue from ‘./vue‘;
import VueRouter from ‘./vue-router‘
import loginForm from ‘./login‘
import registerForm from ‘./register‘

Vue.use(VueRouter)

// 创建VueRouter对象
const router = new VueRouter({
    routes:[ // 编写多个路由规则
        {
            path:"/login", // 请求路径
            component:loginForm // 组件名称
        },
        {path:"/register",component:registerForm},
    ]
})
var vm = new Vue({
    el:"#app",
    components:{// 引用登录和注册组件
        loginForm,
        registerForm
    },
    router
})

要使用import，就需要在login.js和register.js中添加export导出语句：

export default loginForm;

export default registerForm;

 

vue-router使用模块话加载后，必须增加一句：Vue.use(VueRouter)

这样，main.js就成了我们整个配置的入口了。

在webpack.config.js中添加以下内容：

module.exports={
    entry:‘main.js‘,  //指定打包的入口文件
}

4.4.2 出口

出口，就是输出的目的地。一般我们会用一个dist目录，作为打包输出的文件夹。

添加出口配置：

module.exports={
    entry:‘./main.js‘,  //指定打包的入口文件
    output:{
        // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+‘/dist‘,  
        filename:‘build.js‘     //输出的js文件名
    }
}

4.4.3 打包

在控制台输入以下命令：npx webpack --config webpack.config.js

查看dist目录，尝试打开build.js，所有的js合并为1个，并且对变量名进行了随机打乱，这样就起到了 压缩、混淆的作用。

4.5测试  

在route.html中引入刚刚生成的build.js文件，运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--router-link来指定跳转的路径-->
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr/>
        <div>
            <!--vue-router的锚点-->
            <router-view></router-view>
        </div>
    </div>
    <script src="./dist/build.js"></script>
</body>
</html>

4.6 打包css和html

与上面类似，但是webpack默认只支持js加载。要加载CSS，html文件，必须安装各自加载器：

npm install style-loader css-loader --save-dev

npm install html-webpack-plugin --save-dev

五 脚手架 vue-cli

5.1 在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。

5.2 安装

5.3项目结构

5.4 单文件组件

后缀名为.vue的文件，称为单文件组件。

每一个.vue文件，就是一个独立的vue组件。类似于刚才写的loginForm.js和registerForm.js

只不过，在js中编写 html模板和样式非常的不友好，而且没有语法提示和高亮。

而单文件组件中包含三部分内容：

• template：模板，支持html语法高亮和提示
• script：js脚本，这里编写的就是vue的组件对象，上面的data(){}
• style：样式，支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用。

5.5 运行

• 脚本有三个：
  • dev：使用了webpack-dev-server命令，开发时热部署使用
  • start：使用了npm run dev命令，与上面的dev效果完全一样
  • build：等同于webpack的打包功能，会打包到dist目录下。

执行npm run dev 或者 npm start 都可以启动项目。

六 最终项目

• index.html中定义了空的div，其id为app。
• main.js中定义了Vue对象，并且绑定通过id选择器，绑定到index.html的div中，因此main.js的内容都将在index.html的div中显示。
• 而main.js中只有一行内容：<App/>,这是使用了App组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。
• App.vue中也没有内容，而是定义了vue-router的锚点：<router-view>, vue-router路由后的组件将会在锚点展示。
• 最终的结论是：一切路由后的内容都将通过App.vue在index.html中显示。