Vue入门

2019-02-13  本文已影响3人  CarsonChen

一. 简介Vue

官方文档地址:https://cn.vuejs.org/index.html

Vue.js为渐进式JavaScript框架
Vue框架为MVVM框架, 即数据源与控件双向绑定, 在实际项目中频繁操作DOM节点, 仅仅只需要控制数据源数据即可,不用考虑页面渲染.

二. Vue的基本知识

  1. Vue 2.x 框架的常用点(模板语法, 条件渲染, 列表渲染)
    简介Vue的Hello Word应用
    模板语法, v-bind属性绑定, 事件绑定
    条件渲染, 列表渲染, Class与Style的绑定

  2. Vue 2.x 核心技术(vue-router, vuex)
    Vue-cli工具, Vue代码规范
    Vue组件的调试方法
    Vue-router, vuex

  3. 集成Vue2.x
    介绍workflow工作流
    单页面Demo(动态表单,列表动态展示)
    使用Cli工具,开发常见的应用组件

三. Vue开发环境

IDE: WebStrom Or VS Code
Node.js: Node环境, NPM环境 (NVM, 多版本Node环境管理)
测试环境: Chrome, Vue.js
工程环境: Vue.js

终端输入:
npm install vue-cli
完成之后 输入
vue --version
进行查看是否安装成功Vue环境

四. 创建第一个Vue项目

代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
        .bg {
            color: cyan;
            font-size: 30px;
            font-weight: 200;
            background: magenta;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.6.3/vue.min.js"></script>
</head>

<body>
    <div id="aa" class="bg">
        <div class="a">{{msg}}</div>
        <div class="a">{{msg}}</div>
    </div>
    <script>
        new Vue({
            el: '#aa',
            data: {
                msg: "This is Vue"
            }
        })
    </script>

</body>

</html>

模板语法:
Vue的文件结构(template, script, style);
在标签中可使用插值语法{{msg}}, 数据, 以及JS表达式,

模板语法包含插值, 指令(指令缩写);
v-on:click 可以简写为@click
v-if
:href

计算属性与监听器
计算属性: computed
数据联动, 当计算属性中的所有的数据均发生变化的时候,响应此方法.
能监听多个变量,但是该变量必须是在Vue中的实例里.

computed: {
    msg1: function() {
        return 'computed' + this.msg;
    }
},

监听器: watch
仅仅是监听设备中的所有监听Vue中的属性值, 类似于iOS中的KVO.
异步场景
通常只监听一个变量

// 监听并观察data的属性数据变化,当方式变化的时候, 属性变化新,旧值
watch: {
    msg: function(newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
    }
},

条件渲染
v-if,
v-else,
v-else-if,
v-show,

// v-if, v-else, v-else-if, v-show之后的为JS表达式
<div v-if="count > 10">{{msg2}}</div>
<div v-else="count < 5">{{msg3}}</div>
<div v-show="count == 10">Count的值为{{count}}</div>

列表渲染
v-for

// list为数据源, item为遍历的数据元素, :key则是标记了此条数据的Tag值
<div v-for="(item, index) in list" :key="index">
    <div>{{item}}</div>
</div>

v-for与v-if结合使用

<div v-for="(item, index) in list" :key="index" v-bind:style="styleTest">
    姓名为:{{item.name}} 年龄为:{{item.age}}
</div>

v-for的高阶用法

Class与Style绑定

// 可以简写去掉v-bind
<div v-for="(item, index) in list" :key="index" :style="styleTest">
    姓名为:{{item.name}} 年龄为:{{item.age}}
</div>
// Class要绑定多个样式使用[]进行加类的操作
<div class="['aa', 'bb']"></div>

Vue-cli工具
快速创建Vue工程

// 在终端中进入到指定的文件夹目录
// 使用vue create demo 进行创建对应的Vue工程
// 完成之后进入demo文件夹下
// 使用 npm run serve进行运行此项目

// 或者使用vue ui进行创建新的Vue工程项目

工程化项目的目录

// 使用vue ui来进行创建Vue工程;
// 使用vue ui工具可以对Vue项目来进行编译运行在浏览器中

五. Vue组件化思想

组件化顾名思义, 为组件是独立的,组件可复用的,整体化的组件.
组件化的目的: 实现功能模块的复用,
高执行效率,
开发单页面复杂应用,可以将复杂的业务逻辑进行拆分

如何拆分复杂的业务逻辑
组件的代码不超过300行,
复用原则,
业务复杂性原则,

vue-router:
使用vue create命令进行创建Vue工程
vue组件创建

<template>
  <div>This is a component</div>
</template>

<script>

    export default {
    
    };
</script>

<style scoped>

</style>

在vue-router文件中进行相对应的组件配置:

    {
      path: '/new',
      name: 'new',
      component: newPage,
    },

最终在App.vue中进行配置点击链接跳转组件

<router-link to="/new">New</router-link>

组件间的状态管理
Vuex
多组件的混合使用,多页面,复杂业务(vue-router)
组件间的传参,消息,事件管理(props, emit/on, bus)
vuex单向数据流概念,
view->actions->state->view

vuex使用场景:
多个试图依赖于同一状态(例:菜单导航);
来自不同试图的行为需要变更同一状态(例:评论弹幕);

Vuex是为Vue.js开发的状态管理模式,特点是组件状态集中管理;并且组件的状态改变遵循统一的规则;

使用vue-cli工具创建的Vue工程中,勾选使用Vuex后会在工程目录中生成一个store.js的文件;

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  // 管理属性值
  state: {
    count: 0,

  },
  // 修改属性值方式
  mutations: {

    // 无参数修改Store属性值方法,建议先持有当前Vuex中的state使用临时变量进行修改
    increase(state) {
      const tmpState = state;
      tmpState.count += 1;
    },

    // 含参数修改Store属性值方法
    sub(state, value) {
      const tmpState = state;
      tmpState.count -= value;
    },

  },
  actions: {

  },
});

Vuex的简单实用

// 在组件中使用
import store from '@/store'; // 引入Store头文件
// 使用以下代码进行调用(increase则为store中mutations定义的方法名)
store.commit('increase');

Chrome中使用Vue插件进行Debug查看Vuex中的状态:


查看Vuex状态

六. Vue项目Debug

console.error('This is error log');   // 错误日志输出
console.log('This is normal log');    // 普通日志输出
debugger;                             // 加入断点
alert('This is alert dialog');        // 弹框显示
// 断点后可以直接调用方法
call() {
  console.log('Call Method');
},
// 绑定Window全局变量之后进行Debug 
// 页面开始挂载的时候的生命周期方法
mounted() {
    window.vue = this;
},

七.Vue项目参考

使用Chrome查看相对应的web页面的源码, 以及CSS样式


调试工具进行查看

调试小技巧
Chrome中调试查看DOM结构;
Header, Body里面看js/css引用, 搜索相对应的js库;
查看sources, network中的js, 使用反编译或者Debug进行调试;

八.Vue项目的集成

使用Scss进行CSS样式的编写

<style lang="scss">
.head {
  font-size: 40px;
  color: steelblue;
}
.cellNormal {
    height: 40px;
    font-size: 40px;
    background-color: cyan;
    &.active {
        color: magenta;
    }
}
.cellHighLigth {
    background-color: blue;
}
</style>

九. Vue项目打包部署

// 进入到Vue项目中使用如下命令进行打包
npm run build

注: 在Vue项目中需要配置webpack打包工具的配置,可以事先创建一个vue.config文件进行相对应的打包配置;
参考文档: https://cli.vuejs.org/zh/
文档中的webpack打包有相关的配置信息

静态网页发布:

// 进入工程,使用以下命令
npm run build
// 执行完此命令之后, 会生成一个dist文件夹,将文件夹中的内容放到Server中根目录下
// 即可完成部署
上一篇下一篇

猜你喜欢

热点阅读