1、vue概述

1.1 Vue基本概念

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

mvvm

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>

Java框架（Vue）学习笔记

1、vue概述

1.1 Vue基本概念

1.3 Vue入门案例

1.4 插值表达式

2、常用指令

2.1 v-text指令（文本）

2.2 v-html指令（innerHTML)

2.3 v-bind指令（属性）

2.4 v-model指令（表单）

2.5 v-on指令（事件）

v-on:click

按键修饰符

3、条件语句与循环语句

3.1 v-if 和v-show

3.2 v-for

4、VUE的组件

7.1 什么是组件

7.2 组件的定义方式

a. 定义全局组件

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

2：直接使用 Vue.component 方法

3：通过template模板方式

b. 定义私有组件

c. 组件中的数据（data）

5、VUE的ajax的案例

简介

基本使用

GET请求

POST请求

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Java框架（Vue）学习笔记

1、vue概述

1.1 Vue基本概念

1.3 Vue入门案例

1.4 插值表达式

2、常用指令

2.1 v-text指令（文本）

2.2 v-html指令（innerHTML)

2.3 v-bind指令（属性）

2.4 v-model指令（表单）

2.5 v-on指令（事件）

v-on:click

按键修饰符

3、条件语句与循环语句

3.1 v-if 和v-show

3.2 v-for

4、VUE的组件

7.1 什么是组件

7.2 组件的定义方式

a. 定义全局组件

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

2：直接使用 Vue.component 方法

3：通过template模板方式

b. 定义私有组件

c. 组件中的数据（data）

5、VUE的ajax的案例

简介

基本使用

GET请求

POST请求

热门文章

最新文章

相关课程

相关电子书

相关实验场景