前端框架Vue入门

简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

环境安装

环境准备：
node

npm

vue-cli

vue-devtools

nvm安装：用来管理node版本

下载chrome 插件地址：
https://chrome-extension-downloader.com/

BootCDN: https://www.bootcdn.cn/

模板语法

vue 文件结构（template,script, style）
插值语法 {{msg}}, 数据, js表达式
指令（指令缩写）@click :href

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            color: red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script></head>
<body>
<div id="app">
<div class="bg" v-bind:id="bg1">
    hello world!
    {{msg}}
</div>
<div class="bg">
    {{msg}}
</div>
    {{count}}
    {{(count + 1)*10}}
<div v-html="template">

</div>
<a :href="url">百度</a>
<!--v-bind:绑定页面属性, 可以直接缩写 ：-->
    <button type="button" @click="submit()">数字加1</button>
<!--v-on:事件 缩写@ -->
</div>

<script>
    new Vue({
       el:'#app', // .bg
       data: {
           msg: 'hello vue!!',
           count: 1,
           template: '<div>hello template</div>',
           url: 'https://www.baidu.com/',
           bg1: 'app-bind'
       },
       methods: {
           submit: function() {
               this.count ++
           }
       }
    })
</script>
</body>
</html>

计算属性与侦听器

计算属性: conputed
侦听器： watch

侦听器：

<script>
    var app = new Vue({
       el:'#app', // .bg
       data: {
           msg: 'hello vue!!',
           count: 1,
           template: '<div>hello template</div>',
           url: 'https://www.baidu.com/',
           bg1: 'app-bind'
       },
       methods: {
           submit: function() {
               this.count ++
           }
       },
       watch: {
           msg: function (newVal, oldVal) {
               console.log('newVal is:' + newVal)
               console.log('oldVal is:' + oldVal)
           }
       }
    })
</script>

给Vue 对象一个变量，这样就可以在chrome console 里进行调试了,下面是针对watch属性的一个使用调试：

当改变app.msg的值后，就会调用watch 对应的function函数，打印相关信息

app.msg
"hello vue!!"
app.msg = "new message!!"
index.html:49 newVal is:new message!!
index.html:50 oldVal is:hello vue!!
"new message!!"

计算属性

computed 中的相关属性任意值发生变化都会影响msg1值的变化

监听的值都是本实例中的值

watch: {
   msg: function (newVal, oldVal) {
       console.log('newVal is:' + newVal)
       console.log('oldVal is:' + oldVal)
   }
},
computed: {
   msg1: function () {
       return 'computed ' + this.msg + ',' + this.another
   }
}

watch 监听的一般是单一的变量或数组--异步场景

computed 可以监听很多变量，并且这些变量一定是Vue里的 -- 数据联动

条件渲染、列表渲染、Class与Style绑定

v-if|| v-show 用法

<div id="app">
    <div v-if="count > 0">
        判断1：count大于0,count的值是：{{count}}
    </div>
    <div v-else-if="count < 0 && count > -5">
        判断2：count的值是：{{count}}
    </div>
    <div v-else>
        判断3：count的值是：{{count}}
    </div>
    <div v-show="count == -1">show: {{count}}</div>
</div>

script>
    var app = new Vue({
       el:'#app', // .bg
       data: {
           count: 1
       }
    })
</script>

根据条件判断是否展示相关内容

v-for

<div v-for="item in list"> {{item}}</div>

<script>
        var app = new Vue({
           el:'#app', // .bg
           data: {
               msg: 'hello vue!!',
               count: 1,
               list: [1,2,3,4,5]
           })
</script>

v-for 与 v-if、v-show 结合使用：

    <div v-for="item in list">
        <div v-if="item.age > 29">
            {{item.name}}
        </div>
        <div v-else>
            {{item.age}}
        </div>
        <div v-show="item.age > 29">
            {{item.name}}
        </div>

    </div>

Class与Style的绑定

Style 绑定：

    <div v-show="item.age > 29" v-bind:style="styleMsg">
            {{item.name}}
    </div>
    
    <script>
        var app = new Vue({
           el:'#app', // .bg
           data: {
               styleMsg:{
                 color: 'red',
                 textShadow: '0 0 5px green'
               },
               msg: 'hello vue!!'
           })
</script>

class 绑定：

<div v-show="item.age > 29"
             :class="['active', 'add', 'more', {'another':item.age < 30}]"
             :style="styleMsg">
            {{item.name}}
</div>

item.age < 30 的时候，another 才会展示出来

Vue-Cli

安装：

npm install -g @vue/cli

查看版本：

vue --version

如何创建工程：

vue create project

vue ui    // 可视化创建项目

vue 项目的目录结构：

-- public
-- src
-- package.json

组件化思想

组件主要实现功能模块的复用

可以很高效的执行

可以将一些复杂的页面逻辑进行拆分

如何进行拆分：

业务代码行不超过300行原则
复用原则

组件带来的问题：
1.组件状态管理(vuex)
2.多组件的混合使用，多页面，负责业务（vue-router）
3.组件间的传参、消息、事件管理(props，emit/on，bus)

vue 代码风格

https://cn.vuejs.org/v2/style-guide/

vue-router

views 下创建相关vue 文件
在route.js里配置相关路由

{
                path: '/data',
                name: '数据',
                icon: 'dashboard',
                component: PageLayout,
                children: [
                    {
                        path: '/data/info',
                        name: '详情',
                        icon: 'none',
                        component: () => import('@/views/data/Info')
                    }]
            }

3.在相关页面配置vue文件需要展示的地方

vuex

场景：

多个视图依赖于同一个状态(如菜单导航)
不同视图的行为需要变更同一状态(如评论弹幕)

为vue.js开发的状态管理模式

组件状态统一管理

组件状态改变遵循统一的规则

使用需要做如下几步：

定义store.js 文件

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
       increase() {
        this.state.count ++
       }
    },
    actions: {
        
    }
});

state：组件公用的状态

mutations: 定义改变状态的方法

2.组件中使用，需要引入store.js 文件

import store from '@/store/index'
export default {
name: "About",
store,
methods: {
    add() {
        console.log("add")
        store.commit('increase')
    }
    }
}
</script>

store.commit() 提交修改

3.组件之间使用

在另一个文件使用状态

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    import store from '@/store/index'
    export default {
        name: "Config",
        store,
        data () {
            return {
               msg: store.state.count
            }
        }
    }
</script>
<style scoped>
</style>

如何进行调试

vue 有Chrome 插件

在需要调试的地方写上debugger

查看vue 变量的值可以直接在chrome console 里，写this.变量（debug模式下）

chrome Network-xhr 查看相关请求

调试交互可以使用 Fast 3G | Slow 3G

可以把当前组件的this对象绑定到windows这个全局变量里去

mounted() {
  window.vue = this
},
methods: {
    add() {
        console.log("add")
        debugger
        store.commit('increase')
    },
    output() {
        console.log("output")
    }
    }
}

就可以直接在chrome console里打印 window.vue.output()

如何集成vue.js

单页面、多页面引入vue.js CDN
复杂单页面 vue cli 工具创建模板项目

开发工作流：

需求调研(确定需求)
交互设计、逻辑设计、接口设计
代码实现、测试运行、线上部署

GIT:

创建项目 git clone, git init
创建分支，推送分支，合并分支
删除分支，回退版本

git add . # 添加需要提交的文件
git commit -m "first commit" # 提交需要push的文件
git remote -v     # 可以看到远程的仓库
git push origin master
git branch -a  # 查看所有分支
git checkout -b dev #创建分支
git push origin dev # 提交到dev分支
-- 合并 分支 --
git checkout master
git merge dev
git push origin master

git branch -D dev # 删除dev分支
git push origin :dev # 删除远程分支
git reset --hard head^  # 退回到上一个版本
git log | git reflog  #查看之前的git 记录
git reset --hard HEAD@{1}  # 回退到任意版本

一个简单的单页面应用

代码:

<template>
    <div>
        <p>{{msg}}</p>
        <ul>
            <li v-for="(item, index) in lists"
                :key ="index"
                @click="choose(index)"
                :class="{active: index === current && current !==''}"
            >
                {{item}}
            </li>
        </ul>
        <button type="button" @click="add()">添加</button>
        <ul>
            <li v-for="(item, index) in target"
                :key ="index"
            >
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
    import store from '@/store/index'
    export default {
        name: "Config",
        store,
        data () {
            return {
               msg: store.state.count,
               lists: [1,2,3,4,5],
               target: [],
               current: ''
            }
        },
        methods: {
            choose(index) {
                this.current = index
            },
            add() {
                if (this.current==='') {return}
                this.target.push(this.lists[this.current])
                this.current=''
            }
        }

    }
</script>

<style scoped>
    li.active {
        background: green;
    }
</style>

效果图：

如何高仿别人的App

审查元素可以查看相应的Dom 结构
Header，Body 里面查看JS、CSS引用,搜索相应的js库
也可以查看chrome Network|Source中的js,使用反编与断点进行调试针对压缩的js文件，chrome 提供了format 功能

打包发布

项目打包：

npm run  build

打包完成后，把dist文件夹下所有的文件上传到服务器的根目录里去，就可以访问了

总结

本文主要讲解了vue框架的一些入门知识，vue 开发环境的搭建安装、打包发布，vue的模板语法，开发流程以及vue的相关组件使用，如何进行调试，至此就可以开发一些简单的单页面应用了。

简介