前端(五)-Vue简单基础

1、 Vue概述

Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。
与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合。
官网：https://cn.vuejs.org/

Soc原则：关注点分离原则
Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
HTML + CSS + JS : 视图：给用户看，刷新后台给的数据
网络通信： axios
页面跳转： vue-router
状态管理：vuex
Vue-UI : ICE , Element UI

2、第一个Vue程序

案例




    
    Title





    {{message}}

3、Vue基本语法

3.1 if else if else

3.2 for




    
        {{item.message}} --- {{index}}

3.3 v-on 监听事件

3.4 v-test,v-html

3.4.1 v-text

{{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}}，Vue提供的v-text可以解决这个问题。




    {{hello}}

3.4.2 v-html

用于输出html代码。

4、Vue双向绑定

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
??注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

4.1 单行文本多行文本


    
    
        
        输入的文本： {{message}} 

        
         {{message2}}

4.2 单选框和多选框

单选框


    
    
        性别：
         男
          女

        
            您的性别是：{{sex}}

多选框





    多复选框：
    
      
    Jack
    
      
    Same
    
      
    Mike
    选中的值：{{message}}

4.3 下拉框


    
    
        下拉框：
        

        value:{{info}}

5、Vue组件

5.1什么是Vue组件

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

在这里插入图片描述

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

6、Axios

6.1 什么是Axios

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

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 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太频繁!

6.2 第一个Axios应用程序

日常开发的接口大部分都是采用JSON格式，可以先在项目里模拟一段JSON数据，数据内容如下：

创建一个名为data.json的文件并填入上面的内容，放在项目的根目录下

{
  "name": "subeiLY",
  "url": "https://www.cnblogs.com/gh110/",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "万柏林",
    "city": "山西太原",
    "country": "中国"
  },
  "links": [
    {
      "name": "语雀",
      "url": "https://www.yuque.com/nizhegechouloudetuboshu/library"
    },
    {
      "name": "subeiLY",
      "url": "https://blog.csdn.net/m0_46153949"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

html



	
		
		Axios
	 
	
	
	
	
	    姓名:{{info.name}}
	    地址:{{info.address.country}}--{{info.address.city}}--{{info.address.street}}
	    链接:{{info.url}}

6.3 生命周期

Vue的生命周期

7、计算属性，插槽，自定义事件

7.1 计算属性

什么是计算属性：

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


    
        currentTime: {{currentime1()}}
        currentTime: {{currentime2}}

计算属性的特点

特点：计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

7.2 插槽

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

插槽命名注意点

camelCase vs. kebab-case HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的kebab-case(短横线隔开式) 命名：如果你使用字符串模版，则没有这些限制。

7.3 自定义事件内容分发

测试自定义方法removeItems(index)

删除自身测试

删除前：

删除后：

this.$emit('remove',index);的理解