vue2.0

1、什么是 vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

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

1.1、 Vue的优点：

在有HTML，CSS，JavaScript的基础上，快速上手。
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化
简单轻巧，功能强大，拥有非常容易上手的 API；
可组件化和响应式设计；
实现数据与结构分离，高性能，易于浏览器的加载速度；
MVVM 模式，数据双向绑定，减少了 DOM 操作，将更多精力放在数据和业务逻辑上。

虚拟dom和数据双向绑定

1.2、mvvm框架

MVVM是对mvc和mvp两种模式的进一步改进的模式

view：视图层(UI用户界面)

ViewModel：业务逻辑层（一切 js 可视为业务逻辑）,及时修改，及时编译

Model：数据层（存储数据及对数据的处理如增删改查）

MVVM将数据双向（data-binding）绑定作为核心思想，view和model之间没有练习
他们通过ViewModel这个桥梁进行交互。
Model和Veiw之间是双向的，只要二者有一个发生变化，veiwmodel就会使另一个跟着发生同样的变化，

流程图：

vue七大常用对象：

el属性

用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

template属性

用来设置模板，会替换页面元素，包括占位符。

methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中

render属性

创建真正的Virtual Dom

computed属性

用来计算

watch属性

watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

前端知识体系

想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中“我大前端”是绕不开的一门必修课。本阶段课程的主要目的就是带领我Java后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网Java全栈工程师”再向前迈进一步。

前端三要素

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式
JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为

结构层（HTML）

略

表现层（CSS）

CSS层叠样式表是一门标记语言,并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下:
语法不够强大，比如无法嵌套书写，导致模块化开发中需要写很多重复的选择器;
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护;
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为[CSS预处理器]的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。（例如页面在不同的时候有不同的需求，淘宝在双11和618的样式就会不一样）

CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言,进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”
常用的CSS预处理器有哪些
SASS:基于Ruby,通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
LESS:基于NodeJS,通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS,但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。

行为层（JavaScript）

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
Native原生JS开发
原生JS开发，也就是让我们按照[ECMAScript] 标准的开发方式，简称是ES,特点是所有浏览器都支持。截止到当前博客发布时间，ES 标准已发布如下版本:
ES3
ES4 (内部,未征式发布)
ES5 (全浏览器支持)
ES6 (常用，当前主流版本: webpack打包成为ES5支持! )
ES7
ES8
ES9 (草案阶段)
区别就是逐步增加新特性。

TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯海尔斯伯格(C#、Delphi、TypeScript 之父; .NET 创立者)主导。
该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持TypeScript语法，需要编译后(编译成JS)才能被浏览器正确执行。

JavaScript框架

jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)
React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于
减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;
当然也可以直接选择使用jQuery提供的AJAX通信功能;

前端三大框架：Angular、React、Vue

UI框架

Ant-Design:阿里巴巴出品，基于React的UI框架
ElementUI、 iview、 ice: 饿了么出品，基于Vue的UI框架
Bootstrap: Twitter推出的一个用于前端开发的开源工具包
AmazeUI:又叫"妹子UI"，一款HTML5跨屏前端框架.
JavaScript 构建工具
Babel: JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack: 模块打包器，主要作用是打包、压缩、合并及按序加载

以上知识点将WebApp开发所需技能全部梳理完毕

三端合一

混合开发（Hybid App）

主要目的是实现一套代码三端统一(PC、Android:.apk、iOS:.ipa )并能备够调用到底层件(如:传感器、GPS、摄像头等)，打包方式主要有以下两种:
云打包: HBuild -> HBuildX， DCloud出品; API Cloud
本地打包: Cordova (前身是PhoneGap)
后端技术
前端人员为了方便开发也需要掌握一定的后端技术，但我们Java后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了NodeJS这样的技术。
NodeJS的作者已经声称放弃NodeJS (说是架构做的不好再加上笨重的node_ modules，可能让作者不爽了吧)，开始开发全新架构的Deno
既然是后台技术，那肯定也需要框架和项目管理工具，NodeJS 框架及项目管理工具如下:
Express: NodeJS框架
Koa: Express简化版
NPM:项目综合管理工具，类似于Maven
YARN: NPM的替代方案，类似于Maven和Gradle的关系

2、vue的基础语法

2.1、v-if

语法：

v-if
v-else-if
v-else

<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B '">B</h1>
<h1 v-else>c</h1>

可以根据条件来异步更新数据

<script>
    var vm  = new Vue({
        el:"#hello-vue",
        data:{
           type : "A"
        }
    });
</script>

通过type的内容来决定输出的内容，

vue中判断的方法和java中基本无差距，可以对比学习，放心使用

2.2、v-for

语法：

v-for

<div id="hello-vue">
<li v-for="(item,index) in items">
    {{item.message}}--- {{index}}
</li>
</div>

根据使用了的v-for的js

<script>
    var vm  = new Vue({
        el:"#hello-vue",
        data:{
            items:[
                {message:'hyc玩vue'},
                {message: 'hyc玩后端'},
                {message: 'hyc运维'}
                ]
        }
    });
</script>

通过循环items这个数组，通过data的方式传递给html绑定的元素

在html绑定的标签中用v-for循环出内容

vue中循环的方法也和java中基本无差距，可以对比学习，放心使用

2.3、vue绑定事件

vue中绑定事件语法：

v-on

<script>
    var vm  = new Vue({
        el:"#app",
        data:{
            message:"狂神说java"
        },
        methods:{//方法必须定义在vue的method对象中
            sayHi:function (){
                alert(this.message)
            }
        }
    });
</script>

通过html中标签属性上使用v-on来绑定对应的方法

<div id="app">
<button v-on:click="sayHi">click me</button>
</div>

3、双向绑定

Vue.js是一个MVVM框架，即是数据双向绑定，当数据变化的时候视图也跟着变化，视图变化的时候，数据也跟着变化。

3.1、v-model

v-model是什么

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

为什么使用v-model

v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。

其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。

v-model在各种组件中实现双向绑定的效果

vue.js:

<script>
    var vm  = new Vue({
        el:"#app",
        data:{
            message:"狂神说java",
            textmessage:'',
            checked:false,
            hyc:'',
            selected:''
        }
    });
</script>

文本框：

输入的文本：  <input type="text" v-model="message"></input>
    双向绑定后的： {{message}}

文本域：

输入的文本：  <textarea name="" id="" cols="30" rows="10" v-  model="textmessage"></textarea>
    双向绑定后的： {{textmessage}}

单选框：

选择性别： <input type="radio" name="sex" value="男" v-model="hyc">
    选择性别： <input type="radio" name="sex" value="女" v-model="hyc">

下拉列表：

<select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
我选择的选项：<span>{{selected}}</span>

使用了v-model之后会虎烈value，checked，selected特性的初始值而总是将vue示例的数据作为数据来源，通过js组件的data选项声明初始值

4、vue组件

语法：

Vue.componet

可以创建一个模版类似于html中的标签，使用方式也相似

js:

Vue.component("hyc",{
        template:'<li>hello</li>'
    });

html:

<div id="app">
    <hyc></hyc>
</div>

输出结果

组件参数传递：props

js:

Vue.component("hyc",{
            props: ['item'],
            template:'<li>{{item}}</li>'
        });
    var vm  = new Vue({
        el:"#app",
        data:{
            items : ["java","Linux","前端"]
        }
    });

html:

<div id="app">
<!--    组件：传递给组件中的值：props-->
    <hyc v-for="item in items" v-bind:item="item"></hyc>
</div>

由于是同级：

vm便利出的值，组件无法直接获取，所以我们需要一个中间商

于是乎：props出现了

props：

v-bind将vm遍历出的值绑定到一个属性上2
之后由props获取到模版上展示数据

5、网络通信

我们学过的：jQuery.ajax

在学习vue时官方推荐我们使用axios通信框架来实现通信

axios

什么是axios：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

为什么要使用Axios

由于vue是一个视图层框架，并且作为严格遵守SOC（关注度分离原则）所以vue.js并不包括ajax通信功能，为了解决通信问题，作者单独开发了一个名叫vue-resouce的插件，不过在进入2.0版本后停止了对该插件的维护，并推荐了Axois框架。少用jquery，应为操作dom过于频繁

第一个Axios程序应用

模拟一个json

{
  "name": "郑文杰",
  "url": "zhengwenjie.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links":[{
    "name": "bilibili",
    "url": "https://space.bilibili.com/95256449"
  },
    {
      "name": "狂神说java",
      "url": "https://blog.kuanngstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

使用内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    v-clock:解决闪烁问题-->
    <style>
    [v-clock]{
        display: none;
    }
    </style>
</head>
<body>
<div id="vue" v-clock>
    <div>
        {{info.name}}
    </div>
    <div>
        {{info.address.street}}
    </div>
    <div>
        {{info.url}}
    </div>
    <a v-bind:href="info.url">点我</a>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el:"#vue",
    data(){
        return{
            //请求的返回参数合适，必须和json字符串一样
            info:{
                name:null,
                url:null,
                address:{
                    street:null,
                    city:null,
                    country:null
                }
            }
        }
    },
    mounted(){
        //钩子函数 链式编程
        axios.get('../data.json').then(response=>(this.info=response.data));
    }
});
</script>
</body>
</html>

6、计算属性

是vue的特性

关键字computed

我们的vue对象中有一个属性，使用缓存来将不经常变化的属性的结果缓存，下一次可以不用重复，直接从内存中调取，节省系统的资源开销

特性：

作用于缓存中，和mybatis十分相似,一旦内部有属性变化就会立刻刷新

如何使用呢？

var vm = new Vue({
        el:"#app",
        data:{
            message: 'Hello Vue!!'
        },
        methods: {
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed:{//计算属性：methods computed不能重名，重名之后会有优先级问题，method优先级高
            //缓存中，和mybatis十分相似,一旦内部有属性变化就会立刻刷新，
            //计算属性：计算属性主要的特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统资源开销，每节约一点并发编程中就有更大的优势
            currentTime2:function () {
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });

7、插槽

在Vue.js中我们使用元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;
这里穿插以下vue的语法缩写
v:bind: 可以缩写为一个:
v-on: 可以缩写为一个@
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</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>
    //slot 插槽 这个组件要定义在前面不然出不来数据
    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>'
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "图书馆系列图书",
            //列表
            todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
        }
    });
</script>
</body>
</html>

8、自定义事件分发

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

过程图：

带参数代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-item slot="todo-item" v-for="(item,index) in todoitems" :item="item" :index="index" v-on:remove="removeitems(index)"></todo-item>
</todo>
</div>
<!--  导入vue.js-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
    Vue.component("todo",{
        template:'<div>\
            <slot name="todo-title"></slot>\
            <ul>\
                <slot name="todo-item"></slot>\
            </ul>\
            </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template:'<div>{{title}}</div>'
    });
    Vue.component("todo-item",{
        props: ['item','index'],
        //只能绑定当前组件的方法
        template:'<li>{{index+1}} {{item}} <button @click="remove">删除</button></li>',
        methods:{
            remove:function(index){
                //自定义分发事件
               this.$emit('remove',index);
        }
        }
    });
    var vm = new Vue({
        el:"#app",
        data:{
            title:"列表",
           todoitems:['java','linux','python']
            },
        methods:{
            removeitems:function (index){
                console.log("删除了"+this.todoitems[index]);
                this.todoitems.splice(index,1);
            }}
    });
</script>
</body>
</html>

VUE2.0快速入门（二）https://developer.aliyun.com/article/1469508

VUE2.0快速入门（一）