适合后端人才学习的Vue教程

PS: 后端开发使用Vue大多数情况下是前后端数据交互,所以对于Vue的了解就不必特别深.闲话少叙教程开始

什么是Vue? (这里我就不CV官方文档上的定义了,简单用大白话来解释一下)

以往我们在用原生JavaScript或者是JQuery再或者其他的JS库(框架)的时候,都是直接操作Dom元素的.例如: JS的doucument.getElementById,JQuery$(selector).而Vue最大的特点就是不需要再对这些繁琐的Dom进行操作,而是使用双向数据绑定.什么是双向数据绑定呢?这里就不啰嗦了有想要了解的可以自行了解一下,我把我对双向数据绑定的理解会整理到下一篇教程中.

接下来我们通过一下实例来感受一下Vue

<!-- 导包-->
<script src="vue.min.js"></script>
<body>
    <div id="app">
        {{message}}
    </div> 
</body>

let vm = new Vue({
    el: '#app',
    data: {
        message: 'this is a message'
    }
});

执行效果就是,JS中data中的message的内容替换掉了{{message}}

属性

类似实例中的el,data这样的东东就是Vue的属性

el:挂载点,理论上所有的CSS选择器都是可以使用的,但是由于其他选择没有ID选择器的唯一性,所以推荐使用ID选择器

data:数据对象,支持JS所有的数据类型(String,Array,Object,Boolean...)

methods:事件对象,这里写一些JS函数方法

.......

如果需要请自行了解其他的,如果遇到初始化参数等问题不妨了解一些Vue的生命周期

指令

v-text:与{{}}类似但是二者是有区别的,前者替换元素中所有的内容,后者只会替换大括号的部分

<span>Message: {{ msg }}</span>
<span v-text="msg">Message</span>

v-html:与v-text唯一的不同就是可以解析Html代码(也就是设置innerHtml)

<span v-html="msg">Message</span>

v-on:为元素绑定事件,简写@,例如: v-on:click=fun()可以简写为@click=fun()(Vue提供一些事件修饰符)

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-show:切换元素的显示与隐藏,就是操作display这个CSS属性

<h1 v-show="flase">Hello!</h1>

v-if:同v-show,不同的是v-if操作的是Dom元素

<template v-if="flase">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-bind:动态指定元素属性值,简写:,例如: v-bind:src='../xxx.jpg'可以简写为:src='../xxx.jpg'

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-for:生成列表结构

<ul id="app">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var vm = new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-model:双向数据绑定,就是在页面对data中的数据进行操作时,使原数据也跟着改变

请求

Ajax或者Axios都可以,只需要注意一些this的指向