【Vue 入门】使用 Vue二 开发3个显得类型列表的施用

前言

一贯未有找到三个相宜的显得个人项指标模版,所以本身出手使用 Vue
写了三个。该模板基于 马克down 文件举办布局,只供给按自然规则编写
马克down 文件,然后使用多个
在线工具 转为 JSON
文件即可。上边是该类型的在线地址和源码。本文首要记录一下连串中用到的连带文化。

在线演示   
源码

效果

次第最后的功效如下图所示:

图片 1

全体项目只含有多个零件:项目介绍 和
侧边导航,逻辑相比较不难,拾1分符合入门。

条件铺排

此地大家利用 居尔p 和 Webpack 用作项目创设筑工程具。初次使用 居尔p 和 Webpack
恐怕不太适应,因为它们的计划或然让您看的1只雾水。然则不用顾虑,那五个毕竟只是多个工具,在开班时从没要求专门的打听它们的工作规律,只要能运作起来就能够。等到使用了一段时间之后,任天由命的就精通该怎么安顿了。那里根本记录一下品种中动用的布局,要是想要系统的学习怎样使用那四个工具,能够参见上边包车型客车篇章:

Gulp 和 Webpack 集成

居尔p 和 Webpack 集成三个相比简单的情势正是将 Webpack 作为 居尔p 的叁个task,如上面包车型客车花样:

var gulp = require("gulp");
var webpack = require("webpack");

gulp.task("webpack", function (callback) {
    //webpack配置文件
    var config = {
        watch: true,
        entry: {
            index: __dirname + '/src/js/index.js'
        },
        output: {
            path: __dirname + '/dist/js',
            filename: '[name].js'
        }
        //........
    };
    webpack(config, function (err, stats) {
        console.log(stats.toString());
    });
});

gulp.task('default', [ 'webpack']);

上边大家分别介绍一下 gulp 和 webpack 的布置

Gulp 配置

居尔p 中重要配置了七个职分:webpack 和 browserSync,那里关键说一下
browserSync。browserSync
主要用以自动刷新浏览器。首先大家配备必要监听的文件,当这么些文件发出变更后,调用
browserSync 使浏览器自动刷新页面。上面是有血有肉的配置

var gulp = require("gulp");
var browserSync = require('browser-sync');

// 添加 browserSync 任务
gulp.task('browserSync', function () {
    browserSync({
        server: {
            baseDir: '.'
        },
        port: 80
    })
});

// 配置需要监听的文件,当这些文件发生变化之后
// 将调用 browserSync.reload 使浏览器自动刷新
gulp.task("watch", function () {
    gulp.watch("./**/*.html", browserSync.reload);
    gulp.watch("dist/**/*.js", browserSync.reload);
    gulp.watch("dist/**/*.css", browserSync.reload);
});

// 添加到默认任务
gulp.task('default', ['browserSync', 'watch', 'webpack']);

Webpack 配置

咱俩利用 webpack
进行能源打包的行事,就是说将各个能源(css、js、图片等)交给 Webpack
进行政管理制,它会将能源整合压缩,大家在页面中只需引用压缩之后的文件即可。webpack
的底蕴配置文件如下所示

gulp.task("webpack", function (callback) {

    //webpack配置文件
    var config = {
        // true 表示 监听文件的变化
        watch: true,
        // 加载的插件项
        plugins: [
            new ExtractTextPlugin("../css/[name].css")
        ],
        // 入口文件配置
        entry: {
            index: __dirname + '/src/js/index.js'
        },
        // 输出文件配置
        output: {
            path: __dirname + '/dist/js',
            filename: '[name].js'
        },

        module: {
            // 加载器配置,它告诉 Webpack 每一种文件需要采用什么加载器来处理,
            // 只有配置好了加载器才能处理相关的文件。
            // test 用来测试是什么文件,loader 表示对应的加载器
            loaders: [
                {test: /\.vue$/, loader: 'vue-loader'}
            ]
        },
        resolve: {
            // 模块别名定义,方便后续直接引用别名,无须多写长长的地址
            // 例如下面的示例,使用时只需要写 import Vue from "vue"
            alias: {
                vue: path.join(__dirname, "/node_modules/vue/dist/vue.min.js")
            },
            // 自动扩展文件后缀名,在引入文件时只需写文件名,而不用写后缀
            extensions: ['.js', '.json', '.less', '.vue']
        }
    };
    webpack(config, function (err, stats) {
        console.log(stats.toString());
    });
});

webpack 的连锁配置表明能够参考前面包车型客车提交的稿子,上边说一下使用 webpack 二相遇的坑:

extract-text-webpack-plugin

extract-text-webpack-plugin 会将 css 样式打包成1个独自的 css
文件,而不是一向将样式打包到 js 文件中。下边是运用方法

{
    plugins: [new ExtractTextPlugin("../css/[name].css")],
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        },
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader!less-loader"
            })
        }
    },
}

那里必要注意的地点便是,extract-text-webpack-plugin 在 webpack 1 和
webapck 2 中的安装形式各异,要求基于使用的 webpack 版本来安装:

# for webpack 1
npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev extract-text-webpack-plugin@beta

压缩文件

选拔 UglifyJsPlugin 插件能够减掉 css 和 js
文件,不过一开始时连连不能够压缩文件,后来查看了须臾间材质,大概是因为上边多少个原因:

  1. uglifyjs-webpack-plugin 重视于 uglify-js,而 uglify-js 暗中认可不辅助ES陆 语法,所以需求设置支撑 ES陆 语法的 uglify-js
    npm install mishoo/UglifyJS2#harmony --save
  2. webpack 2 中,UglifyJsPlugin 暗中同意不减价扣 loaders,假使要运维 loaders
    压缩,需求参预下边的布署:
    js plugins: [ new webpack.LoaderOptionsPlugin({ minimize: true }) ]

比方按下边包车型客车改动了依然不能够压缩文件,能够试着将 node_modules
删除,然后重新安装重视。

Vue

本有的重大记录一下先后中用到的 Vue 语法,假如想要系统的上学一下
Vue.js,能够参见上边的小说:

HelloWorld

咱俩先是来看一个最简单易行的 Vue 示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    {{ message }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

</body>
</html>

每一种 Vue 应用都会创设3个 Vue 的根实例,在根实例中须要传入 html 标签的
id,用来告诉 Vue 该标签中的内容必要被 Vue
来分析。上面是一个简单的数额绑定的以身作则,在运营实 {{ message }}
会被分析为 “Hello Vue!”。

基础

本节参考自 Vue 粤语文书档案,略有修改

在写 Vue 应用在此之前,大家要纯熟一下 Vue
的主导语法,重要回顾数据绑定、事件处理、条件、循环等,下边大家逐条看下相关的知识。

多少绑定

Vue.js 使用了基于 HTML 的模板语法,允许开发者注明式地将 DOM 绑定至底层
Vue 实例的数目。全体 Vue.js 的模版都以官方的 HTML
,所以能被遵照规范的浏览器和 HTML 解析器解析。上边是 Vue.js
数据绑定的有关语法:

  • 文本
    数码绑定最广大的情势便是使用 “Muestache”
    语法(双大括号),如下边的花样:

    Message: {{ msg }} 
    

    Muestache 标签会被分析为对应对象上的 msg 属性值。当 msg
    属性发生改变今后,Muestache 标签处解析的始末也会趁机更新。

    因而采纳 v-once
    指令,大家能够实施三次性解析,即数据变动时,解析的剧情不会趁着更新。必要注意的是
    v-once 会影响该节点上的有着数据绑定

    This will never change: {{ msg }}
    
  • Raw HTML
    任凭属性值是何许内容,Muestache
    标签里的始末都会被分析为纯文本。假使期望将绑定的值解析为 HTML
    格式,就供给动用 v-html 指令:

    <div v-html="variable"></div>
    
  • 属性值
    Mustache 语法不能够用在 HTML 的性质中,假使想为属性绑定变量,供给选用
    v-bind 指令:

    <div v-bind:id="dynamicId"></div>
    

    假设 dynamicId=1,那么地点代码就会被分析为

    <div id="1"></div>
    

    另外 v-bind 指令能够被缩写为
    :,所以大家在先后中平常来看的是底下的语法方式:

    <div :id="dynamicId"></div>
    <!-- 等价于 -->
    <div v-bind:id="dynamicId"></div>
    
  • 表达式
    对于持有的数码绑定, Vue.js 都提供了截然的 JavaScript
    表明式援助,如上边包车型客车方式:

    // 加法
    {{ number + 1 }}
    
    // 三元表达式
    {{ ok ? 'YES' : 'NO' }}
    
    // JS 库函数
    {{ message.split('').reverse().join('') }}
    
    // 指令中使用表达式
    <div v-bind:id="'list-' + id"></div>
    

事件处理

透过动用 v-on 指令能够监听 DOM 事件来触发 JS
处理函数,上面是二个完完全全的言传身教:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <button v-on:click="increase">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            increase: function() {
                this.counter++;
            }
        }
    })
</script>

</body>
</html>

平常情形下,v-on 会被简写为 @,所以大家在先后中一般是看出上面包车型地铁方式

<button @click="increase">增加 1</button>
<!-- 等价于 -->
<button v-on:click="increase">增加 1</button>

条件指令 v-if

透过 v-if 指令我们得以依据有个别原则来控制是不是渲染内容,如上面包车型地铁款式

<h1 v-if="ok">Yes</h1>

咱俩普通将 v-if 和 v-else 结合起来使用,如下所示:

<div v-if="Math.random() > 0.5">
    Now you see me
</div>
<div v-else>
      Now you don't
</div>

在 Vue 二.1.0 中新增了1个 v-else-if 指令,能够实行链式判断:

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
      B
</div>
<div v-else-if="type === 'C'">
      C
</div>
<div v-else>
      Not A/B/C
</div>

巡回指令 v-for

通过 v-for
指令,大家得以根据1组数据实行迭代渲染,上面是八个为主示例:

<ul id="example-1">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

var example1 = new Vue({
    el: '#example-1',
    data: {
        items: [
              {message: 'Foo' },
              {message: 'Bar' }
        ]
    }
})

地方是3个简约的对数组迭代的示范,我们还能针对对象开始展览迭代,假若只行使三个参数,就是指向对象的属性值进行迭代:

<ul id="repeat-object" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
</ul>

若果传入第2个参数,正是指向对象的属性值以及品质名举行迭代,注意那里一个参数表示的是属性名,也便是key

<div v-for="(value, key) in object">
    {{ key }} : {{ value }}
</div>

假若再扩散第陆个参数,第肆个参数就代表索引

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

组件

组件是 Vue.js 最强大的效率之一。组件能够扩张HTML成分,封装可选择的代码。在大家的程序中含有七个零部件:project 组件和
sidebar 组件,如下图所示。那里咱们任重(Ren Zhong)而道远介绍单文件组件的运用,即将组件用到
html、js 和 css 都写在一个文件里,各种组件自成1个种类。

图片 2

文本结构

单文件组件一般使用 “.vue” 作为后缀名,一般的文本结构如下所示:

project.vue

<template>
    <div>
        {{ key }}
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                "key": "value"
            }
        },

        methods:  {
            demoMethod: function() {

            }
        }

    }
</script>

<style lang="less">
    @import "xxx.less";
</style>

export 将模块输出,default
表明使用文件名作为模块输有名,那就类似于将模块在系统中登记一下,然后别的模块才可用使用
import 引用该模块。

接下来大家必要在主文件中登记该器件:

index.js

import project from '../components/project/project.vue'
Vue.component("project", project);

当注册成功以往,就足以 html 中央银行使该零件了

index.html

<project></project>

生命周期

Vue 的要给组件会经历 成立 -> 编写翻译 -> 挂载 -> 卸载 -> 销毁
等壹密密麻麻事件,这一个事件发生的上下都会接触多少个相关的钩(hook)函数,通过那些钩子函数,大家得以在事件爆发的前后做壹些操作,下边先看下官方给出的一个Vue 对象的生命周期图,个中红框内标注的正是相应的钩子函数

图片 3

下边是关于那么些钩子函数的分解:

hook 描述
beforeCreate 组件实例刚被创建,组件属性计算之前
created 组件实例创建完成,属性已绑定,但是 DOM 还未生成, $el 属性还不存在
beforeMount 模板编译/挂载之前
mounted 模板编译/挂载之后
mounted 模板编译/挂载之后(不保证组件已在 document 中)
beforeUpdate 组件更新之前
updated 组件更新之后
activated for keep-alive,组件被激活时调用
deactivated for keep-alive,组件被移除时调用
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

上边是钩子函数的运用方式:

export default {
    created: function() {
        console.log("component created");
    },
    data {},
    methods: {}
}

父子组件通讯

父子组件通讯能够利用 props down 和 events up 来描述,父组件通过 props
向下传递数据给子组件,子组件通过 events 给父组件发送消息,上边示意图:

图片 4

图片来源 https://github.com/webplus/blog/issues/10

父组件向子组件传递数据

透过动用
props,父组件能够把数据传递给子组件,那种传递是单向的,当父组件的品质发生变化时,会传送给子组件,不过不会反过来。下边是三个示范

comp.vue

<template>
    {{ message }}{{ shortMsg }}
</template>

<script>
    export default {
        props: ["message", "shortMsg"],

    }
</script>

index.html

<div id="app">
    <!-- 在这里将信息传递给子组件,:message 表示子组件中的变量名 -->
    <comp :message="hello" :short-msg = "hi"></comp>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            "hello": "Hello",
            "hi": "Hi"
        }

    })
</script>

在上头的流程中,父组件首先就要传递的多寡绑定到子组件的属性上,然后子组件在
props
中评释与绑定属性相同的变量名,就足以选拔该变量了,要求注意的少数是要是变量选择驼峰的命名格局,在绑定属性时,就要将驼峰格式改为
- 连接的花样,若是上边所示 shortMsg -> short-msg

子组件向父组件通讯

假如子组件必要把音讯传送给父组件,能够使用自定义事件:

  1. 利用 $on(eventName) 监听事件
  2. 行使 $emit(eventName) 触发事件

上面是一个演示:

comp.vue

<script>
    export default {
        methods: {
            noticeParent: function() {
                // 事件名,传输值
                this.$emit('child_change', "value");
            }
        }
    }
</script>

index.html

<div id="app">
    <comp @child_change="childChange"></comp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            childChange: function(msg) {
                console.log("child change", msg);
            }
        }
    });
</script>

在上边的代码中,父组件通过 v-on 绑定了 child_chagne 事件,当
child_chagne 事件被触发时候就会调用 childChange
方法。在子组件中能够透过 $emit 触发 child_change
事件。那里必要留意的是事件名不用选拔驼峰命名,也毫不用 -
字符,能够行使下划线 _ 连接单词。

Event Bus 通信

伊夫nt Bus
通讯形式是1种特别通用的通讯格局,它既能够用于父子组件也足以用来非父子组件。它的规律就是利用叁个空的
Vue
实例作为中心事件总线,通过自定义事件的监听和接触,来形成通讯功效,上面是一个示意图:

图片 5

图形来源 https://github.com/webplus/blog/issues/10

上面我们来看三个具体的实例:

  • 率先定义1个空的 Vue 实例,作为事件总线

    EventBus.js

    import Vue from 'vue'
    export default new Vue()
    
  • 在组件一中针对有些事件进展监听

    comp1.vue

    <script>
    import eventBus from "EventBus.js"
    export default {
        created: function() {
            eventBus.$on("change", function() {
                console.log("change");
            })
        }
    }
    </script>
    
  • 在组件贰中触发相应事件形成通讯

    comp2.vue

    <script>
    import eventBus from "EventBus.js"
    export default {  
        methods: {
            notice: function() {
                this.$emit('change', "value");
            }
        }
    }
    </script>
    

ES6

本节摘自 ECMAScript 陆 入门

与 ES5 相比较,ES陆 提供了更为周详的功力和语法,程序中大家利用部分 ES陆语法,那里做贰个粗略的笔录,要是想要系统的读书 ES6,能够参考上边包车型客车稿子:

let

ES陆 新增了 let 命令,用于证明变量。使用 let
申明的变量具有块级成效域,所以在宣称变量时,应该运用 let,而不是 var。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

for of 循环

ES6 借鉴 C++、Java、C# 和 Python
语言,引入了for…of循环,作为遍历全部数据结构的联结的艺术

const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}

Set 和 Map

ES陆 引入了 Set 和 Map 结构。下边是两岸的现实性介绍

Set

属性

属性 描述
Set.prototype.size 返回Set实例的成员总数。

方法

方法名 描述
add(value) 添加某个值,返回Set结构本身。
delete(value) 删除某个值,返回一个布尔值,表示删除是否成功。
has(value) 返回一个布尔值,表示该值是否为Set的成员。
clear() 清除所有成员,没有返回值。
   
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回键值对的遍历器
forEach() 使用回调函数遍历每个成员

行使示例:

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}

Map

属性

属性 描述
Map.prototype.size 返回 Map 实例的成员总数。

方法

方法名 描述
set(key, value) set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。
get(key) 读取 key 对应的键值,如果找不到 key,返回 undefined。
has(key) 返回一个布尔值,表示某个键是否在当前 Map 对象之中。
delete(key) 删除某个键,返回true。如果删除失败,返回false。
clear() 清除所有成员,没有返回值。
   
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回所有成员的遍历器
forEach() 遍历 Map 的所有成员。

接纳示例:

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

参考文章