Vue&Element

1.VUE

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

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

1.
<a v-bind:href="url">百度一下</a>
2.
<!--
	v-bind 可以省略
-->
<a :href="url">百度一下</a

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

• v-model
  该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：

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

• v-on

我们在页面定义一个按钮，并给该按钮使用 v-on 指令绑定单击事件，html代码如下

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

而使用 v-on 时还可以使用简化的写法，将 v-on:替换成@`，html代码如下

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

• 条件判断指令

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

• v-for 指令
  该指令使用的格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

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

  1.生命周期

2.Element

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

  1.Element 使用配置

• 1.将 element-ui 文件夹直接拷贝到项目的 webapp 下。目录结构如下
• 2.创建页面，并在页面引入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">

• 3.创建Vue核心对象
  Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象

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

• 4.官网复制Element组件代码

  1.Element 布局

需要哪个组件可以去官网上去找相关去复制并修改为自己所需要的。
Element 提供了两种布局方式，分别是：

• Layout 布局
• Container 布局容器