Vue Document

VUE笔记

环境搭建

node -v
npm -v
npm i -g cnpm --registry=https://registry.npm.taobao.org ->npm镜像
cnpm i -g vue-cli
vue -V

安装项目

vue init webpack vue_project_name

提示目录已存在，是否继续：Y
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
Set up unit tests（安装测试工具）：n
Setup e2e tests with Nightwatch（测试相关）：n
Should we run npm install for you after the project has been created? (recommended)：选择：No, I will handle that myself

初始化

cd vue_project_name
cnpm i
cnpm run dev
Ctrl+C退出运行
cnpm install -g live-server

配置idea

File-Settings-Languages&Frameworks-JavaScript：修改JavaScript language version为ECMAScript 6，确认。
File-Settings-Plugins：搜索vue，安装Vue.js。
Run-Edit Configurations...：点击加号，选择npm，Name为Run，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。

npm 是 nodejs 的包管理和分发工具。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

Vue从入门到精通视频教程
v-fot，v-text，v-html，v-on
v-model，v-bind，v-pre，v-cloak，v-once
v-directive，

<div v-if="flag">content</div>
<div v-show="flag">content</div>
<li v-for="item in items">{{ item }}</li>
<button v-on:click="event">content</button>
<button @click="event">content</button>

Axios

Vue学习笔记

1.Vue指令

1.1. Hello World

1.下载vue开发版本

Vue开发版本包含警告和调试，压缩后的为生产版本。Vue.js教程

2.项目结构

vue-test
　assets(js/css)
　example
　index.html

3.初始化项目

npm init

4.搭建服务

cnpm install -g live-server 安装
live-server 运行

5.helloworld.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>helloworld</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">
    {{ message }}
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {message: 'Hello Vue!'}
    })
</script>
</body>
</html>

1.2.v-if，v-else，v-show

<body>
<h1>v-if</h1>
<hr>
<div id="app">
    <div v-if="flag">v-if判断是否加载</div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>
</body>

<body>
<h1>v-show</h1>
<hr>
<div id="app">
    <div v-show="flag">v-show判断是否显示</div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>
</body>

v-if:判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show:调整css dispaly属性，可以使客户端操作更加流畅。

1.3.v-for

1.基本用法

<div id="app">
    <ul>
        <li v-for="array in arrays">{{ array }}</li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            arrays: [1, 12, 23, 35, 42, 50, 66, 73, 84, 99, 100]
        }
    })
</script>

2.排序

vue不允许修改定义好的数据源，因此要定义一个新的对象接收排完序的数据，并使用此对象进行v-for循环显示

<div id="app">
    <ul>
        <li v-for="array in sortArrays">{{ array }}</li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            arrays: [1, 12, 23, 35, 42, 50, 66, 73, 84, 99, 100]
        },
        computed: {
            sortArrays: function () {
                return this.arrays.sort(sortNum);
            }
        }
    })

    function sortNum(a, b) {
        return a - b;
    }
</script>

3.对象循环输出

<div id="app">
    <ul>
        <li v-for="array in sortStudents">{{ array.name }} + {{ array.age }}</li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            students: [
                {name: 'jspang', age: 32},
                {name: 'Panda', age: 30},
                {name: 'PanPaN', age: 21},
                {name: 'King', age: 45}
            ]
        },
        computed: {
            sortStudents: function () {
                return sortObj(this.students, 'age');
            }
        }
    })

    function sortObj(obj, key) {
        return obj.sort(function (a, b) {
            var x = a[key];
            var y = a[key];
            return (x < y ? -1 : (x > y ? 1 : 0));
        })
    }
</script>

1.4.v-text，v-html

1.5.v-on

<div id="app">
    {{ score }}<br>
    <button v-on:click="add">加分</button>
    <button @click="sub">减分</button>
    <input type="text" v-on:keyup.enter="onEnter" v-model="addscore">
    <input type="text" @keyup.13="onEnter" v-model="addscore">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            score: 0,
            addscore: ''
        },
        methods: {
            add: function () {
                this.score++;
            },
            sub: function () {
                this.score--;
            },
            onEnter: function () {
                this.score = this.score + parseInt(this.addscore);
            }
        }
    })
</script>

键值表