写给后端工程师看的Vue.js入门

时间  2020-05-15 标签 写给 后端 工程师 看的 vue.js vue 入门

写给后端工程师看的Vue.js入门

这期博客，写写Vue.jsjavascript

现在先后端分离已成主流，但想成为一个优秀全能的后端工程师，我想咱们也应该掌握Vue.js(由于它是国内最流行的前端框架)html

须要明白：前端

  • 咱们的JSON数据，传到前端后，发生了什么？前端的项目对咱们的数据作了什么？
  • 前端是怎么把咱们后端当初作的页面跳转给接管的？

须要掌握：vue

  • 建Vue实例，知道Vue的常见属性
  • 会使用Vue的生命周期的钩子函数
  • 会使用vue常见指令
  • 会使用vue计算属性和watch监控
  • 会编写Vue组件
  • 掌握组件间通讯
  • 了解vue-router使用

若是你已经至少掌握WEB开发的一些技术后，学习它的速度会很是快！java

文章目录

背景介绍[选看]

静态页面node

最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容便可。jquery

Dom异步刷新git

1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.github

随着JavaScript的诞生，咱们能够操做页面的DOM元素及样式，页面有了一些动态的效果，可是依然是以静态为主。web

Ajax盛行：

  • 2005年开始，ajax逐渐被前端开发人员所重视，由于不用刷新页面就能够更新页面的数据和渲染效果。
  • 此时的开发人员不只仅要编写HTML样式，还要懂ajax与后端交互，而后经过JS操做Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型表明。

Node.js

2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。

2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js。

  • 基于事件循环的异步IO
  • 单线程运行，避免多线程的变量同步问题
  • JS能够编写后台代码，先后台统一编程语言

node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。

随后，在node的基础上，涌现出了一大批的前端框架：

MVVM模式

  • M：即Model，模型，包括数据和一些基本操做

  • V：即View，视图，页面渲染结果

  • VM：即View-Model，模型与视图间的双向操做（无需开发人员干涉）

    咱们以前玩的是MVC，MVVM模式至关因而帮咱们把M和V绑定到一块了，天然实现了先后端分离

    在MVVM以前，开发人员从后端获取须要的数据模型，而后要经过DOM操做Model渲染到View中。然后当用户操做视图，咱们还须要经过DOM获取View中的数据，而后同步到Model中

    而MVVM中的VM要作的事情就是把DOM操做彻底封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

    只要咱们Model发生了改变，View上天然就会表现出来。

    当用户修改了View，Model中的数据也会跟着改变。

    把开发人员从繁琐的DOM操做中解放出来，把关注点放在如何操做Model上。

Part1_使用Vue（Quickly Strat）

Vue.js提供了cdn服务，因此咱们能够无需任何安装就可使用vue，根据官网介绍

you can create an index.html file and include Vue with:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

or:

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

你只须要在html文件引入上述两段vue代码便可

来看看vue的第一个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{name}}，is learing  </h2> <!--name ->声明式渲染-->
</div>
</body>

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> // 建立vue实例 var app = new Vue({ el:"#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面须要的数据 name: "Junsir" } }); </script>
</html>

  • 首先经过 new Vue()来建立Vue实例
  • 而后构造函数接收一个对象，对象中有一些属性：
    • el：是element的缩写，经过id选中要渲染的页面元素，本例中是一个div
    • data：数据，数据是一个对象，里面有不少属性，均可以渲染到视图中
      • name：这里咱们指定了一个name属性
  • 页面中的h2元素中，咱们经过{{name}}的方式，来渲染刚刚定义的name属性

神奇的地方在于，当你修改name属性时，页面会跟着变化！！

双向绑定

在h2元素上方新增input，v-model与name属性绑定

<input type="text" v-model=name></input>

在这里插入图片描述

  • input与name绑定，input的value值变化，影响到了data中的name值
  • 页面{{name}}与数据name绑定，所以name值变化，引发了页面效果变化。

不知道看到这里，你对vue是否是有一个大概的轮廓了呢？

Part2_Vue实例

每一个 Vue 应用都是经过用 Vue 函数建立一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

在构造函数中传入一个对象，而且在对象中声明各类Vue须要的数据和方法，包括：

el、data、methods等

EL:

模板或元素

每一个Vue实例都须要关联一段Html模板，Vue会基于此模板进行视图渲染

咱们能够经过el属性来指定

例如一段html模板：

<div id="app">
    
</div>

而后建立Vue实例，关联这个div

var vm = new Vue({
	el:"#app"
})

这样，Vue就能够基于id为app的div元素做为模板进行渲染了。

注意：在这个div范围之外的部分是没法使用vue特性的。

Data:

当Vue实例被建立时，它会尝试获取在data中定义的全部属性，用于视图的渲染，而且监视data中的属性变化，当data发生改变，全部相关的视图都将从新渲染，这就是“响应式“系统。

Methods:

Vue实例中除了能够定义data属性，也能够定义方法，而且在Vue实例的做用范围内使用

<div id="app">
  <h2>{{nums}}</h2>
  <button v-on:click="add">加一个</button>
</div>
var app = new Vue({
    el:"#app", // el即element，该vue实例要渲染的页面元素
    data:{ // 渲染页面须要的数据
      name: "Junsir",
      nums:0
    },
    methods:{
      add:function () {
        this.nums++ ;  //当前实例对象属性
      }
    }
  });

在这里插入图片描述

Part3_生命周期钩子

每一个 Vue 实例在被建立时都要通过一系列的初始化过程 ：建立实例，装载模板，渲染模板等等。Vue为生命周期中的每一个状态都设置了钩子函数（监听函数）。每当Vue实例处于不一样的生命周期时，对应的函数就会被触发调用。

钩子函数：

beforeCreated：咱们在用Vue时都要进行实例化，所以，该函数就是在Vue实例化时调用，也能够将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。

created：在建立实例以后进行调用。

beforeMount：页面加载完成，没有渲染。如：此时页面仍是{{name}}

mounted：咱们能够将他理解为原生js中的window.onload=function({.,.})也能够理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕以后将要执行的函数，该函数在Vue1.0版本中名字为compiled。 此时页面中的{{name}}已被渲染

beforeDestroy：该函数将在销毁实例前进行调用 。

destroyed：改函数将在销毁实例时进行调用。

beforeUpdate：组件更新以前。

updated：组件更新以后。

created: function () { //建立实例后调用，将nums初始化为100
      this.nums = 100;
    }
    /* 等效于 data:{ // 渲染页面须要的数据 name: "Junsir", nums:0 }*/

Part4_Vue指令

总结经常使用的Vue指令

Part5_Vue组件化

详谈Vue组件化

Part6_Vue-router路由

Vue最终序曲——Router

联系我们 沪ICP备13005482号-10