• Vue框架+Element组件库学习笔记

    一、Vue入门

    vue：是一款前端框架，免除原生JavaScript中的DOM操作（如document.getElementById("文本输入框名").value），简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

    MVVM思想：vue提供ViewModel（VM）实现视图（V）和模型（M）间的双向绑定。

    MVC思想：只能实现模型到视图的单向展示。将模型里的数据取出来存放到视图中。但并不能实现模型与视图间的绑定（模型的数据发生变化视图也自动发生变化）。

    1.1. Vue项目构建

    首先检查是否有webapp目录，如果缺失需要新建。

    第1步：在webapp目录下新建HTML页面，引入Vue.js文件

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

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

    1. <script>
    2. new Vue({
    3.     el:"#app",
    4.     data(){
    5.         return{
    6.             username:""
    7.         }
    8.     }
    9. })
    10. script>

    用new方式立一个Vue对象，里面是javascript对象，el是element代表哪个代码区域用vue来控制，写入一个对应的选择器：

    例如这里el的值“app”对应的是下面视图里的id属性值，代表

    标签所包裹的所有内容都由Vue来控制。

    data里返回一个数据，在这里是username是空。

    第3步：编写视图

    1. <div id="app">
    2.     <input name="username" v-model="username">
    3.     {{username}}
    4. </div>

    id里的值要和vue中el里的值对应，代表将被控制的区域。

    v-model里的值要和上面data数据返回的属性名一致。

    {{username}}

    下面是完整代码： 

    1. <body>
    2.     <div id="app">
    3.         <input v-model="username">
    4.         {{username}}
    5.     </div>
    6. <script src="js/vue.js"></script>
    7.     <script>
    8.         new Vue({
    9.             el:"#app",
    10.             data(){
    11.                 return{
    12.                     username:""
    13.                 }
    14.             }
    15.         });
    16.     </script>
    17. </body>

    第4步：运行

    直接点击浏览器的图标即可访问：

     

    1.2. Vue常用指令


    1. v-bind可以绑定属性值，包括链接等：

    href后面的值url对应的是返回值中的url属性名，表示将视图与模型中url的内容绑定，会出现一个点击一下可跳转的链接，点击即可进入百度首页。

    1. <div id="app">
    2.    <a v-bind:href="url">点击一下</a>
    3.    <a :href="url">点击一下</a>
    4. </div>

    2. v-model可以将用户输入的值绑定到某个模型上。

    3. v-on为HTML标签绑定事件

    注意下面2种书写方式：

    1. <div id="app">
    2.    <input type="button" value="点击按钮" v-on:click="show()"/>
    3.    <input type="button" value="点击按钮" @click="show()"/>
    4. </div>

     

    4. v-if 、v-else-if 、 v-else 用于判断：

    1. <div id="app">
    2.     <div v-if="count == 3">div1</div>
    3.     <div v-else-if="count ==4">div2</div>
    4.     <div v-else>div3</div>
    5.     <br> <input v-model="count">
    6. </div>

    注意这个变量要写在return里面，在方框里输入不同的数字可以实时返回不同结果，很神奇： 

     

    5. v-for用于循环遍历

    addr是一个临时变量，addrs是模型里的数据，是一个数组，{{addr}}是输出数据：

    注意要将

    看作一个整体，循环几次，整个标签就重复出现几次！

    1. <div id="app">
    2.     <div v-for="addr in addrs">
    3.         {{addr}} <br>
    4.     </div>
    5. </div>

       

    可以加个角标i，i默认从0开始

    1. <div id="app">
    2.     <div v-for="(addr,i) in addrs">
    3.         {{i}}--{{addr}} <br>
    4.     </div>
    5. </div>

    1.3. Vue生命周期

    生命周期八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）：

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

    1.4. 案例

    1. 查询所有

    SelectAllServlet代码见ajax，注意需要在pojo目录下添加Brand类，代码如下：

    1. public String getStatusStr(){
    2.   if(this.status == 1){
    3.       return "启用";
    4.   }
    5.   return "禁用";
    6. }

    brand.html代码如下书写： 

    1. <body>
    2. <div id="app">
    3.     <a href="addBrand.html"><input type="button" value="新增"></a><br>
    4.     <table id="brandTable" border="1" cellspacing="0" width="100%">
    5.         <tr>
    6.             <th>序号</th>
    7.             <th>品牌名称</th>
    8.             <th>企业名称</th>
    9.             <th>排序</th>
    10.             <th>品牌介绍</th>
    11.             <th>状态</th>
    12.             <th>操作</th>
    13.         </tr>
    14.         <tr v-for="(brand,i) in brands" align="center">
    15.             <td>{{i+1}}</td>
    16.             <td>{{brand.brandName}}</td>
    17.             <td>{{brand.companyName}}</td>
    18.             <td>{{brand.ordered}}</td>
    19.             <td>{{brand.description}}</td>
    20.             <td>{{brand.statusStr}}</td>
    21.             <td><a href="#">修改</a> <a href="#">删除</a></td>
    22.         </tr>
    23.     </table>
    24. </div>
    25. <script src="js/axios-0.18.0.js"></script>
    26. <script src="js/vue.js"></script>
    27. <script>
    28.     new Vue({
    29.         el: "#app", //设置Vue作用范围就是div标签包裹的部分
    30.         data() {
    31.             return {
    32.                 brands: []
    33.             }
    34.         },
    35.         mounted() { //页面加载完成后，发送异步请求查询数据
    36.             var _this = this;
    37.             axios({
    38.                 method: "get",
    39.                 url: "http://localhost:8080/brand-demo/selectAllServlet"
    40.             }).then(function (resp) {
    41.                 _this.brands = resp.data;
    42.             })
    43.         }
    44.     })
    45. </script>
    46. </body>

    2. 添加

    SelectAllServlet和addServlet代码见ajax，addBrand.html代码如下：

    1. <body>
    2. <div id="app">
    3.     <h3>添加品牌</h3>
    4.     <form action="" method="post">
    5.         品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
    6.         企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
    7.         排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
    8.         描述信息：<textarea rows="5" v-model="brand.description" cols="20" id="description" name="description"></textarea><br>
    9.         状态：
    10.         <input type="radio" v-model="brand.status" name="status" value="0">禁用
    11.         <input type="radio" v-model="brand.status" name="status" value="1">启用<br>
    12.         <input type="button" id="btn" @click="submitForm" value="提交">
    13.     </form>
    14. </div>
    15.  
    16. <script src="js/vue.js"></script>
    17. <script src="js/axios-0.18.0.js"></script>
    18.  
    19. <script>
    20.     new Vue({
    21.         el:"#app",
    22.         data(){
    23.             return{
    24.                 brand:{}
    25.             }
    26.         },
    27.         methods:{
    28.             submitForm(){
    29.                 //2.发送ajax请求
    30.                 var _this = this;
    31.                 axios({
    32.                     method: "post",
    33.                     url:"http://localhost:8080/brand-demo/addServlet",
    34.                     data:_this.brand
    35.                 }).then(function(resp){
    36.                     //判断响应数据是否为success
    37.                     if(resp.data =="success"){
    38.                         location.href="http://localhost:8080/brand-demo/brand.html";
    39.                     }
    40.                 })
    41.  
    42.             }
    43.         }
    44.     })
    45. </script>
    46. </body>

    二、Element组件库

    2.1. Element快速入门

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

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

    第1步：在webapp下导入element-ui，同时还要引入Element的css、js文件和Vue.js，如果没导入会不显示千万小心！注意目录的层次结构：

    1. <script src="js/vue.js"></script>
    2. <script src="element-ui/lib/index.js"></script>
    3. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    4. <script src="js/axios-0.18.0.js"></script>

    第2步：创建Vue核心对象

    1. <script>
    2.     new Vue({
    3.         el:"#app"
    4.     })
    5. </script>

    第3步：官网复制Element组件代码，代码写入：

    1. <div id="app">
    2.     代码书写区域
    3. </div>

    2.2 Element布局

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

    规定布局的宽度为24，每一行可以设置多个组件，分别占据一定的宽度（总宽要是24）。

    <div class="grid-content bg-purple-dark"></div> //暗色模块
    <div class="grid-content bg-purple"></div> //亮色模块

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

    1. <script>
    2.   new Vue({
    3.    el:"#app",
    4.    data() {
    5.      const item = {
    6.         date: '2016-05-02',
    7.         name: '王小虎',
    8.         address: '上海市普陀区金沙江路 1518 弄'
    9.          };
    10.     return {
    11.         tableData: Array(20).fill(item)
    12.        }
    13.    }
    14. })
    15. </script>

    布局注意：将css代码中