一、 VUE

1. 概述

Vue 是一套 前端框架，免除原生JavaScript中的DOM操作，简化书写。

基于 MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

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

2. 快速入门

（1）新建 HTML 页面，引入 Vue.js文件

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

（2）在JS代码区域，创建Vue核心对象，进行数据绑定

<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:""
            }
        }       
    });

</script>

（3）编写视图

<div id="app">

    <input v-model="username">
    <!--插值表达式-->
    {{username}}

</div>

3. VUE 常用指令

指令： HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如： v-if ， v-for…

3.1 v-bind 指令

v-bind：该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

   <a v-bind:href="url">点击一下</a>

    <a :href="url">点击一下</a>

    <input v-model="url">

</div>

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

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com"
            }
        }
    });

</script>

</body>
</html>

3.2 v-on 指令

在页面定义一个按钮，并给该按钮使用 v - on 指令绑定单击事件

html 代码如下

<input type="button" value="一个按钮" v-on:click="show()">

<input type="button" value="一个按钮" @click="show()">

上面代码绑定的 show() 需要在 Vue 对象中的 methods 属性中定义出来

<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com"
            }
        },
        methods:{
            show(){
                alert("我被点了...");
            }
        }
    });

</script>

3.3 条件判断指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <div v-show="count == 3">div v-show</div>
    <br>

    <input v-model="count">

</div>

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

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                count:3
            }
        }
    });

</script>

</body>
</html>

3.4 v-for 指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>

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

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                addrs:["北京","上海","西安"]
            }
        }
    });

</script>

</body>
</html>

4. 生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

mounted ：挂载完成， Vue 初始化成功， HTML 页面渲染成功。而以后我们会在该方法中 发送异步请求，加载数据。

二、Element

Element ：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等 ~

官网网址是：https://element.eleme.cn/#/zh-CN

1. 快速入门

（1）引入Element 的css、js文件和 Vue.js
<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
（2）创建Vue核心对象
<script>
    new Vue({
        el:"#app"
    })

</script>
（3）官网复制Element组件代码