【Vue】Java后端程序员也必须掌握的前端框架（上）

小新要变强

已于 2022-10-20 19:50:40 修改

阅读量2.4k

点赞数 3

分类专栏： JavaWeb 文章标签： vue.js 前端框架

于 2022-09-30 08:00:00 首次发布

本文链接：https://blog.csdn.net/qq_42146402/article/details/127097418

版权

JavaWeb 专栏收录该内容

22 篇文章 7 订阅

订阅专栏

本文详细介绍了Vue.js的基础知识，包括MVVM模式、Vue的7个属性、基本语法、事件绑定、双向数据绑定、组件、Axios异步通信、生命周期、计算属性以及插槽的使用。通过实例展示了Vue如何创建和操作数据，以及如何进行异步通信和组件化开发。此外，还提到了Vue的计算属性缓存特性和插槽在组合组件中的应用。

摘要由CSDN通过智能技术生成

前言

本文为Vue框架基础知识、语法与使用介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

一、MVVM模式的实现者

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

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

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--视图层DOM-->
<div id="app">
    <!--拿到数据data-->
    { {message} }
</div>
<!--
    ViewModel在浏览器端显示
    ViewModel连接视图和数据的中间件
    ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
    ViewModel 能够监听到视图的变化，并能够通知数据发生改变
    Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定
-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script>
    var vm = new Vue({
        /*元素，这就绑定了div里面的元素*/
        el:"#app",
        /*data交给前端*/
        <!--Model模型层，控制视图层-->
        data:{
            message:"hello vue"
        }
    });
</script>
</body>
</html>

二、Vue的7个属性

el：
data：将视图层的数据抽象出来存放在data中
template：用来设置模板
methods：放置页面中的业务逻辑，js方法一般放置在methods中
render：创建真正的Virtual Dom
computed：用来计算
watch：
    watch:function(new,old){}
    监听data中数据的变化
    两个参数，一个返回新值，一个返回旧值

三、Vue基本语法

<span>标签属性
v-bind:title="message"：鼠标悬停显示文字
判断-循环
v-if、v-else、v-else-if
如：
<h1 v-if="ok">
    Yes
</h1>
v-for
如：
<li v-for="item in items">
    { {item.message} }
</li>

四、Vue绑定事件

v-on属性可以监听事件
如：v-on:事件=“xxxx”

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"吴吉凯"
        },
        methods:{
            //方法必须定义在Vue的Methods对象中
            sayHi:function (event) {
                alert(this.message)
            }
        }
    });
</script>
<div id="app">
    <button v-on:click="sayHi"></button>
</div>

五、Vue双向绑定

可以用 v-model 指令在表单 < input>、< textarea> 及 < select>
元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

<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>
    var vm = new Vue({
        /*元素，这就绑定了div里面的元素*/
        el:"#app",
        /*data交给前端*/
        <!--Model模型层，控制视图层-->
        data:{
            message:"123"
        }
    });
</script>

<!--    单选框-->
性别：
<input type="radio" name="sex" value="男" v-model="checked">男
<input type="radio" name="sex" value="女" v-model="checked">女
<p>
    选中了谁{ {checked} }
</p>
<!--    下拉框-->
<select name="" id="" v-model="selected">
    <option value="" disabled>---请选择---</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>
    Value:{ {selected} }
</span>

六、Vue组件(可复用的模板)

//定义一个vue组件
Vue.component("qingjia",{
    props:['qin'],
    template:'<li>{ {qin} }</li>'
});
var vm = new Vue({
    el:"#app",
    data:{
        items:["java","Linux","前端"]
    }
});
<!--
    用v-for遍历
    使用v-bind绑定组件qin和遍历的名称item
-->
<qingjia v-for="item in items" v-bind:qin="item"></qingjia>

七、Axios异步通信

用在浏览器端和NodeJS的异步通信，主要实现AJAX异步通信

// 使用：npm install axios  导入axios的包
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

八、Vue的生命周期

创建–>初始化数据–>编译模板–>挂载DOM–>渲染–>更新–>渲染、卸载

<div id="app">
    <div>
        { {info.name} }
        { {info.address.city} }
        <a v-bind:herf="info.url"></a>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
    el:"#app",
    //钩子函数
    //这个data是个方法
    data(){
        return{
            //请求的返回参数必须和json字符串一样
            info:{
                name:null,
                address:{
                    street:null,
                    city:null
                },
                url:null
            }
        }
    },
    mounted(){
        //通信交给下面这个地方可以改成ajax
        axios.get('data.json').then(response=>(this.info=response.data))
    }
});
</script>

九、计算属性

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

<div id="app">
<p>{ {currentTime1()} }</p>
<p>{ {currentTime2} }</p>
</div>
<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”
},
methods: {
currentTime1:function () {
return Date.now();//返回当前时间戳
}
},
computed:{//计算属性
currentTime2:function () {
return Date.now();//返回当前时间戳
}
}
});
</script>

注意：

methods 和 computed 里的东西不能重名

说明：

methods：定义方法，调用方法使用 currentTime1()，需要带括号
computed：定义计算属性，调用属性使用 currentTime2，不需要带括号
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

十、插槽solt

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

<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>

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

<script>

// 定义一个待办事项的组件
//插槽
Vue.component(‘todo’, {
template:
‘<div>\
<slot name="todo-title"></slot>\
<ul>\
<solt name="todo-items"></solt>\
</ul>\
</div>‘
});
Vue.component(“todo-title”,{
props: [‘title’],
template: ‘<div>{ {title} }</div>‘
});
Vue.component(“todo-items”,{
props: [‘item’],
template: ‘<li>{ {item} }</li>‘
});

var vm = new Vue({
el:”#app”,
data:{
title:’kaungshen’,
todoItems:[‘狂神说’,’java’]
}
});
</script>