vue快速上手-1

作者: 前端_吴英杰 | 来源:发表于2021-01-08 14:45 被阅读0次

vue快速上手-1
Vue 快速上手(实例)
一文快速上手Vue3
vue3
TS 入门和Vue实践
vue快速上手
vue快速上手
Vue快速上手
Vue3快速上手
Vue 基本知识

1. 搭建项目之前，请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。

安装好node默认已经安装好npm了，所以不用单独安装了。
vue-cli2:

npm install vue-cli -g

vue-cli3/cli4:

npm install -g vue@cli

vue引用各种资源在网速不太理想的情况下，可能比较慢，推荐安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 创建新项目

vue-cli2:

vue init webpack 2.0project

2.0版本项目结构详细介绍

vue-cli3/cli4:

vue create 3.0project

3.0版本项目结构详细介绍

3. 启动项目

vue-cli2:

npm run dev / cnpm run dev

vue-cli3/cli4:

npm run serve / cnpm run serve

在这里，推荐使用2.0版本：

cli2个性化强一些，可以更友好的配置webpack；cli3通用性强一些，达到真正的开箱即用，几乎零配置，已经将最适合开发的配置打包封装。
两者都可以符合开发需求，个人比较熟悉cli2版本。
两者区别

4. mvvm简单介绍

众所周知vue是一个MVVM 渐进式框架，MVVM是vue的设计模式，在vue框架中数据会自动驱动视图。

View是视图，就是DOM；对应视图也就是HTML部分--代表UI组件，它负责将数据模型转化成UI展现出来。 Model是模型，就是vue组件里的data，或者说是vuex里的数据；--代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 ViewModel--监听模型数据也就是data的的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。
在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewMode进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。

ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty中的访问器属性中的 get和 set方法

5. vue的生命周期

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm. $el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

activated

keep-alive 组件激活时调用。

deactivated

keep-alive 组件停用时调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

举例：login.vue

<template>
  <div class="login_wrapper">
    <div class="login">
      <el-form :model="formLogin">
        <el-form-item>
          <h2 class="title">K&C DESIGNER</h2>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formLogin.mobile" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" v-model="formLogin.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登陆</el-button>
          <span v-show="this.errorInfo.isShowError" class='error'>
            {{this.errorInfo.text}}
          </span>
        </el-form-item>

      </el-form>

    </div>

  </div>
</template>

<style lang="scss" scoped>
  $input_width:300px;

  .login_wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../../static/img/login1.jpg) no-repeat center top;
    background-size: cover;
    .login {
      width: 420px;
      height: 326px;
      border: 1px solid #393939;
      box-shadow: 0 0 25px #393939;
      background-color: rgba(0,0,0,0.5);
      border-radius: 10px;
      .forget-password {
        font-size: 14px;
        cursor: pointer;
        color: #20A0FF;
      }
  }
</style>

<script>
  import apis from '../apis/apis';
  export default {
    name: 'login',
    data() {
      return {
        formLogin: { //表单对象
          mobile: '',
          password: ''
        },
        errorInfo: {
          text: '登陆失败,请重试',
          isShowError: false //显示错误提示
        }

      }
    },
    mounted() {
      document.onkeydown = (event) => {
        let router = this.$route.path;
        let e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13 && this.$route.path == '/login') { 
// enter 键
          this.login();
        }
      };
    },
    methods: {
      toForget() {
        this.$router.replace({
          path: "/forgetPassword"
        });
      },
      login() {
        //调用后端登陆接口
        apis.loginIn(this.formLogin)
          .then((data) => {
            if (data && data.data) {
              
            }
          })
          .catch((err) => {
            this.errorInfo.isShowError = true;
            this.errorInfo.text = '系统接口异常';
          });

      }
    }
  }
</script>

5. vue组件

组件概念：

html、css与js的集合，为该集合体命名，用该名字复用html、css与js组成的集合体构成复用性。

组件分类：

根组件：new Vue()生成的组件

局部组件：组件名={}，{}内部采用的是部Vue语法

全局组件：Vue.component（‘组件名’，{}），{}内部采用的是Vue语法

组件的特点：

1、组件都有管理组件HTML页面结果的template实例成员，template中有且只有一个根标签；

2、根组件都是作为最顶级层的父组件，局部与全局组件作为子组件，也可以成为其他局部与全局父组件；

3、子组件的数据需要隔离(数据组件化，每一个组件拥有自己的数据独立名称空间)；

4、局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件

简单举例组件使用：

定义需要被引入的组件YesOrNoSelect.vue

<template>
    <select>
        <option v-for="item in options" v-bind:key="item.id">{{item.text}}</option>
    </select>
</template>

<script>
export default {
    name: 'YesOrNoSelector',
    data () {
        return {
            options: [
                {id: '', text:'全部'},
                {id: 0, text:'否'},
                {id: 1, text:'是'}
                ]
        }
    }
}
</script>

<style scoped>
select {
    width: 100px;
    height: 30px
}
</style>

注册组件
在main.js中全局注册

import YesOrNoSelect from '@/components/YesOrNoSelect'
Vue.component('yes-or-no-select', YesOrNoSelect)

或者在HelloWorld.vue中局部注册

<script>
import YesOrNoSelect from '@/components/YesOrNoSelect'

export default {
  name: 'HelloWorld',
  components: {
    YesOrNoSelect
  }
}
</script>

使用自定义的组件 HelloWorld.vue

<template>
  <div>
    YesOrNo: <yes-or-no-select />
  </div>
</template>

<script>

import YesOrNoSelect from '@/components/YesOrNoSelect'

export default {
  name: 'HelloWorld',
  data () {
    return {
      
    }
  }
}
</script>

关于组件之间的通信