Vue在线cdn

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

HbuilderX 常用快捷键

1 1. ctrl+/ 注释代码
 2 2. ctrl+y 恢复撤销
 3 3. ctrl+x 剪切
 4 4. ctrl+z 撤销
 5 5. ctrl+c 复制
 6 6. ctrl+p 在当前项目查找文件
 7 7. ctrl+f 在当前文件查找字符串
 8 8. ctrl+alt+f 在当前目录查找字符串
 9 9. ctrl+k 格式化代码
10 10. ctrl+g 跳转到某行代码
11 11. ctrl+o 打开文件
12 12. ctrl+alt+s 保存所有文件
13 13. 鼠标左键+ctrl选中多行(可进行多行修改操作)

v-bind

现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。
我们可以使用v-bind来绑定元素属性！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Title</title>
    </head>
    <body>
        <div id="app">
        <span v-bind:title="message">
            浮生如梦能几何
        </span>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    message:"hello vue!"
                }
            });
        </script>
    </body>
</html>

v-if v-else

语句判断

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
    </head>
    <body>
        <div id="app">
            <h1 v-if="ok">Yes</h1>
            <h1 v-else>No</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el: "#app",
                data:{
                    ok: true
                }

            });
        </script>
    </body>
</html>

v-for

语句循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <li v-for="(item,index) in items">
                {{item.message}}---{{index}}
            </li>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    items: [{
                            message: '詹姆斯'
                        },
                        {
                            message: '杜兰特'
                        },
                        {
                            message: '哈登'
                        }
                    ]
                }
            });
        </script>
    </body>
</html>

vue绑定操作 v-on

监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="sayhi">click me</button>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el: "#app",
                data: {
                    message: "NBA"
                },
                methods: {
                    sayhi: function()
                    {
                        alert(this.message)
                    }
                }
            });
        </script>
    </body>
</html>

v-model双向绑定

Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

    <div id="app">
        请输入：<input type="text" v-model="message"> {{message}}
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el: "#app",
                data: {
                    message: "123"
                }
            });
        </script>
    </body>
</html>

vue组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <chen v-for="item in items" v-bind:chao="item"></chen>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            Vue.component("chen",{
                props: ['chao'],
                template: '<li>{{chao}}</li>'
            });

            var vm = new Vue({
                el: "#app",
                data: {
                    items: ["java", "php", "html"]
                }

            });
        </script>
    </body>
</html>

Axios通信

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF (跨站请求伪造)
GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/

为什么使用Axios
由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !

模拟Json数据

{
  "name": "weg",
  "age": "18",
  "sex": "男",
  "url":"https://www.baidu.com",
  "address": {
    "street": "南京路",
    "city": "南京",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "cqh video",
      "url": "https://www.4399.com"
    }
  ]
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div>{{info.name}}</div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript">
            var vm=new Vue({
                el: "#app",

                data() {
                    return {
                        info: {
                            name: null,

                        }
                    }
                },

                mounted() {
                    axios.get("data.json").then(response=>(this.info=response.data));
                }
            });
        </script>

    </body>
</html>

Vue计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p>{{current()}}</p>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
                el: "#app",
                data: {
                    message: "你好"
                },
                methods: {
                    current:function()
                    {
                        return Date.now();
                    }
                }

            });
        </script>

    </body>
</html>

结论:
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

内容分发slot

在Vue.js中我们使用元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <todo>
                <todo-title slot="todo-title" v-bind:title="title"></todo-title>
                <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
            </todo>        
        </div>


        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            Vue.component("todo",{
                template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
                    </div>'
            });
            Vue.component("todo-title",{
                props: ['title'],
                template: '<div>{{title}}</div>'
            });
            Vue.component("todo-items",{
                props: ['item']    ,
                template: '<li>{{item}}</li>'
            });

            var vm = new Vue({
                el: "#app",    
                data: {
                    title: "詹姆斯",
                    todoItems: ['Java','php','linux']
                }
            });
        </script>
    </body>
</html>

自定义事件内容分发

通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;
使用this.$emit (‘自定义事件名’,参数)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <todo>
                <todo-title slot="todo-title" v-bind:title="title"></todo-title>
                <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item" 
                v-bind:index="index" v-on:remove="removeItems(index)" v-bind:key="index"></todo-items>
            </todo>        
        </div>


        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
        <script>
            Vue.component("todo",{
                template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
                    </div>'
            });
            Vue.component("todo-title",{
                props: ['title'],
                template: '<div>{{title}}</div>'
            }); 
            Vue.component("todo-items",{
                props: ['item','index']    ,
                template: '<li>{{index}}---{{item}}  <button v-on:click="remove">删除</button></li>',
                methods:{
                    remove:function(index)
                    {

                        this.$emit('remove',index)
                    }
                }
            });

            var vm = new Vue({
                el: "#app",    
                data: {
                    title: "陈超",
                    todoItems: ['Java','php','linux']
                },
                methods:{
                    removeItems:function(index)
                    {
                        console.log("删除了"+this.todoItems[index]+"ok");
                        this.todoItems.splice(index,1)
                    }
                }
            });
        </script>
    </body>
</html>

第一个 vue-cli 应用程序

创建一个Vue项目,我们随便建立一个空的文件夹在电脑上。

我这里在D盘下新建一个目录D:\Project\vue-study;

创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue

一路都选择no即可;

初始化并运行

cd myvue
npm install
npm run dev

Webpack
WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用

npm install webpack -g
npm install webpack-cli -g

测试安装成功: 输入以下命令有版本号输出即为安装成功

webpack -v
webpack-cli -v

什么是Webpack
本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;
伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用) ，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

使用Webpack
1.先创建一个包交由idea打开会生成一个.idea文件那么就说明该文件就交由idea负责

2.在idea中创建modules包，再创建hello.js,hello.js 暴露接口相当于Java中的类

//暴露一个方法
exports.sayHi = function () {
    document.write("<h1>狂神说ES6</h1>>")
}

3.创建main.js 当作是js主入口 , main.js 请求hello.js 调用sayHi()方法

var hello = require("./hello");
hello.sayHi()

4.在主目录创建webpack-config.js , webpack-config.js 这个相当于webpack的配置文件

enrty请求main.js的文件

output是输出的位置和名字

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: './js/bundle.js'
    }
}

5.在idea命令台输入webpack命令（idea要设置管理员启动）

6.完成上述操作之后会在主目录生成一个dist文件生成的js文件夹路径为/ dist/js/bundle.js

7.在主目录创建index.html 导入bundle.js
index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/js/bundle.js"></script>
</head>
<body>
</body>
</html>

Vue基本语法