VueJS + IDEA + Git

Posted 2021-04-29 TeddyZou

一、三大热门前端框架之一 VueJS

为什么要学习前端框架？

1. 更少的代码实现更多的功能；

2. 体验更好；

3. 前后台完全分离；

具体点说，比如一些复杂的网页由很多的元素组成，那么就需要手写很多 js 和 css，

而且因为团队成员水平不一致等原因，写出来的各个小“组件”在样式上可能就会不一致，

甚至在使用上都可能会不一致，给用户的体验就会下降，

如果使用框架，风格就可以保证统一，而且代码很简洁，

另外，框架提供的数据双向绑定可以提高用户的体验；

主流前端框架有哪些，了解一下

目前最火的3款前端框架：AngularJs、ReactJs 和 VueJs

网上翻阅几篇资料之后，个人感觉学 ReactJs 最不亏，

但是由于项目的原因，被选择了 VueJs，

原因可能是，学习曲线：AngularJs > ReactJs > VueJs

VueJs 是一个中国人写的，中国的大神还是蛮多的；

VueJs 最大的优势是视图组件化和数据驱动

组件化：把整个网页拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。

数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变 DOM 来改变视图，VueJs 只需要改变数据，就会自动改变视图，这就是 MVVM 思想的实现。

---

VUE 是什么？

VUE 是一款友好的、多用途且高性能的 JS 框架，

它能够帮助你创建可维护性和可测试性更强的代码库，

VUE 是渐进式的 JS 框架，

什么是渐进式框架，简单点说就是，可以低侵入性地使用一部分，也可以整套使用。

学习 VUE 需要什么基础

1. html，css，js

2. 模块化，nodejs 了解一下

3. 了解 ES6

---

1. 快速初始化一个工程

    vue init webpack my-pro

2. 先来一段官方视频的入门 demo

3. Vue.js 组件的重要选项

    （1）data: {}　--　数据，类似于 Java 类中的属性

    （2）created: {}　--　vue 对象被创建时执行

    （3）methods: {}　--　方法

    （4）computed: {}　--　计算属性，和普通的方法很像，区别是有缓存

    （5）watch: {}　--　侦听属性，适用场景：当需要在数据变化时执行异步或开销较大的操作时

4. 常用指令

    4.1 数据渲染：v-text、v-html、{{}}

    4.2 控制模块隐藏：v-if、v-show

        相同点：v-if 与 v-show 都可以动态控制 dom 元素的显示和隐藏；

        不同点：

            1. v-if 显示隐藏是将 dom 元素整个添加或删除，而 v-show 隐藏则是为该元素添加                 css-- display:none，dom 元素还在；

            2. v-show 不支持 <template> 元素；

            3. 从切换开销考虑的话，如果切换频繁，用 v-show 比较好，反之用 v-if；

        <template v-if="loginType === 'username'">

          <label>Username</label>

          <input placeholder="Enter your username" key="username-input">

        </template>

        <template v-else>

          <input placeholder="Enter your email address" key="email-input">

        </template>

        注意：加了 key，input 元素将不会被复用，也就是没加 key 属性，input 是同一个元素；

    4.3 渲染循环列表：v-for

    <ul id="example-2">

      <li v-for="(item, index) in items">

        {{ parentMessage }} - {{ index }} - {{ item.message }}

      </li>

    </ul>

    var example2 = new Vue({

      el: '#example-2',

      data: {

        parentMessage: 'Parent',

        items: [

          { message: 'Foo' },

          { message: 'Bar' }

        ]

      }

    })

    4.4 事件绑定：v-on（简写@）

        4.4.1 事件修饰符

        https://cn.vuejs.org/v2/guide/events.html#事件修饰符

        

    4.5 属性绑定：v-bind（简写:）

    如果绑定的属性是对象时，是控制显示，如果是数组时，显示数组元素的属性值；

    比如 isRed 为 true 时，最后解析为 <div class=“red”></div>

    当 isB 为 true，isC 为 false 时，最后解析为 <div class="classA属性的值 classB属性的值"></div>

    4.5.1 更多特性

        （1）is 特性：切换不同的组件

    4.6 在表单控件或者组件上创建双向绑定：v-model

        4.6.1 修饰符

        https://cn.vuejs.org/v2/guide/forms.html#修饰符

        注意：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

5. 生命周期钩子

什么是钩子? 每个 Vue 实例在被创建时，都要经过一系列的初始化过程，在这个过程中会运行一些函数。

常用钩子： created, mounted, updated, destroyed

    5.1 生命周期图示

6. 语法

import 和 export 都是 ES6 的语法；

const 定义一个常量；

7. 组件间的数据传递

      7.1 向子组件传递数据

    （1）使用 v-bind 来动态传递 prop

        <blog-post v-bind:title="post.title"></blog-post>

    （2）props: ['属性名']

        props: ['initialCounter'],

        data: function () {

          return {

            counter: this.initialCounter

          }

        }

    

      7.2 向父组件传递数据

        子组件中：

        this.$emit('say', 'hi')

        父组件中：

        <component-child v-on:say="listenToMyClild"></component-child>

        listenToMyClild: function (msg) {

            console.log(msg)

        }

      7.3 向子组件插入/替换内容（插槽）

        <slot> 元素

8. 路由

vue-router 库

https://github.com/vuejs/vue-router

vue-router 文档

https://router.vuejs.org/zh-cn/

9. 跳转

（1）template 中

    <a href="#/路由里面定义的路径组合">个人资料</a>

（2）template 中

    <cell is-link :link="{name:'路由里面定义的名字'}">个人资料</cell>

（3）template 中

    <router-link :to="{name:'路由里面定义的名字'}">

      <i class="图标"></i>

    </router-link>

（4）js 中

    this.$router.push({name:'路由里面定义的名字',params:{参数名1:this.参数值1,参数名2:this.参数值2}});

  当然，用 path 也是可以的，但是个人觉得用 name 更好；

10. 前台请求后台

11. vue 自带的弹框（组件）

（1）this.$vux.toast.show() -- 见第9点；

（2）this.$vux.confirm.show() -- 见下图

12. 覆盖公共组件的样式

需求：当一个页面引用一个公共组件（子组件）的时候，且需要作一些样式修改。

用行内样式覆盖？这是一个组件，不是一个标签，行不通；

用内嵌式样式覆盖？和标签的效果不同，会污染组件的全局效果，这是 vue 比较特别的地方；

解决方法：

用内嵌式样式 + scoped + deep

13. 给 x-input 组件添加聚焦事件

<x-input title="姓名：" type="text" v-model="userInfo.realname" ref="usernameInput" />

this.$refs.usernameInput.focus();

注意：$refs 只会在组件渲染完成之后生效

14. 前后台完全分离

前台工程和后台工程不需要都在本地，

如果你只负责前台工程，你只需要把界面写好就行，

或者只负责后台工程，你只需要把接口写好就行，

如果你前后台都需要开发维护的话，这种分离的意义不大，

但是还是有好处的，如果项目既有 PC 端，还有移动端，

那么后台代码可以只用一套，减少维护量；

15. 官方论坛

https://forum.vuejs.org/c/chinese

---

二、最好用的开发工具 IDEA

    IDEA 比 eclipse 好在哪里？

        1. 提示功能异常强大；

        2. 下载源码包很方便；

        3. 集成插件稳定，较少出现各种插件使用不适的问题；

    IDEA 比 eclipse 差在哪里？

        1. 一个编译器一个项目，不方便；（当然，这个可以设置 module）

        2. 占用内存较大；

    eclipse 转 IDEA

        快捷键不习惯？

            IDEA 里面可以把快捷键设置成 eclipse 的；

    安装与破解 IDEA 2017

        https://blog.csdn.net/yangying496875002/article/details/73603303

        注：有2018版了，有兴趣的，可以下载；

---

三、最流行的版本控制工具 Git

    为什么选择 Git

    

        SVN 有一个中心版本库，

        如果断网了，项目组的小伙伴都提交不了代码了，

        更严重的情况，如果中心版本库挂了，会引起单点故障；

        

        而 Git 是一个开源的分布式版本控制工具，

        和 SVN 有个很大的不同点，多了一个本地版本库，

        每次 push 前，都需要先全部更新，以保证本地版本库和中心版本库一模一样，

         这样一来，SVN 存在的2个大问题都解决了；

        

        但是 Git 再好，也是有缺点的，比如

            1. 安全性低，没有 SVN 集中管理那么安全；

            2. 提交没有 SVN 那么灵活；

    

    Git 全更新发生冲突的解决方法

    

        stash 或者 shelve；

        2个命令都是把代码暂存搁置，stash 是 git 原生的，shelve 是 idea 独有的。

    建议

    至于 IDEA 里面集成的 Git 怎么使用，自行学习，这么简单的问题我就不提供教程了，网上大把；

    最后再说点，最好还是要会使用 Git Bash，不仅逼格高点，会的路数多一点总是好的，而且学几个命令又不难。