Vue study

最近入职ibm，接手一个简单的poc项目。vue+node

一直都做得是纯java后台项目，借此机会学习一下。

学习网站当然是官网了，很好用。

https://cn.vuejs.org/v2/api/

还有就是一本书。《Vue.js实战》清华大学出版社的，在cnds上下载的pdf版本的。用ipad看起来刚刚好。

ide用的是vs code，装环境有node.js vue.js

完事后用npm install更新组件

执行npm install -g vue-cli

vue-cli用来构建vue项目。webpack init一下helloworld项目结构就构件好了。

关于前端做过一个thymeleaf项目，所涉及的只是不多，所以一些抽象概念还需要反复的去理解。

我把相应的理解记到这里。

①生命周期钩子：

https://blog.csdn.net/weixin_42782004/article/details/102518219

https://www.zhihu.com/question/50880439

其实相关的api网站上都有说明，这个自己看就好。

②指令与事件：

指令(Directives)是Vue最常用的功能。它带有前缀 v-，比如v-if，v-for，v-show

最重要的两个一个是v-bind和v-on可能实际工程很少看到，那是因为语法糖的原因。

v-bing的语法糖是：

v-on的语法糖是@

比如说<button @click="handleClose">  // <button v-on:click="handleClose"> 

<a :href="url"> // <a v-bind:href="url">

③实例与数据

var app = new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
  data() {
    return {
       a: 1
    }      
  }    
})
// 变量app代表这个Vue的实例，实例中其中必不可少的就是el
实例有很多内置的属性和方法。用$开头，比如app.$el
vue对象本身也代理了data对象的所有属性。
比如说app.$data.a 可以直接写成app.a
有一点注意的是为了不和vue的自身属性冲突，_和$开头不会被代理。

④插值与表达式，过滤器

这里面有个重要概念，数据双向绑定

{{}}

这个跟java都是一样的绑定的是变量即引用。关于过滤器，我们可以将他理解成为一个函数。{{}}尾部用管道符 | 调用相应的过滤器。过滤器可以定义在methods里。

{{}}里也可以也可以加入简单的表达式。比如{{ number / 10}} {{ isOK ? ‘OK‘ : ‘ NO‘ }} 或者类似与java stream的流式处理 {{test.split(‘,‘).reverse()/join(‘,‘)}}

过滤器可以串联 {{msg | filter1 | filter2}} 也可以接受参数，当然过滤器默认第一个参数是|前的数据本身。

 ⑤生命周期

Vue内置的api，我们只需重写其内容即可。

api里有详细介绍。比较容易混的是activated和created 需要注意。

今天先写到这。

Vue study

原文：https://www.cnblogs.com/saber-himesama/p/14290023.html