前端基础--Vue2

前端技术发展史(了解)

1.前端历史

1.1.静态网页

1990 html

1.2.异步刷新-操作dom

1995 javascript

1.3.动态网站

Asp/jsp（java）,php等，后台臃肿

1.4.Ajax成为主流

异步请求

1.5.Html5

被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范。

2.Nodejs介绍

2.1.介绍

官方解释：

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1] 让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的[脚本语言]

Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统。

简单理解：Nodejs是一个JavaScript运行环境，让JavaScript开发服务端代码成为可能

2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。（类似打造java的开源生态）目前已经是世界最大的包模块管理系统。 NPM相当于java 中的 maven,NPM(管理js插件的)

简单理解：Npm是在Nodejs平台上的js包管理系统，如安装jquery：npm install jquery , 为了方便理解下面有一个对比：

JDK、JRE(java开发、运行平台)	Nodejs(JS运行平台)
后端应用开发	前端应用开发
Maven：管理jar包	NPM：管理JS库
springboot+SSM架构开发项目	VUE技术栈，React技术

随后，在node的基础上，涌现出了一大批的前端框架：Angular（MVC->MVVM）,Vue(MVVM)等等

2.2.主流前端框架

前端框架三巨头：

Vue.js:vue.js以轻量易用著称
React.js:vue.js和React.js发展速度最快，集web前端与app于一身技术
AngularJS:AngularJS是曾经的老大。

Nodejs和VUE的安装

vue的安装方式有两种，

手动下载VUE的js库，然后在html中导入JS库进行开发
通过Npm安装VUE的JS库，然后在html中导入使用

第一种方式我们玩其他JS库的时候一直都在用，我们主要使用Npm来安装VUE

1.Nodejs的安装

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

1.1.安装Nodejs

Nodejs自带npm，安装好Nodejs就安装好了npm

NodeJs下载：Node.js — Download Node.js®
安装：双击安装，如果是绿色版，直接解压缩，配置环境变量
升级：npm install npm@latest -g [不升级]
测试Node：cmd -> node -v
测试Npm： cmd -> npm -v
淘宝镜像：npm config set registry https://registry.npmmirror.com

1.2.cnpm的使用（可用可不用）

淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟一次以保证尽量与官方服务同步。

安装：命令提示符执行 npm install cnpm -g --registry=https://registry.npm.taobao.org
测试cnpm ：cnpm -v

2.VUE的安装

我们在IDEA中创建一个静态项目，通过Terminal来安装VUE

安装vue

使用CDN方式

Vue有两种使用方式，1是使用cdn方式直接引入JS库，2.使用Npn安装VUE库，第一种方式如下：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

当然也可以手动下载该JS库到本地项目，然后引入JS库

使用NPM安装VUE

使用Terminal初始化：npm init -y

改名了是初始化NPM，会在项目中产生一个package.json文件。
安装vue：

全局安装（不推荐）：npm install -g vue

局部安装（推荐）：npm install vue

安装成功后VUE的JS库：node_modules/vue/dist/vue.js

[注意] 项目的名称不能使用“vue”，不然会报错

NPM相关命令

全局安装: npm install -g vue（安装工具vue-cli,webpack）

局部安装: npm install vue@2.6.10(vue,jquery,仅仅是我们这个项目要用到js库)

查看模块: npm list vue

卸载模块: npm uninstall vue

更新模块: npm update vue

运行工程: npm run dev/test/online

编译工程: npm run build

注意:

一般来说,js库我们都局部安装就可以了

Vue组件

1. 什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签<mycomponent>，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 vue.js 特性进行了扩展的原生 HTML 元素。

总结:Vue组件是用来完成特定功能的一个自定义的HTML标签 例如:

<body>
    <mytag></mytag>
</body>

注意: mytag就是一个组件, 该组件必须通过Vue为mytag赋予一定的功能

2. 组件的作用

组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码。封装重复利用

3. 组件的分类

组件分为全局组件和局部组件

全局组件：在所有vue实例中(.在它所挂载元素下面有效)有效

局部组件：在自己vue实例中(.在它所挂载元素下面有效)有效

3.1. 全局组件

语法：

Vue.component("自定义标签的名字",{配置对象})

特点：

全局组件可以在任何被挂载的标签中使用.

全局组件的配置对象中必须包含template属性

注意事项：

template中的html必须在一个标签中. 仅且只能有一个根节点

应用场景：

如果该组件的特定功能需要在任何被挂载的标签中使用. 推荐使用全局组件

<div id="app">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>

<div id="app1">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
-------------------------------------------------------------------------------
//定义第一个全局组件
Vue.component("mycomponent1",{
    template : "<h1>这是第一个全局组件</h1>"
})

//定义第二个全局组件
var component2Config = {
    template : "<h1>这是第二个全局组件</h1>"
};
Vue.component("mycomponent2",component2Config);

var app = new Vue({
    el: "#app",
    data: {
    }
});

var app1 = new Vue({
    el: "#app1",
    data: {
    }
});

3.2. 局部组件

语法：

var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部组件的名字1" : {组件的配置对象},
        "局部组件的名字2" : {组件的配置对象}
    }
  });

特点：

局部组件只能够在所挂载的标签中使用

<div id="app1">
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <mycomponent></mycomponent>
</div>


//>>1. 在id=app1挂载的实例的components中定义局部组件
var app1 = new Vue({
    el: "#app1",
    data: {},
    components : {
        "mycomponent" : {
            template : "<h1>这是一个局部组件</h1>"
        }
    }
});

//>>2. 在id=app2的标签中是不能够使用上面app2对象的局部组件.
var app2 = new Vue({    
    el: "#app2",
    data: {}
});

4. 组件使用两种HTML模板

两种方式：

直接在template属性写上html代码字符串或者变量指定

<!--
<template id="mytemplate">
    <h1>template标签中的html</h1>
</template>

<script type="text/template" id="mytemplate">
    <h1>template标签中的html</h1>
</script>
-->

将当前网页中的html标签作为模板代码 (大量的HTML不用拼装HTML字符串) a. 在网页中定义template标签或者script标签包含模板中需要的html模板代码

<!--
"mycomponent2":{
      template: "#mytemplate" ,  #代表找到对应的html代码作为当前组件的模板代码
}
-->

代码：

<div id="app4">
    <mycomponent4></mycomponent4>
</div>

<!--   <template id="mytemplate">
       <h1>template标签中的html</h1>
   </template-->>
<script type="text/template" id="mytemplate">
    <h1>template标签中的htmlssssssssssssssss</h1>
</script>

<script type="text/javascript">
    var app4 =  new Vue({
        el:"#app4",
        components:{
            "mycomponent4":{
                template:"#mytemplate"
            }
        }
    });
</script>

5. 组件中的数据必须是函数

组件中数据的定义 语法：

"组件的名字":{
    template: "",
    data : function(){
        return {
          键1:值1,
          键2:值2
        }
    }
}

注意事项：

data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
只能够在各自的组件模板中使用各自的组件中的data数据
Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.

components:{
    "mycomponent1":{
        // "template":"#templateStr1"
        "template":"#templateStr2",
            //模板是定义数据以下是可行的
            //1 必须是函数
            //2 通过return返回数据对象
            //3 如果有多个数据就是对象对象多个属性及值
            data(){
                return {
                    messaage:"jjjj",
                    yhptest:"xxxxxxxxxxxxxx"
                }
        }
    }
}

测试代码：

<body>

    <div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mytemplate">
        <form method="post">
            {{name1}}:<input type="text" /> <br>
            密码:<input type="password" /><br>
            <input type="button" @click="login" value="登录" />
        </form>
    </template>

<script type="text/javascript">

   var mytabConfig = {
       template:"#mytemplate",
       data(){
           return {"name1":"xxxx"}
       }
   }
   Vue.component("mycomponent",mytabConfig);
   var app = new Vue({
       el: "#app",
       data: {
       }

   });

</script>
</body>

路由Vue-router(必须搞定)

1. 什么是路由

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。

官方地址：Vue Router | Vue.js 的官方路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

我们访问不同地址要有不同组件响应，需要对url和对应的组件做路由映射。 Vue Router 是 Vue.js 官方的路由管理器

npm install vue-router@3.0.1

2. 路由入门

在js中定义路由；

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

挂载到一个dom元素上，使用路由。定义路由出口

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>10_vue路由.html</title>
    <script src="node_modules/vue/dist/vue.js" type="text/javascript"></script>
    <script src="node_modules/vue-router/dist/vue-router.js" type="text/javascript"></script>
</head>
<body>

    <!--
    步骤分析：
       1 下载vue-router npm i vue-router@3.0.1
       2 导入进入  <script src="node_modules/vue-router/dist/vue-router.js">
       3 定义路由
          3.1 定义路由所需要组件
          3.2 定义路由规则-哪个地址跳转到哪个组件
          3.3 通过路由规则创建路由对象
       4 把路由对象挂载到vue实例
       5 显示
         5.1 定义显示区域
         5.2 超链接跳转-通过超链接地址和路由规则可以找到组件，把组件渲染到显示区域
     -->
    <div id="myDiv">
        <!--5.2 超链接跳转-->
        <router-link to="/index">首页</router-link>
        <router-link to="/product">产品</router-link>
        <router-link to="/about">关于我们</router-link>
        <!--5.1 定义显示区域-->
        <router-view></router-view>
    </div>
    <script  type="text/javascript">
        // 3.1 定义路由所需要组件
        let index = Vue.component("index",{
            template:"<h3 style='color: red' onclick='alert(1)'>index</h3>"
        })
        let product = Vue.component("product",{
            template:"<h3 style='color: pink' onclick='alert(3)'>product</h3>"
        })
        let about = Vue.component("about",{
            template:"<h3 style='color: yellow' onclick='alert(2)'>about</h3>"
        })
        //3.2 定义路由规则-哪个地址跳转到哪个组件
        const routes = [
            {path:"/index",component:index},
            {path:"/product",component:product},
            {path:"/about",component:about}
        ]

        //3.3 通过路由规则定义路由
        const  router = new VueRouter({
            //routes:routes
            routes //等价于上面那一句，根据同名原则匹配
        })


        new Vue({
            el:"#myDiv",
            data:{
            },
            methods:{
            },
            //4 把路由挂载到vue实例
            //router:router
            router //等价于上面那一句，根据同名原则匹配
        });
    </script>

</body>
</html>

写在最后:Vue是当前主流的前端开发框架，这篇文章对vue进行了简单介绍，希望能够给大家带来帮助。