Java框架（Vue）学习笔记

2021-09-29 12:04:56

1、vue概述

1.1 Vue基本概念

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

1.3 Vue入门案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>快速入门</title>
    <script src="vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        var app = new Vue({
            el:"#app",  //表示要控制的区域
            data:{//存放el中要用到的数据，是M，用来保存每个页面的数据
                message:"Hello world!"
            }
        });
    </script>
</body>
</html>

1.4 插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。

表达式的定义: {{Expressions}}

支持加减乘除四则运算
支持逻辑运算
支持三目运算符

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

2、常用指令

2.1 v-text指令（文本）

v-text会覆盖元素中原本的内容，但是插值表达式，只会替换自己的占位符，不会把整个元素的内容清空。

表达式v-text存在问题：对于值当中存在html元素时，不能渲染成html元素，只能渲染成普通字符串。

<body>
    <div id="app">
        <p v-text="message1">h1</p>
        <p >{{message1}}</p>
        <p v-text="message2"></p>
        <p>{{message2}}</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",  //表示要控制的区域
            data:{//存放el中要用到的数据，是M，用来保存每个页面的数据
                message1:"Hello Amy!",
                message2:"<h1>Hello world!</h1>"
            }
        });
    </script>
</body>s

2.2 v-html指令（innerHTML)

v-html，更新元素的innerHTML。
注意：内容按普通注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

<body>
    <div id="app">
        <p v-text="message2"></p>
        <p v-html="message2"></p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",  
            data:{
                message1:"Hello Amy!",
                message2:"<h1>Hello world!</h1>"
            }
        });
    </script>
</body>

2.3 v-bind指令（属性）

v-bind:Vue中用于绑定属性的指令

实现数据的单向绑定，从M绑定到V，不能实现双向绑定
v-bind会把值当成是js的表达式去处理,可以写合法的表达式
语法格式：v-bind:属性名="model名" ，可以简写成: 属性形式
※ V-bind只能实现数据的单向绑定，从M绑定到V，不能实现双向绑定。

<body>
    <div id="app">
        <p v-bind:title="message1">绑定属性，请使用浏览器工具查看title属性</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",  
            data:{
                message1:"我是新的title"
            }
        });
    </script>
</body>

v-bind的简写格式

<a v-bind:href="urlx">v-bind的完整格式</a>
<a :href="urlx">v-bind的简写格式</a>

2.4 v-model指令（表单）

运用在表单元素当中，实现数据的双向绑定，从V->M，或从M->V .
v-model会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。使用时应该通过 JavaScript 在组件的 data 选项中声明初始值。

<body>
    <div id="app">
        <p>{{message}}</p>
        <input v-model="message" size="50">
    </div>
    <script>
        var app = new Vue({
            el:"#app",  
            data:{
                message:"我就是我，不一样的烟火"
            }
        });
    </script>
</body>

2.5 v-on指令（事件）

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

绑定事件监听器。事件类型由参数指定。
表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。可以缩写成@
需要在Vue对象中通过methods属性定义事件处理方法。
用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
※ 不能在v-on属性中直接写JS代码

v-on:click

<body>
    <div id="app">
        <p>{{message}}</p>
        <button v-on:click="fun('good')">坐看云起时</button>
    </div>
    <script>
        var app = new Vue({
            el:"#app",  
            data:{
                message:"我就是我，不一样的烟火，不要想改变我"
            },
            methods:{
                fun:function(msg){
                    this.message=msg;
                }
            }
            
        });
    </script>
</body>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

<body>
    <div id="app">
        <input type="text" @keyup.enter="fun1">
    </div>
    <script>
        new Vue({
            el:'#app',
            methods:{
                fun1:function(){
                        alert("按了Enter键");
                    }
            }
        });
    </script>

</body>

简写形式

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

3、条件语句与循环语句

3.1 v-if 和v-show

指令v-if、v-else、v-else-if用于条件控制，根据表达式的值来决定是否渲染元素。v-if: 每次都都删除或创建元素。有较高的切换性能消耗。涉及到频繁的切换，最好不要使用v-if。

v-show指令：不会重新进行DOM的删除、创建操作，只是切换了display csss属性。有较高的初始渲染消耗。当元素可能永远不会显示给用户，则使用v-if。

<body>
    <div id="app">
        <div v-if="level=='A'">我是Amy</div>
        <div v-else-if="level=='B'">我是Belly</div>
        <div v-else-if="level=='C'">我是Cindy</div>
        <div v-else>我是我自己，不是其他任何谁</div>
        <div v-show="flag">放我出来，你们这些妖孽</div>
        <button @click="toggle">切换</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                level:'D',
                flag:false
            },
            methods:{
                toggle:function(){
                        this.flag = !this.flag;
                    }
            }
        });
    </script>

</body>

3.2 v-for

循环使用 v-for 指令：需要以 item in items 形式的特殊语法。

迭代数组：items 是源数据数组并且 item 是数组元素迭代的别名。
迭代对象：Items可以是对象，迭代属性。Item可以为value，key，index格式，默认为value。
迭代整数：Items 可以是整数，迭代1~n之间的整数。
迭代字符串：items为字符串，迭代字符串中的每个字母，会去掉开头和结尾的空格符。

<body>
    <div id="app">
        <h3>迭代数字</h3>
        <span v-for="n in 5">{{n}},</span>
        <h3>迭代数组</h3>
        <table>
            <tr v-for="itemx in arrary">
                <td>{{itemx.name}}</td>
            </tr>
        </table>
        <h3>迭代对象</h3>
        <p v-for="attr in people">{{attr}} </p>
        <p v-for="(value, key,index) in people">{{index}}:{{key}}:{{value}} </p>
        
        <h3>迭代字符串</h3>
        <span v-for="item in sentence">{{item}}</span>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                arrary:[{name:'xiaoming'},{name:'xiaofei'},{name:'tingting'}],
                people:{name:'Amy',age:15,sex:'女'},
                sentence:" I go to school every day    "
            }
            
        });
    </script>

</body>

4、VUE的组件

7.1 什么是组件

组件的出现，是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，去调用相应的组件即可。

组件和模块化的区别：

模块化：是从代码逻辑角度划分的，方便代码分层开发，保证每个功能模块的职能单一。

组件：是从UI界面的角度划分的，前端组件化，方便UI的重用。

7.2 组件的定义方式

组件的命名方式

①kebab-case，单词之间采用 - （短横线）连接，例如：my-component ，在DOM中使用时，

②PascalCase，驼峰式名称，单词之间，首字母大写，例如：MyComponent，但是在DOM中使用时，必须更改为，，是识别不了的。

a. 定义全局组件

1：通过Vue.extend()和Vue.component()注册

使用Vue.extend定义组件对象，并使用Vue.component(‘组件名’，组件对象)来注册组件

※※无论使用何种方式，创建出来的元素必须有且仅有一个根元素。

<body>
    <div id="app">
        <my-com1></my-com1>
    </div>
</body>
<script>
    //使用Vue.extend来创建全局组件
    var com1 = Vue.extend({
        template:"<h3>我是新组件</h3>"
    });
    //使用Vue.component('组件名',组件对象)声明组件；
    Vue.component("myCom1",com1);

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

2：直接使用 Vue.component 方法

Vue.component('register', { template: “组件展示的内容” })

<body>
    <div id="app">
        <my-com1></my-com1>
    </div>
</body>
<script>
    Vue.component("myCom1",{template:"<h3>我是新组件-小V</h3>"});

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

3：通过template模板方式

※：template模板需定义在Vue的控制范围外

<body>
    <div id="app">
        <mycom1></mycom1>
    </div>
    <template id="temp1">
        <div>
            <h3>凉州词</h3>
            <h3>望洞庭</h3>
        </div>
    </template>
</body>
<script>
    Vue.component("mycom1",{
        template:"#temp1"
    });

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

b. 定义私有组件

局部组件定义在vue实例内部，该组件只能在vue实例控制范围内才能使用

定义方法：使用components属性定义组件

<body>
    <div id="app">
        <cmp1></cmp1>
        <cmp2></cmp2>
    </div>
    <template id="cmp2template">
        <h1>我的私有组件二</h1>
    </template>
</body>
<script>
    new Vue({
        el:'#app',
        components:{
            "cmp1":{template:"<h1>我的私有组件一</h1>"},
            "cmp2":{template:"#cmp2template"}

        }
    });
</script>

c. 组件中的数据（data）

组件中可以有自己的data属性。

组件中的data是一个funciton，且需要通过return返回一个对象。

<script>
        Vue.component("cmp1",{
            template:"<div>我是组件1---{{msg}}</div>",
            data:function(){
                    return {msg:"我是组件的data"}
                }
            });
        Vue.component("cmp2",{template:"<div>我是组件2</div>"});
        new Vue({
            el:"#app"
        });
</script>

5、VUE的ajax的案例

简介

vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。

axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。

基本使用

语法规则：axios([options])

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<h2>Hello World!</h2>

    <div id="app">

        <input type="button" value="查询用户" @click="getMsg">
        {{ msg }}
        <table>
            <tr><td>编号</td><td>姓名</td><td>生日</td></tr>
            <tr v-for="value in msg"><td>{{value.id}}</td><td>{{value.name}}</td>
                <td>{{value.birth}}</td></tr>
        </table>
    </div>

<script src="${pageContext.request.contextPath}/jquery/vuejs-2.5.16.js"></script>
<script src="${pageContext.request.contextPath}/jquery/axios.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"msg111"
        },
        methods:{
            getMsg:function(){
                var that = this;
                // alert(1);
                axios({
                    method:"get",
                    url:"users",
                }).then(function(response){
                        console.log(response.data);
                        that.msg = response.data;
                    }).catch(function(error){
                    console.log(error);
                })
            }
        }
    });
</script>
</body>
</html>

GET请求

语法规则：axios.get(url[,options]);

传参方式：
（1）通过url传参axios(‘url?key=value&key1=val2’).then();
（2）通过params选项传参 axios(‘url’,{params:{key:value}}).then();

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"msg111"
        },
        methods:{
            getMsg:function(){
                axios.get("json/data.json")
                    .then(function(response){
                        var data =eval("(" +response.data +")")
                        document.getElementById("temp").innerHTML=data.msg;
                    
                    }).catch(function(error){
                    console.log(error)
                })
            }
            
        }
    });
</script>

POST请求

axios.post(url,data,[options]);

axios默认发送数据时，数据格式是Request Payload，并非常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传。

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"msg111"
        },
        methods:{
            getMsg:function(){
                axios.post("json/data.json","name=zhangsan")
                    .then(function(response){
                        console.log(response.data)
                    
                    }).catch(function(error){
                    console.log(error)
                })
            }
        }
    });
</script>

码农公寓