Vue，Element

1，Vue

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

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

1.1 Vue快速入门

1.1.1 新建HTML页面，引入Vue.js文件

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

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

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

1.1.3 编写试图

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

1.2 Vue常用指令

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

常用指令:

指令	作用
v-bind	为HTML标签绑定属性值，如设置href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

1.2.1 v-bind

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

<!--
    v-bind可以省略
-->
<a :href="url">点击一下</a>

1.2.2 v-model

<input v-model="url">

<input name="username" v-model="username">

1.2.3 v-on

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

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

//vue:
new Vue({
    el:"#app",
    methods:{
        show(){
            alert("我被点了...")
        }
    }
});

1.2.4 v-if,v-else,v-else-if

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

1.2.5 v-show

<div v-show="count == 3">div v-show</div>

1.2.6 v-for

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

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

//0--北京
//1--上海
//2--西安

1.3 Vue生命周期

生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂栽完成
beforeUpdate	更新前
updated	更新后
beforeDestory	销毁前
destoryed	销毁后

 mounted:挂载完成，Vue初始化成功，HTML页面渲染成功

        发送异步请求，加载数据

vue:
new Vue({
   mounted(){
       alert("加载完成...")
   }
});

2，Element

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

组件:组成网页的部件，例如超链接、按钮、图片、表格等等~

2.1 快速入门

2.1.1 引入Element的css,js文件和Vue.js

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2.1.2 创建Vue核心对象

<script>
    new Vue({
        el:"#app"
    })
</script>

2.1.3 官网复制Element组件代码

2.2 Element布局

2.2.1 Layout布局

通过基础的24分栏，迅速简便地创建布局

2.2.2 Container布局容器

用于布局的容器组件，方便快速搭建页面的基本结构

2.3 Element常用组件