前言

最近看到一个博客系统非常不错,前后端分离,而且简单易上手【x】于是就想学学它,但是它用的是springboot+vue,我没有接触过vue,于是就来狂神这里学了学,也就是快速上手吧。

下面记录了一些用法,以后学习过程中忘了或者说需要哪块,可以通过这篇博客自己查询,也作为自己学习的记录吧。

这次博客的安排是按照狂神说的视频来编写的,通过它的视频我一天就把它搞定下来,当然能消化多少是个问题……

当然,最重要的还是在官网上看!

至于一些概念性的东西,我现在头脑一片空白……只知道它非常好,可以一块一块的拼接上去,而不用像之前写html、css、js那样,一大片东西,这里只是拆开一部分一部分这样;然后它是只关注视图层的,虚拟DOM;是MVVM模式的实现者???等以后再学习的时候再补充吧,现在只是学会使用这个工具。

基础部分

代码准备:引入Vue

首先把vue.js引入到HTML中,可以使用CDN。

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

下面的例子都是基于一个个HTML页面的。

声明式渲染

按照官网的解释,它是一种响应式的交互,可以马上渲染更新,让数据和DOM建立联系,下面来看一个实例。

<div id="app">
    <div>{{name}}</div>
</div>
var vm = new Vue({
    // bind an object to element
    el: "#app", 
    data: { 
        name: "张三"
    }
});

image20210624131406259.png

这个实例vm就是一个Vue应用,它绑定一个id是app的div中。

data部分,里面放了一个属性name,就是说它与上面的{{name}}相绑定,当name的值变化时,展示的name也会发生变化,可以在控制台试试这个功能。

image20210624131427514.png

顺带一提,它还能通过v-bind attribute指令来绑定一些事件

<div id="app"> 
    <span v-bind:title="message">
        悬停查看信息
    </span>
</div>

该指令的意思是:“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”

var vm = new Vue({
    // bind an object to element
    el: "#app",
    // put data, it is Model
    data: {
        message: "hello, vue!"
    }
});

这样,悬停在这个span上就会展示出message的信息:hello, vue!


本小点对应的官网位置

v-bind对应更多的用法

条件语句

这里还带上一些逻辑,直接看代码吧,这部分很容易上手。

<div id="app">
    <h1 v-if="type === 'A'">A</h1>
    <h1 v-else-if="type === 'B'">B</h1>
    <h1 v-else>C</h1>
</div>
var vm = new Vue({
    el: "#app",
    data:{ 
        type: 'B'
    }
});

这个很明显,就是当type为A时,展示A;若其为B时,展示B;否则展示C。


循环语句

上面有了ifelse,这里肯定得来一个for了。

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
var vm = new Vue({
    el: "#app",
    data: {
        items: [
            {message: 'tim'},
            {message: 'jamm'},
            {message: 'whattt'},
            {message: 'howwww'},
        ]
    }
});

这样就会循环展示出这个数组对象items里面的所有信息了。

而且从使用上,在v-for中,填的是形参 in 要循环的对象

形参(?我自己的叫法)随便填,你只要和下面的对应起来就行了。

从上面的例子来看,每一个item就是一个{message: 'xxx'}对象,它就把item里面的message取出来,然后展示。

image20210624133008860.png


绑定事件

我自己的叫法,既然都有选择、循环了,那肯定少不了有函数,这确实也是一个函数,是定义在methods里面的,下面看例子。

<div id="app">
    <button @click="sayHi">click me</button>
    <hr>
    <button v-on:click="sayHi">click me</button>
</div>
var vm = new Vue({
    el: "#app",
    data: {
        message: "hellooooooooooo"
    },
    methods: {
        // 方法必须定义在Vue的methods中(不是method噢…… )
        sayHi: function () {
            /*this就是指当前对象vm的message*/
            alert(this.message)
        }
    }
});

这里有一个效果就是,点击button按钮就会出现一个alert框,两个button效果一样,只是上面的是下面的简写。

这就是原生JS的onclick事件啊。

反正这里就是……可以定义一些方法,记得,它是定义在methods中!格式也不要记错。


同样是官网的简单介绍

v-on可以监听DOM事件,并触发一些JS代码。

双向绑定

就是处理一些表单的时候,它可以进行一个双向绑定,我的理解是,数据变化了,视图也跟着变化;视图的内容变化了,数据也会发生变化。

下面展示一些小的实例吧

  1. 一个框输入什么内容,隔壁马上展示什么内容
  2. 性别选择,选中男/女,马上显示
  3. 显示下拉框的选中项

(好像都和选中啥啥有关)

<div id="app">
    input : <textarea type="text" v-model="message"></textarea>
    show: {{message}}
    <br>
    性别:
    <input type="radio" name="sex" value="男" v-model="tim">男
    <input type="radio" name="sex" value="女" v-model="tim">女
    <p>选中了:{{tim}}</p>
    <br>
    下拉框:
    <select v-model="choice">
        // 默认
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>选中了:{{choice}}</p>
</div>

下面就是一些数据了

var vm = new Vue({
    el: "#app",
    data: {
        message: 123,
        // 选中哪个就会展示哪个
        tim: '',
        // 下拉框的选中
        choice: ''
    }
});

image20210624140303176.png

其实也没有什么特别的东西,不过是使用了v-model进行了视图与数据的绑定!

以textarea为例,当输入abc时,隔壁马上就会显示abc。

而且它会以我们给定的data中的数据值作为初始值,而忽略掉所有表单元素的特别的初始值(比如value、checked、selected)

而且它是在一些表单表单元素里面的,比如<input> <textarea> <select>

反正就是。。。绑定它??有更多使用的机会再来补充吧,越写越感觉空虚。


API

自定义组件

官网的这个图真的是太好了!(我好像也只是记住了这一段……)

components.png

Vue通过这种一个一个地小组件,构建出一个大的应用 。

组件的话。。其实可以通俗的讲,就是一堆标签构建起来的,比如一堆div啥啥的,而我可以自己定义一个标签,就叫<my>,然后它展示一堆我在组件中写好的东西。就是说这个<my>就代表我写的一堆东西,能复用,又简洁。

<div id="app">
    <my v-for="item in items" v-bind:tim="item"></my>
</div>

看上面的例子,我就写了一个<my>,新东西吧?这是我自己定义的。

Vue.component("my", {
    // 绑定了一个tim,通过props接受参数
    props: ['tim'],
    template: '<li>{{tim}}</li>\n'
});

通过上面这种形式,定义出一个component。

而这个组件的内容,写在了template中,这里可以简单的说,这个my展示的内容,就是template里面的<li>

PS:其实这个例子写得是非常的故意的,开发中不会这样写,具体看后面吧,只是体会一下组件的感觉。

var vm = new Vue({
    el: "#app",
    data: {
        items: ["java", "Linux", "font"]
    }
});

所以说,我可以理解为,在my这个组件中循环items这个数组的内容,因为它里面会展示数据。

但是这又有件奇怪的事情:items的数据是外面的div中(或者外面的组件中?),它怎么传进去我自定义的组件里面呢?

这里就需要绑定一些东西(任意……比如我随便写的tim),在组件的props中定义一个attribute,它叫tim,然后再让这个tim与item变量绑定,这样就可以展示item的数据了,它就会传到tim里面, <li>{{tim}}</li>在这里展示了。

(好乱= =)


Axios通信

它是为了实现AJAX异步通信的一个框架,之前用的是jQuery的$.ajxa做的,现在可以安装这个来完成 。

具体怎么安装以后再有说明,这里先引用cdn,先学学一些简单的用法!

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

这里模拟一下它的使用。

<div id="vue" >
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">点我</a>
</div>

image20210624145659466.png
它的大体框架是这样的,但是它的数据是从哪来的呢?看看JS代码

var vm = new Vue({
    el: "#vue",
    data() {
        return {
            // 请求的返回参数格式必须和json字符串一致
            info: {
                name: null,
                address: {
                    street: null,
                    city: null,
                    country: null
                },
                url:null
            }
        }
    },
    // 钩子函数,与Vue的生命周期有关
    mounted() {
        axios.get('../data.json').then(response => (this.info = response.data))
    }
});

这里介绍一下vm实例中的mounted,它是Vue生命周期钩子,简单来说它就是……ummmmmm加载el之后(?)吧,更多可以了解一下官网,还有那张生命周期图。

重点是看那个axios!它引入之后,就从一个url中取得资源,就是那个get()

取得资源后的处理,就是then()之后的事情了,它就为当前对象的info对象赋值,值是从../data.json中取得的。


博客系统中的axios使用

我在做那个前后端分离的博客系统中,里面有多个地方用到这个axios,下面记录一下那里的用法。

  • 退出登录功能

    点击退出登录,然后就调用后端写好的接口,这里就很适合。

    _this.$axios.get("/logout", {
        // 这里是配置的信息,
        headers: {
            "Authorization": localStorage.getItem("token")
        }
    }).then(res => {
        // 调用后做什么
        _this.$store.commit("REMOVE_INFO");
        _this.$router.push("/login");
    })
    

举一个小例子而已了,它用法真的是非常简单,普通的get、post就改改就行,需要更多的到时再查找吧。

计算属性

看一下它们的差别

<div id="vue" >
    <p>currentTime1():{{currentTime1()}}</p>
    <p>currentTime1:{{currentTime1}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>
var vm = new Vue({
    el: "#vue",
    data: {
        message: "hello world!"
    },
    methods: {
        currentTime1: function (){
            // 返回当前时间戳
            return Date.now();
        }
    },
    // 特色,计算属性!methods和computed方法名不能重名 ?重名了好像显示不出来
    // 重点是,它是个属性,而不是个方法(),这是一个计算出来的属性,(而不是计算的方法【x】有点绕) 
    computed: {
        currentTime2: function (){
            // 返回当前时间戳
            return Date.now();
        }
    }
});

image20210624151823356.png

计算属性是为了将不经常变化的计算结果进行缓存,节省开销。

比较一下{{}}里面取的值。

计算属性,它不用括号,但是方法就需要括号了。

并且他们不能重名。


插槽

官网推荐,简单了解:

进阶再看

vue-cli脚手架项目

安装环境

这个……有点复杂,前端也要配置一大堆环境,什么Node.js,什么npm,虽然和后端能够相匹配上来(比如Maven),但是还是显得很麻烦,而且做前端的东西……怎么说,感觉出错了都不知道错在哪,好奇怪的感觉。

下面只是记录一下步骤。

首先需要安装Node.js,去官网下载然后安装就行了。

在cmd中看到输入命令

node -v

npm -v

有版本号出来就安装成功了。

以后看到官网那些,直接一行npm install xxxx就是在cmd下安装就行了。

可以安一个淘宝的加速器,毕竟直接npm是外网的,很慢,但是这可能存在一些问题,遇到再说了。

npm install cnpm -g (-g的意思是全局安装,global)


到达你想安装的目录里面,然后在cmd中输入:cnpm install vue-cli -g,然后一路确定就行了

(但是也有可能一直卡在那里,我遇到过这个问题,当时也是安装一个初始的vue-cli,但是后面不知道怎么地就好了)

也可以通过webpack模版创建

vue init webpack myvue

通过上述的安装弄好后,需要安装一些依赖什么的,继续 npm install

等待。

最后运行npm run dev,完成。

PS:其实对于这些步骤,我好像只会跟着敲,甚至连Node.js干嘛的都不知道……先凑合着用吧,还是想多学学一些技术,找到实习和工作再说……

用法

待补充……

(真的越来越感觉我就只会简单用一用这个,以后再填坑吧!)