vue.js——如何快速开启一个demo

本文介绍了如何快速新建一个demo项目，快速入门vue组件的学习。let's go~

1.安装node.js

根据系统情况，下载相对应的Node.js版本 Node.js官方下载地址

2.安装npm

大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org

3.创建一个vue项目

命令行进入需要新建项目的路径，vue init webpack 项目名

4.运行项目

进入工程，npm run dev

5.新建页面，配置路由

新建.vue页面如下示例：testV.vue

需要配置页面路由，否则跳转不到指定的页面

把vue项目生成的模板大V图片注释掉

 6.以V-for语句示例

<template>
    <div>
        <div>v-for方法使用</div>
        <div>打印数组中元素</div>
        <ul>
            <li v-for="(person,index) in persons">数组下标{{index}}：数组元素{{person}}</li>
        </ul>
        <div>打印对象属性</div>
        <ul>
        <li v-for="(val,key,index) in student"> 属性下标{{index}}：属性key值：{{key}}属性value值: {{val}} </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                persons:[
                    {name:'刘德华'},
                    {name:'古巨基'},
                    {name:'何书桓'}
                ],
                student:{
                    name:'三月',
                    age:27,
                    sex:'F'
                }
            }
        },
        mounted(){

        },
        methods:{

        }
    }
</script>

7.浏览器查看页面

浏览器输入地址：localhost:8080/#/testV 

回车查看页面