第四章 Vue - 《JavaEE 实训笔记》

一、快速入门
二、第一个Vue程序
- 1. HelloWorld
三、Vue基本语法
四、Vue双向绑定 v-model
五、Vue组件
六、Axios通信
- 1. 什么是Axios
- 2. 为什么要使用Axios
七、Vue脚手架vue-cli的使用
八、参考柯老师的语雀

一、快速入门

1. VUE 概述

Vue (读音 /vju/，类似于 view) 是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。
是一套用于构建用户界面的渐进式框架（“渐进式框架” 非常简单，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。）。Vue 被设计为可以自底向上逐层应用。
MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。

2. MVVM编程思想

MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染M（model）：普通的javascript数据对象
V（view）：前端展示页面
VM（ViewModel）：用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例

至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

3. VUE核心功能

基础功能：页面渲染、表单处理提交、帮我们管理DOM(虚拟DOM)节点
组件化开发：增强代码的复用能力，复杂系统代码维护更简单

前端路由：更流畅的的用户体验、灵活的在页面切换已渲染组件的显示，不需与后端做多余的交互
状态集中管理：MVVM响应式模型基础上实现多组件之间的状态数据同步与管理
前端工程化：结合webpack等前端打包工具，管理多种静态资源，代码，测试，发布等，整合前端大型项目。

二、第一个Vue程序

官网：https://cn.vuejs.org/v2/guide/

1. HelloWorld

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app"> 
            <h1 v-once>{{name}},非常帅！！</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
      // 1.new vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的
            let vm=new Vue({
                el: "#app",   // 挂载的模板
                data: {       // 绑定的数据  当数据属性的值发生改变时，视图会进行重新渲染， 响应式的
                    name: "张三"
                }
            });
    </script>
</html>

Vue在线cdn:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

三、Vue基本语法

1. v-bind

现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。
我们可以使用v-bind来绑定元素属性！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Vue</p>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
    <button v‐bind:disabled="disabled">禁用按钮</button>
</div>
</body>
<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello,vue",
            disabled: true
        }
    })
</script>
</html>

vue 还提供了指令 vbind 的简写方式，可以直接通过:属性名的方式。

2. v-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<p>Vue</p>
<!--view层 模板-->
<div id="app">
   <h1 v-if="type==='A'">A</h1>
   <h1 v-else-if="type==='B'">B</h1>
   <h1 v-else>C</h1>
</div>
</body>
<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
   var vm = new Vue({
       el: "#app",
       data: {
           type: "A"
       }
   })
</script>
</html>

3. v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Vue</p>
<!--view层 模板-->
<div id="app">
    <li v-for="item in items">
        姓名：{{item.name}}，年龄：{{item.age}}
    </li>
</div>
</body>
<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {name: "zhangsan", age: 12},
                {name: "lisi", age: 10},
                {name: "wangwu", age: 16}
            ]
        }
    })
</script>
</html>

4. v-on 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Vue</p>
<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi">Click Me</button>
</div>
</body>
<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "你点我干嘛？"
        },
        methods: {
            //方法必须绑定在Vue的Methods对象中，v-on:事件
            sayHi: (function (event) {
                alert(this.message)
            })
        }
    })
</script>
</html>

5. 计算属性和侦听器

计算属性 VS 方法
如果不使用计算属性，在 methods 里定义了一个方法，也可以实现相同的效果，甚至该方法还可以接受参数，使用起来更灵活。
既然 methods 同样可以解决模板中复杂逻辑计算的问题，那么为什么还需要使用计算属性呢?
原因就是：计算属性是基于它的依赖缓存的。前面我们介绍过，计算属性的改变取决于其所依赖数据的变化，所以只要依赖数据不发生改变，计算属性就不会更新。当我们重复获取计算属性时它也不会重复计算，只会获取缓存的值。而我们每次调用 methods 都会重新计算一遍，这样将会消耗一部分性能。当然，如何你不希望对数据进行缓存，那么可以用方法来代替。
侦听器
通过侦听器来监听数据的变化，进行相应的逻辑处理。
如何监听对象类型数据的某个属性进行侦听。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性和侦听器</title>
</head>
<body>
    <div id="app">
        <!-- 实现一个购物车功能
        1. 数据初始化处理
        2.计算商品总价
        3.选择商品数量：当商品数量超过库存做提示
        -->
        <ul>
            <li v-for="(item, index) in car" >
            {{item.pname}} --- 商品价格：{{item.price}} --- 库存：{{item.stock}}
            数量：<input type="number" v-model="item.num" style="width: 30px;" />
            </li>
            <li><strong>总价:</strong>{{calcSum}}</li>
            <li v-html="message"></li>
            <li v-html="warn()"></li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                car:[
                    {pname:'Iphone 12',price:7999,stock:10,num:1},
                    {pname:'小米11',price:3599,stock:3,num:4},
                ],
                message:"",
            },
            // methods : 当方法中使用的数据发生改变，方法会自动调用
            methods: {
                // calcSum(){
                //     let sum=0;
                //     this.car.forEach(item => {
                //         sum+=item.price*item.num;
                //     });
                //     return sum;
                // }
                warn(){
                    let message="";
                    this.car.forEach(item => {
                        if(item.num>item.stock){
                            message+=`${item.pname}的库存超出限制<br/>`
                        }
                    });
                    return message;
                }
            },
            // 计算属性: 当方法中使用的数据发生改变，方法会自动调用
            computed:{
                 calcSum(){
                    let sum=0;
                    this.car.forEach(item => {
                        sum+=item.price*item.num;
                    });
                    return sum;
                }
            },
            // 侦听器 专门用于侦听数据的变化，当数据发生变化会自动调用方法
            watch:{
                // 要侦听的数据: 数组
                car:{
                    handler(newvalue,oldvalue){ 
                        this.message="";
                        this.car.forEach(item => {
                            if(item.num>item.stock){
                                this.message+=`${item.pname}的库存超出限制<br/>`
                            }
                        });
                    },
                    deep:true   //深度侦听器
                },
                // 基础类型的侦听， 将侦听数据作为函数就可以了  
                message(newvalue,oldvalue){
                    console.info(newvalue,oldvalue)
                }
            }
        });
        /*
        方法和计算属性的区别：
            声明发生不一样，调用不一样方法要用(), 计算属性调用不要加()
        */
        /*
        方法和侦听器的区别：
            方法： 方法中任意数据发生了改变就会自动调用方法
            可以调用，进行返回值
            侦听器：需要指定具体的侦听数据，只有被具体指定的侦听数据发生了改变才会触发
            不能像方法那样去调用， 而是靠vue自动触发
        */
    </script>
</body>
</html>

6. 过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
</head>
<body> 
    <div id="app">
        <ul>
            <li v-for="user in userList">
                姓名:{{user.name}}；性别:{{formateGender(user.gender)}}
                {{user.gender | filterGender}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script> 
        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'xushu', gender: 1 },
                    { id: 2, name: 'zhuge', gender: 0 }
                ]
            },
            methods: {
                formateGender(gender){
                    if(gender==1){
                        return "~男"
                    }else{
                        return "~女"
                    }
                }
            },
            // 专门针对数据过滤
            filters:{
                filterGender(gender){
                    if(gender==1){
                        return "!男"
                    }else{
                        return "!女"
                    }
                }
            }
        })
    </script>
</body>
</html>

四、Vue双向绑定 v-model

1. 什么是双向绑定

Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

2. 为什么要实现数据的双向绑定

在Vue.js 中，如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。

3. 在表单中使用双向数据绑定

你可以用v-model指令在表单、及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。<br /> <strong>注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明。</strong></p> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <div id="app"> 下拉框： <select v-model="selected"> <option value="" disabled>-请选择-</option> <option>A</option> <option>B</option> <option>C</option> </select> <p>value:{{selected}}</p> </div> </body>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data: { selected: "" } }) </script> </html> </code></pre> <pre><code class="lang-vue"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div > <label>年龄：</label> <input v-model="age"/> </div> <div>当前输入的年龄是: {{age}}</div> <button v-on:click="add">加一岁</button> <button v-on:click="alertYear">弹出年龄</button> <hr> <label>课程：</label> <select v-model="course"> <option value="java">java</option> <option value="html">html</option> <option value="csss">css</option> </select> <div> <input v-model="course" type="radio" name="course" value="java">java <input v-model="course" type="radio" name="course" value="html">html <input v-model="course" type="radio" name="course" value="csss">csss </div> <div>当前课程是:{{course}}</div> </div> </body> <script src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { course:'html', age: 10 }, methods: { add(){ this.age++; }, alertYear() { alert(this.age) } } }) // v-model 用于实现双向绑定一般用在表单元素 </script> </html> </code></pre> <p><a name="wnoRZ"></a></p> <h2 id="bo9ref"><a name="bo9ref" class="reference-link"></a><span class="header-link octicon octicon-link"></span>五、Vue组件</h2><p> 组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：</p> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <div id="app"> <qinjiang v-for="item in items" v-bind:qin="item"></qinjiang> </div> </body>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> Vue.component("qinjiang",{ props: ['qin'], template: '<li>{{qin}}</li>' }) var vm = new Vue({ el: "#app", data: { items: ['Java','Python','Php'] } }) </script> </html> </code></pre> <p>我们可以通过调用 Vue.component 的方式来定义全局组件，它接收两个参数：1. 组件名，2. 组件属 <br />性对象。 <a name="XZNW2"></a></p> <h2 id="fyzekp"><a name="fyzekp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>六、Axios通信</h2><p><a name="drLy5"></a></p> <h3 id="4niors"><a name="4niors" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. 什么是Axios</h3><p>Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:</p> <ul> <li>从浏览器中创建XMLHttpRequests</li><li>从node.js创建http请求</li><li>支持Promise API [JS中链式编程]</li><li>拦截请求和响应</li><li>转换请求数据和响应数据</li><li>取消请求</li><li>自动转换JSON数据</li><li>客户端支持防御XSRF (跨站请求伪造) <a name="f4rpa"></a><h3 id="8epovg"><a name="8epovg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 为什么要使用Axios</h3>由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !<br /><strong>模拟Json数据：</strong><pre><code class="lang-json">{ "name": "weg", "age": "18", "sex": "男", "url":"https://www.baidu.com", "address": { "street": "文苑路", "city": "南京", "country": "中国" }, "links": [ { "name": "bilibili", "url": "https://www.bilibili.com" }, { "name": "baidu", "url": "https://www.baidu.com" }, { "name": "cqh video", "url": "https://www.4399.com" } ] } </code></pre> ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head><body>  <div id="vue"> <div>{{info.name}}</div> <a v-bind:href="info.url">点我进入</a> </div> </body> </li></ul>  <p> </p> <p></p> <script> <pre><code>var vm = new Vue({ el: "#vue", data: { items: ['Java','Python','Php'] }, //data:vm的属性 //data():vm方法 data(){ return{ //请求的返回参数,必须和json字符串一样 info:{ name: null, age: null, sex: null, url: null, address: { street: null, city: null, country: null } } } }, //钩子函数，链式编程，ES6新特性 mounted(){ axios.get("../data.json").then(res => (this.info=res.data)) } }) </code></pre><p></script> </html> ``` <a name="q6eH1"></a></p> <h2 id="d07eoy"><a name="d07eoy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>七、Vue脚手架vue-cli的使用</h2><ul> <li><p>Node.js : <a rel="nofollow" href="http://nodejs.cn/download/">http://nodejs.cn/download/</a></p> <pre><code> 安装就无脑下一步就好,安装在自己的环境目录下 </code></pre></li><li><p>Git : <a rel="nofollow" href="https://git-scm.com/downloads">https://git-scm.com/downloads</a></p> <pre><code> 镜像:[https://npm.taobao.org/mirrors/git-for-windows/](https://npm.taobao.org/mirrors/git-for-windows/)<br />1.安装完成 Git 后，正式使用git前，是需要进行一些全局设置的，如用户名、邮箱。<br />设置的主要命令是 git config :<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22772994/1655088940277-84c7f023-e4b4-47b5-bc9e-af2cba6d89df.png#clientId=u52f43a4a-2a1c-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ud60d779c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=159&originWidth=1013&originalType=url&ratio=1&rotation=0&showTitle=false&size=31071&status=done&style=none&taskId=u71f49eb2-92bf-4327-8f45-17a132ad68b&title=)<br />$ git config --global user.name "John Doe" <br />$ git config --global user.email johndoe@example.com<br />其中， --global 指定为全局配置，不使用该参数，则为当前所在仓库配置。 </code></pre></li></ul> <p><strong>确认nodejs安装成功:</strong><br />cmd 下输入 node -v,查看是否能够正确打印出版本号即可!<br />cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!<br />这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!</p> <blockquote> <p> npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。</p> </blockquote> <p><a name="TIhH6"></a></p> <h2 id="eiazue"><a name="eiazue" class="reference-link"></a><span class="header-link octicon octicon-link"></span>八、参考柯老师的语雀</h2><p><a rel="nofollow" href="https://www.yuque.com/asange-3skzu/olztbh/qx6m6m">https://www.yuque.com/asange-3skzu/olztbh/qx6m6m</a></p>