vue基本操作2.x

第一个vue程序

么是MVVM

MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS

为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

（1）View

View是视图层，也就是用户界面。前端主要由HTH L和csS来构建，为了更方便地展现vi eu to del或者Hodel层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker，Thyme leaf等等，各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。

（2）Model

Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

（3）ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的

比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)

视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。 MVVM框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护View Model，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。 View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

Vue

Vue(读音/vju/，类似于view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合。

（1）MVVM模式的实现者

Model：模型层，在这里表示JavaScript对象
View：视图层，在这里表示DOM(HTML操作的元素)
ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而View Model就是定义了一个Observer观察者

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

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

（2）为什么要使用Vue.js

轻量级，体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
移动优先。更适合移动端，比如移动端的Touch事件
易上手，学习曲线平稳，文档齐全
吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高

第一个Vue程序

【说明】IDEA可以安装Vue的插件! 注意：Vue不支持IE 8及以下版本，因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。

（1）下载地址

开发版本
- 包含完整的警告和调试模式：https：//yuejs.org/js/vue.js
- 删除了警告， 30.96KB min+gzip：https：//vuejs.org/js/vue.min.js
CDN
- <script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

第一步

创建以html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

第二步

引入vue.js

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

3,创建一个vue实例

<script>
    let vue=new Vue({
       el : "#vue",
        data : {
           message:"第一个vue程序"
        }
    });
</script>

说明：

el: '#vue'：绑定元素的ID
data:{message:'第一个vue程序'}：数据对象中有一个名为message的属性，并设置了初始值第一个vue程序

4、将数据绑定到页面元素

<!--view层，模板-->
<div id="app">
    {{message}}
</div>

完整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
   {{message}}
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vue=new Vue({
       el : "#app",
        data : {
           message:"第一个vue程序"
        }
    });
</script>
</body>
</html>

vue的基本语法

v-bind

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

给元素的属性赋值
可以给已经存在的属性赋值 input value
也可以给自定义属性赋值 mydata
语法在元素上 v-bind:``属性名="常量||变量名"
简写形式 :``属性名="变量名"

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style>
     .aClass{
         color: aqua;
     }
     .bClass{
         font-size: 20px;
     }
 </style>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
    <!--显示图片信息-->
     <img v-bind:src="imageSrc"/>
    <!-- v-bind简写-->
    <img :src="imageSrc">
    <!--绑定样式多个用数组-->
     <p :class="['aClass','bClass']">绑定style</p>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            message: '显示',
            imageSrc:"https://cn.vuejs.org/images/logo.svg"
        }
    });
</script>
</body>
</html>

v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。如果你再次打开浏览器的JavaScript控制台，输入app， message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。

v-if

v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--如果type为true显示tru否则显示false-->
    <h1 v-if="type===true">true</h1>
    <h1 v-else>false</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vue=new Vue({
        el : "#app",
        data : {
            type :true
        }
    });
</script>
</body>
</html>

v-if
v-else-if
v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--如果为true显示tru否则显示false-->
    <h1 v-if="type=='a'">a</h1>
    <h1 v-else-if="type=='b'">b</h1>
    <h1 v-else>c</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vue=new Vue({
        el : "#app",
        data : {
            type :"a"
        }
    });
</script>
</body>
</html>

v-for

格式说明

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>
</div>

items是数组，item是数组元素迭代的别名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vue=new Vue({
        el : "#app",
        data : {
            items : [{message:"aaaaa"},
                     {message:"bbbbb"},
                    {message:"cccccc"}]
        }
    });
</script>
</body>
</html>

v-on监听事件

事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件，可以绑定到Vue中的methods中的方法事件!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="sayHi">弹窗</button>
     <button @click="syHai2">弹窗2</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    let vue=new Vue({
        el : "#app",
        data : {
            message:"绑定一个点击事件"
        },
        methods:{
             sayHi:function(event) {
                 //'this'在方法里面指向当前Vue实例
                 alert(this.message)
             },
             syHai2:()=> {
                console.log(this)//this值Window对象 
               alert("bbb")

            }
        }

    });
</script>
</body>
</html>

v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--2.接管容器-->
<div id="app">
    <!--
      v-show:通过display控制显示和隐藏
      v-if:直接删除元素
    -->
    <h1 v-show="pan">我是v-show</h1>
    <h1 v-if="pan">我是v-if</h1>
  <button @click="toggle">if点击切换显示h1的显示和隐藏</button>
    <button @click="toggle">show点击切换显示h1的显示和隐藏</button>
</div>

<script type="text/javascript">
    new Vue({
        el:"#app",/*el:element元素，vue要接管的元素*/
        data:{//声明要使用的数据
           pan:true,
        },
        methods:{
            toggle:function () {
                this.pan=!this.pan;
            }
        }
    })
</script>
</body>
</html>

实现一个删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="app">

    <table border="1">
        <tr>
            <td>序号</td>
            <td>名称</td>
            <td>价格</td>
        </tr>

        <tr v-for="(item,index) in products"  v-on:remove="remove(index)">
            <td>
                {{ item.id }}
            </td>
            <td>
                {{ item.pname }}
            </td>
            <td>
                {{ item.price }}
            </td>
            <td>
                <a href="#" @click="remove(index)">删除</a>
            </td>
        </tr>
    </table>
</div>

<script>
    new Vue({
        el: '#app', //表示当前vue对象接管了div区域
        data: {
            products: [
                { id: 1, pname: '电视机', price: 6000 },
                { id: 2, pname: '电冰箱', price: 8000 },
                { id: 3, pname: '电风扇', price: 600 }
            ]
        },methods:{
            remove:function (index) {
                //这里的remove是自定义事件名称，需要在HTML中使用v-on:remove的方式
                //this.$emit 自定义事件分发
                this.products.splice(index,1);
            }
        }
    })
</script>

</body>
</html>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop 等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent 等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture 与事件冒泡的方向相反，事件捕获由外到内
.self 只会触发自己范围内的事件，不包含子元素
.once 只会触发一次
.passive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--防止执行a链接跳转页面，只执行点击事件-->
    <p><a href="#" @click.prevent="syHai">事件修饰符防止执行a链接跳转页面</a> </p>
    <!--弹窗执行一次-->
    <p><a href="http://www.baidu.com" @click.once="syHai">事件修饰符弹窗执行一次</a></p>
</div>
<script src="js/vue.js"></script>
<script>
    let vue=new Vue({
        el:"#app",
        data:{

        },
        methods:{
           syHai:function () {
            console.log(this)
            alert("aaa")

        }
    })
</script>
</body>
</html>

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--2.接管容器-->
<div id="app">
    <!--    href:指定的a标签是默认行为-->
    <!--    prevent:组织默认行为-->
    <a href="http://www.baidu.com" @click.prevent="show">aaaa</a>

    <div style="border: green 1px solid" @click="show1">
        <div style="border: red 1px solid" @click="show2">
            <button style="border: chartreuse 1px solid" @click="show3">button</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el:"#app",/*el:element元素，vue要接管的元素*/
        data:{//声明要使用的数据

        },
        methods:{
            show() {
                alert("aaaa")
            },
            show1(){
                alert('最外层的div')
            },
            show2(){
                alert('中间的div')
            },
            show3(){
                alert('最里面的button')
            }
        }
    })
</script>
</body>
</html>

表单双绑

什么是双向数据绑定

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

（1）为什么要实现数据的双向绑定

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

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

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

(1)单行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   输入的文本:<input type="text" v-model="message" />{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    let vue=new Vue({
        el : "#app",
        data : {
            message:"hello"
        },
        methods:{
            sayHi:function(event) {
                //'this'在方法里面指向当前Vue实例
                alert(this.message)
            }
        }

    });
</script>
</body>
</html>

（2）多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    多行文本：<textarea v-model="message"></textarea>&nbsp;&nbsp;多行文本是：{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    let vue=new Vue({
        el : "#app",
        data : {
            message:"hello"
        },
        methods:{
            sayHi:function(event) {
                //'this'在方法里面指向当前Vue实例
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

（3）单复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    单选按钮：<input type="checkbox" v-model="checked">&nbsp;&nbsp;多行文本是：{{checked}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    let vue=new Vue({
        el : "#app",
        data : {
            checked:"hello"
        },
        methods:{
            sayHi:function(event) {
                //'this'在方法里面指向当前Vue实例
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

（4）多复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="jack">Jack</label>
    <input type="checkbox" id="join" value="Join" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="join">Jack</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="mike">Mike</label>
    <span>选中的值：{{checkedNames}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checkedNames:[]
        }
    });
</script>
</body>
</html>

（6）单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    单选框按钮
    <input type="radio" id="one" value="One" v-model="duanxuan">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="duanxuan">
    <label for="two">Two</label>
    <span>选中的值：{{duanxuan}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            duanxuan:[]
        }
    });
</script>
</body>
</html>

（7）下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    下拉框:
    <select v-model="xia">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>value:{{xia}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            xia:""
        }
    });
</script>
</body>
</html>

注意：v-model表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。在iOS中，这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

什么是组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

（1）第一个Vue组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。 使用Vue.component()方法注册组件，格式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--组件：传递给组件中的值：props,items对应data的数据,-->
   <yuan v-for="itme in items" v-bind:yuan1="itme"></yuan>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    //定义一个组件 yuan对应上面的的yuan标签
    Vue.component("yuan",{
        props:['yuan1'],
        template:'<li>{{yuan1}}</li>'
    })

    let vm=  new Vue({
        el:"#app",
        data:{
           items : ["Java","Vue","C#","Mysql"]
        }
    });
</script>
</body>
</html>

说明：

v-for="item in items"：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind:yuan1="item"：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的yuan1为props定义的属性名，右边的为item in items 中遍历的item项的值

Axios异步通信

什么是Axios

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

GitHub：https://github.com/axios/axios 中文文档：http://www.axios-js.com/

为什么要使用Axios

由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为它操作Dom太频繁!

第一个Axios应用程序

开发的接口大部分都是采用JSON格式，可以先在项目里模拟一段JSON数据，数据内容如下：创建一个名为data.json的文件并填入上面的内容，放在项目的根目录下

{
  "name": "Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "Java",
     "url": "https://blog.yuanstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

测试代码

方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--v-cloak 解决闪烁问题-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="axios" class="a" v-cloak>
    <p>名称：{{info.name}}</p>
    <p>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</p>
    <p>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--引入axios-->    
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
<script>
    let vue=new Vue({
        el : "#axios",
        data(){
           return{
               info:{
                   name:null,
                   address:{
                       country:null,
                       city:null,
                       street:null
                   },
                   url:null
               }
           }
        },
        mounted(){//钩子函数
            axios.get("../data.json").then(response=>(this.info=response.data))
        }
    });
</script>
</body>
</html>

方式二


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1">
        <tr>
            <td>序号</td>
            <td>名称</td>
            <td>发布时间</td>
        </tr>

        <tr v-for="itme in news">
            <td>
                {{itme.id}}
            </td>
            <td >
              {{itme.title}}
            </td>
            <td>
            </td>
        </tr>
    </table>
</div>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    new Vue({
        el : "#app",
        data:{
                news:[]
        },
        methods : {
            //第一种
            getNews1(){
                // 为给定 ID 的 user 创建请求
                axios("http://localhost:8080/news/药")
                    .then(response=>(this.news=response.data))
                    .catch(function (error) {
                        //错误执行
                        console.log(error);
                    });
            },
            //第二种
            getNews2() {
                axios.get("http://localhost:8080/news/药").then(response=>(this.news=response.data))
            },
            //第三种
             getNews3(){
                 let that = this;
                // axios.get('http://localhost:8080/news/药')
                 axios.get('http://localhost:8080/news',{
                     params:{
                         title:"药"//多个用,隔开
                     }
                 })
                     .then(function (response) { //promise
                         //then是请求之后要回调的函数，response 服务器返回的内容
                         that.news=response.data;
                         console.log(response)
                     })
                     .catch(function (error) {
                         //但请求过程中发生了错误，会进入catch,error错误信息
                         console.log(error)
                     })
             }
        },
        //页面挂载完毕后执行该生命周期函数
        mounted(){
             this.getNews3();
        }
    })
</script>
</body>
</html>

说明：

在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
我们在data中的数据结构必须和Ajax响应回来的数据格式匹配！

Vue的生命周期

官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示 Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

Axios实现新增

addController

    @RequestMapping("/add")
    @ResponseBody
    public Object add(@RequestBody NewsEntity news){
        System.out.println(news.toString());
        try {
            newsService.saveNews(news);
        } catch (Exception e) {
            return "错误";
        }
        return "成功";
    }

addNews

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
    <form action="">
        <p>标题：<input type="text" v-model="news.title"/></p>
        <p>类型:<!--<input type="text" v-model="news.typeId"/>-->
        <select v-model="news.typeId">
            <option selected="selected">1001</option>
            <option>1002</option>
        </select>
        </p>
        <p>内容：<input type="text" v-model="news.content"/></p>
        <p>发布人<input type="text" v-model="news.publisher"/></p>
        <input type="submit" value="提交" @click.prevent="addNews">
    </form>
</div>
<script>
    new Vue({
        el : "#app",
        data:{
            news:{}
        },
        methods : {
            addNews(){
                console.log(this.news)
              .post('http://localhost:8080/add',this.news)
                  .then(response=>(response.data)
              )
            }
        },
        //页面挂载完毕后执行该生命周期函数
        mounted(){

        }
    })
</script>
</body>
</html>

Vue拦截

request.js

/*创建axios实例*/
const intance=axios.create({
    baseURL : "http://localhost:8080",
    timeout:10000
})

/*请求的拦截*/
intance.interceptors.request.use(function (config) {
    config.headers.token ="yuan";
    return config;
},function (error) {
    console.log(error)
    return Promise.reject(error)
})
/*响应的拦截器*/
intance.interceptors.response.use(function (response) {
    const  res=response.data
    return  res;
},function (error) {
    return Promise.reject(error)
})

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1">
        <tr>
            <td>序号</td>
            <td>名称</td>
            <td>发布时间</td>
        </tr>

        <tr v-for="itme in news">
            <td>
                {{itme.id}}
            </td>
            <td >
              {{itme.title}}
            </td>
            <td>
            </td>
        </tr>
    </table>
</div>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script th:src="@{../js/request.js}"></script>
<script type="text/javascript">

    new Vue({
        el : "#app",
        data:{
                news:[]
        },
        methods : {
             getNews3(){
                 let that = this;
                 //intance:request定义的创建axios实例
                 intance.get('/news',{
                     params:{
                         title:"药"
                     }
                 })
                     .then(function (response) { //promise
                         //then是请求之后要回调的函数，response 服务器返回的内容
                         that.news=response
                         console.log(response)
                     })
                     .catch(function (error) {
                         //但请求过程中发生了错误，会进入catch,error错误信息
                         console.log(error)
                     })
             }
        },
        //页面挂载完毕后执行该生命周期函数
        mounted(){
             this.getNews3();
        }
    })
</script>
</body>
</html>

NewsController

   @RequestMapping("/news")
   @ResponseBody
    public Object newsByTitle(@RequestParam("title") String title, HttpServletRequest request){

       List<NewsEntity> 药 = newsService.findByTitleLike(title);
     return 药;
   }

Vue组件实现新增和删除

InputText.vue

<template>
     <div>
       <label>
         <!--
         @keydown.enter="addItme":回车事件,鼠标回车时触发
         v-model="dotoItme.name":用户输入的的字符，或字符串
         -->
         <input type="text" v-model="dotoItme.name"  @keydown.enter="addItme"/>
       </label>
     </div>
</template>

<script>
    export default {
        name: "InputText",
      data(){
          return{
            dotoItme:{id:null,name:""}
          }
      },
      methods:{
        addItme:function () {
            //  //触发父组件的事件，然夫组件新增
            this.$bus.$emit("addtoItme",this.dotoItme)
        }
      }
    }
</script>

<style scoped>
 .in{
   width: 500px;
   height: 50px;
 }
</style>

TodoItem.vue

<template>
  <li>编号:{{toDoItme.id}}&nbsp;&nbsp;名称:{{toDoItme.name}}&nbsp;&nbsp;<button @click="deletes(index)" type="button">删除</button></li>
</template>

<script>
    export default {
        name: "TodoItem",
        props:["toDoItme","index"],//自定义属性名称
        methods:{
          deletes:function (index) {
             //触发父组件的事件，然后组件删除
            this.$emit("deleteItme",index)
          }
        }
    }
</script>

<style scoped>

</style>

TodoLIst.vue

<template>
    <div>
      <ul>
        <!--
        :toDoItme="itme"，:index="index" :自定义组件名称：
        @deleteItme="del(index)" :子类自定义的组件事件
        -->
        <TodoItem :toDoItme="itme" :index="index" v-for="(itme,index) in toDoList" @deleteItme="del(index)"></TodoItem>
      </ul>

    </div>
</template>

<script>
  import TodoItem from "./TodoItem";
    export default {
        name: "TodoLIst",
      components:{
          TodoItem:TodoItem
      },
      data(){
          return {
            toDoList:[
              {id:1001,name:"aaaa"},
              {id:1002,name:"bbb"},
              {id:1003,name:"ccc"}
            ]
          }
      },
      methods:{
          //删除数据
        del(index){
          this.toDoList.splice(index,1)
          }
        },
      mounted() {
          //新增
          this.$bus.$on("addtoItme",(item)=>{
            //转成josn数据
            const  todoIteme2=JSON.parse(JSON.stringify(item))
            //将json数据渲染上去
            this.toDoList.unshift(todoIteme2)
          })
      }
    }
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <h1>Hello Word</h1>
    <!--
    引入InputText和TodoLIst组件标签
    -->
      <InputText></InputText>
      <TodoLIst></TodoLIst>
  </div>
</template>

<script>
  //引入InputText和TodoLIst组件
import InputText from './components/InputText.vue'
import TodoLIst from "./components/TodoLIst";

export default {
  name: 'App',
  components: {
    InputText:InputText,
    TodoLIst:TodoLIst
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
//定义一个空的vue对象用于传输数据
Vue.prototype.$bus=new Vue();

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

Vue整合Jpa实现简单分页

dao

package com.springbootvue.dao;
import com.springbootvue.pojo.Options;
import com.springbootvue.pojo.Subjects;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;

public interface SubjectsDao extends JpaRepository<Subjects,Integer>,
        JpaSpecificationExecutor<Options> {
}

service

public interface SubjectsService {
    /**
     * 查询
     * @return
     */
    Page<Subjects> addSubjectsPage(Integer pageNum, Integer pageSize);
}

serviceImpl

    @Autowired
    private SubjectsDao subjectsdao;

    @Override
    public Page<Subjects> addSubjectsPage(Integer pageNum, Integer pageSize) {
        Sort sort = Sort.by(Sort.Direction.ASC, "id");
        Pageable pageable = PageRequest.of(pageNum, pageSize,sort);
        Page<Subjects> page = subjectsdao.findAll(pageable);
        return page;
    }

controller

  @RequestMapping("/subjectsAll")
  @ResponseBody
  public Object subjectsAll(@RequestParam(defaultValue = "0",required = false,value = "pageNum") Integer pageNum,
                            @RequestParam(value = "pageSize",defaultValue = "2",required = false) Integer pageSize){
      Page<Subjects> subjects = subjectsService.addSubjectsPage(pageNum, pageSize);
      System.out.println(subjects);
      return subjects;
  }

index

<html xmlns:th="http://www.thymeleaf.org">
    <title>全部主题</title>
    <style>
        #box {
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        table {
            margin-top: 20px;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>全部主题>></h3>
    <table border="1">
        <tr>
            <th>序号</th>
            <th>主题</th>
            <th>投票/查看</th>
            <th>创建时间</th>
        </tr>
        <tbody>
        <tr v-for="s in sub.content">
            <td>{{s.id}}</td>
            <td>{{s.title}}</td>
            <td>{{s.totalVotes}}/{{s.viewTimes}}</td>
            <td>{{s.createDate}}</td>
        </tr>
        </tbody>
    </table>
    <p id="dian">
        <a href="#" @click.prevent="getPageNum(0)">首页</a>&nbsp;&nbsp;
        <a href="#" @click.prevent="getPageNum(sub.number+1)">下一页</a>&nbsp;&nbsp;
        <a href="#" @click.prevent="getPageNum(sub.number-1)">上一页</a>
    </p>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script th:src="@{../js/request.js}"></script>
<script>
    new Vue({
        el : "#app",
        data : {
           sub:[]
        },
        methods : {
            getPageNum(pageNum) {
                axios.get("http://localhost:8080/subjectsAll",{
                    params:{
                        pageNum:pageNum
                     }
                }).then(response=>(this.sub=response))
            }
        },
        mounted(){
           this.getPageNum()
        }
    })
</script>
</body>
</html>

计算属性、内容分发、自定义事件

什么是计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vue=new Vue({
        el:"#box",
        data : {

        },
        methods : {
            currentTime1:function() {
                return Date.now(); //返回当前事件戳
            }
        },
        computed : {//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
            currentTime2:function () {
              this.message;
              return Date.now();//返回当前时间戳
            }
        }
    });
</script>
</body>
</html>

注意：methods和computed里的东西不能重名说明：

methods：定义方法，调用方法使用currentTime1()，需要带括号
computed：定义计算属性，调用属性使用currentTime2，不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”yuan"，改变下数据的值，再次测试观察效果!

结论： 调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

内容分发

在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <todo>
        <!--todo-title 自定义标签  slot="todo-title" 对应插槽名称 v-bind:title对应标题组件 props:['title'] title对应Vue对象的-->
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item"></todo-items>
        <!--简写版-->
        <!-- <todo-items slot="todo-items" v-for="items in todoItems" :item="items"></todo-items>-->
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //1,定义一个待办事项的组件,将代码留出一个插槽，即slot todo-title 对应上面自定义标签
    //todo组件里有两个组件分别是todo-title，todo-items
    Vue.component("todo",{
        template: "<div>" +
            "<slot name='todo-title'></slot>" +
            "<ul>" +
            "<slot name='todo-items'></slot>" +
            "</ul>" +
            "</div>"
    })
    //2,定义一个名为todo-title的待办标题组件 和 todo-items的待办内容组件 title对应v-bind:title="title"
    Vue.component("todo-title",{
          props:['title'],
          template : "<div>{{title}}</div>"
    })
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！ item对应  :item="items"
   Vue.component("todo-items",{
       props : ["item"],
       template : "<li>{{item}}</li>"
   })
    //3,实例化Vue并初始化数据
    const vue=new Vue({
        el : "#vue",
        data : {
            title : "哈哈哈哈",
            todoItems:["JAVA","Python","Php"]
        }
    })
</script>
</body>
</html>

自定义事件

通以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用this.$emit(‘自定义事件名’，参数) ，操作过程如下： 1-在vue的实例中增加了methods对象并定义了一个名为removeTodoltems的方法

var vm = new Vue({
        el:"#vue",
        data:{
            title_text:"科老师系列课程",
            todoItems:['test1','test2','test3']
        },
        methods:{
            removeItems:function(index){
                console.log("删除了"+this.todoItems[index]+"OK");
                //splice（） 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中index
                this.todoItems.splice(index,1);
            }
        }
    });

2-修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件！

 Vue.component("todo-items",{
        props:["item_p","index_p"],
        template:"<li>{{index_p+1}},{{item_p}} <button @click='remove'>删除</button></li>",
        methods:{
            remove:function (index) {
            //这里的remove是自定义事件名称，需要在HTML中使用v-on:remove的方式
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

3-修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法！

<!--增加了v-on:remove="removeTodoItems(index)"自定义事件，该组件会调用Vue实例中定义的-->
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item_p="item" :index_p="index" v-on:remove="removeItems(index)" :key="index"></todo-items>

对上一个代码进行修改，实现删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <todo>
        <!--todo-title 自定义标签  slot="todo-title" 对应插槽名称 v-bind:title对应标题组件 props:['title'] title对应Vue对象的-->
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <!-- v-on:remove="removeItems(index)" v-on:remove 对应this.$emit 自定义事件分发的remove,
        ="removeItems(index)"对应Vue的初始化的removeItems:function(index)，index获取当前的值，传过去删除-->
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:index="index" v-bind:item="item"
                    v-on:remove="removeItems(index)" v-bind:key="index"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //1,定义一个待办事项的组件,将代码留出一个插槽，即slot todo-title 对应上面自定义标签
    //todo组件里有两个组件分别是todo-title，todo-items
    Vue.component("todo",{
        template: "<div>" +
            "<slot name='todo-title'></slot>" +
            "<ul>" +
            "<slot name='todo-items'></slot>" +
            "</ul>" +
            "</div>"
    })
    //2,定义一个名为todo-title的待办标题组件 和 todo-items的待办内容组件 title对应v-bind:title="title"
    Vue.component("todo-title",{
          props:['title'],
          template : "<div>{{title}}</div>"
    })
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！ item对应  :item="items"
    //v-on:click='remove_methods'给当前的点击当前的按钮绑定一个点击事件
   Vue.component("todo-items",{
       props : ["item","index"],
       template : "<li>{{index}}&nbsp;{{item}}<button v-on:click='remove_methods'>删除</button></li>",
       methods: {
           remove_methods:function(index) {
               //this.$emit 自定义事件分发
               this.$emit("remove",index);
           }
       }
   })
    //3,实例化Vue并初始化数据
    const vue=new Vue({
        el : "#vue",
        data : {
            title : "哈哈哈哈",
            todoItems:["JAVA","Python","Php"]
        },
        methods : {
            removeItems:function(index) {
                this.todoItems.splice(index,1);//删除当前点击的HTML内容
            }
        }
    })
</script>
</body>
</html>

Vue入门小结

核心：数据驱动，组件化

优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；

常用的属性：

v-if
v-else-if
v-else
v-for
v-on绑定事件，简写@
v-model数据双向绑定
v-bind给组件绑定参数，简写：

组件化：

组合组件slot插槽
组件内部绑定事件需要使用到this.$emit("事件名",参数);
计算属性的特色，缓存计算数据

遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

说明

Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

官网：