Vue超详细学习笔记

2024-03-17 11:14:46

VUE

1.前端三要素

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

结构层（HTML）

表现层（CSS）

CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，此时需要CSS预处理器

什么是CSS预处理器

CSS 预处理器定义了一种新的语言。用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。

常见css预处理器

SASS：基于 Ruby，通过服务端处理，功能强大。
LESS：基于 NodeJS，通过客户端处理，使用简单。

行为层（JavaScript）

JavaScript 一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

ES5（全浏览器支持）
ES6（常用，当前主流版本：webpack打包成为ES5支持！）

2.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 通信功能；

js构建工具

WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

3.UI框架

常用

Ant-Design：阿里巴巴出品，基于 React 的 UI 框架
ElementUI、iview、ice：饿了么出品，基于 Vue 的 UI 框架
Bootstrap：Twitter 推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子 UI”，一款 HTML5 跨屏前端框架
Layui：轻量级框架

Element-UI

Element 是饿了么前端开源维护的 Vue UI 组件库，组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。主要用于开发 PC 端的页面，是一个质量比较高的 Vue UI 组件库。
[官网地址] http://element-cn.eleme.io/#/zh-CN
[Github] https://github.com/ElementUI/element-starter
[vue-element-admin] https://github.com/PanJiaChen/vue-element-admin

主要特点是桌面端支持较多

iView

iview 是一个强大的基于 Vue 的 UI 库，有很多实用的基础组件比 elementui 的组件更丰富，主要服务于PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式基于 npm + webpack + babel 开发，支持ES2015 高质量、功能丰富友好的 API ，*灵活地使用空间。
[官网地址] https://www.iviewui.com/
[Github] https://github.com/TalkingData/iview-weapp
[iview-admin] https://github.com/iview/iview-admin
主要特点是移动端支持较多

4.第一个Vue程序

简介

Vue 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）有项目整合。

MVVM模式实现者

Model：模型层，在这里表示 JavaScript 对象
View：视图层，在这里表示 DOM（HTML 操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者
在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel就是定义了一个 Observer 观察者。
ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变
至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定。

第一个Vue程序准备

CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//包含完整的警告和调试模式
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
//删除了警告，

Hello.Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kk说</title>
</head>
<body>
<div id="vue">
    {{message}}
</div>
<!--使用vue需要先引入-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:'#vue',//绑定元素的 ID
        data:{
            message:'Hello,Vue!'//数据对象中有一个名为 message 的属性，并设置了初始值
        }
    });
</script>
</body>
</html>

说明：

只需要在绑定的元素中使用双花括号将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果。
在控制台输入 vm.message = 'Hello World' ，然后回车，你会发现浏览器中显示的内容会直接变成 Hello World!(借助了 Vue 的数据绑定功能实现)
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新

5.基础语法

实现元素赋值，循环，判断，以及事件响应等！

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kk说vue</title>
</head>
<body>
<div id="app">
 <!--如果要将模型数据绑定在html属性中，则使用 v-bind 指令,此时title中显示的是模型数据-->
    <h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1>
    <!-- v-bind 指令的简写形式： 冒号（:） -->
    <h1 :title="message">我是标题</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
        el:'#app',
        data:{
            message:'页面加载于'+new Date().toLocaleString()
        }
    })
</script>
</body>
</html>

说明：

指令带有前缀 v- ，以表示它们是 Vue 提供的特殊特性。
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

v-if系列

v-if
v-else-if
v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="ap">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#ap',
        data:{
            type:'A'
        }
    })
</script>
</body>
</html>

测试：观察在控制台输入 vm.type = ‘B’、‘C’、‘D’ 的变化!

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="appp">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
      el:'#appp',
      data:{
          //items 是数组，item是数组元素迭代的别名
          items:[
              {message:'kk说java'},
              {message:'kk说前端'}
          ]
      }
    })
</script>
</body>
</html>

测试：在控制台输入 vm.items.push({message: 'kk说运维'}) ，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条 kk说运维

v-on

v-on 监听事件：
事件有Vue的事件、和前端页面本身的一些事件！我们这 click 是vue的事件，可以绑定到Vue中的methods 中的方法事件！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kk说vue</title>
</head>
<body>
<div id="add">
<!--在这里我们使用了v-on绑定了click事件，并指定了名为sayHi事件-->
    <button v-on:click="sayHi">点我</button>
<!--v-on 指令的简写形式 @   -->
    <button @click="sayHi">点我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#add',
        data:{
            message:'hello world!'
        },
        // 方法必须定义在 Vue 实例的 methods 对象中
        methods:{
            sayHi:function (event) {
                alert(this.message);
                //this在当前方法里指向当前的methods
            }
        }
    })
</script>
</body>
</html>

v-model

用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理.
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了.
值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="apc">
    <!-- v-bind:value只能进行单向的数据渲染 -->
    <input type="text" :value="ss.ke2">
    <!-- v-model 可以进行双向的数据绑定 -->
    <input type="text" v-model="ss.ke2">
    <p>您要查询的是：{{ss.ke2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#apc',
        data: {
            ss:{
                ke: 'kuang',
                ke2:'kk'
            }
        }
    })
</script>
</body>
</html>

<body>
<div id="app">
<!--单复选框-->
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
    new Vue({
        el: '#app',
        data: {
            checked: true
        }
    })
</script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kk说</title>
</head>
<body>
<div id="app">
<!--多复选框：-->
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <span>选中的值: {{ checkedNames }}</span>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</script>
<script>
    var vm=new Vue({
        el: '#app',
        data: {
            checkedNames: []
        }
    })
</script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--   单选按钮：-->
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值: {{picked}}</span>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            picked:''
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="adc">
<!--    下拉框-->
    <select v-model="selected">
        <option disabled >请选择</option>
        <option >A</option>
        <option >B</option>
        <option >C</option>
    </select>
    <span>选中的值：{{selected}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
      el:'#adc',
        data:{
          selected:''
        }
    })
</script>
</body>
</html>

注意：如果 v-model 表达式的初始值未能匹配任何选项，< select> 元素将被渲染为“未选中”状态。
在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项

6.组件

什么是组件

组件是可复用的vue实例，说白了就是一组可以重复使用的模板。通常会用一棵嵌套的组件树的形式组织：

第一个vue组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
<!--有点类似于自定义标签-->
        <my-component-li></my-component-li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //先注册组件
    Vue.component('my-component-li',{
        template:'<li>hello li</li>>'
    });
    //在实例化vue
    var vm=new Vue({
        el:'#app',
    });
</script>
</body>
</html>

说明：

Vue.component()：注册组件
my-component-li：自定义组件的名字
template：组件的模板

使用props属性传递参数

像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用 props属性了

注意：默认规则下 props 属性里的值不能为大写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kk说</title>
</head>
<body>
<div id="app">
    <ul>
    <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 先注册组件
    Vue.component('my-component-li', {
        props: ['item'],
        template: '<li>Hello {{item}}</li>'
    });
    // 再实例化 Vue
    var vm = new Vue({
        el: '#app',
        data: {
            items: ["张三", "李四", "王五"]
        }
    });
</script>
</body>

说明：

v-for="item in items":遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件；
v-bind:item="item"：将遍历的 item 项绑定到组件中 props 定义的名为 item 属
性上；

7.计算属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    一个是方法 一个是属性-->
        <p>调用当前时间的方法：{{CurrentTime1()}}</p>
        <p>调用当前时间的方属性：{{CurrentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vue=new Vue({
        el:'#app',
        data:{
            message:'Hello Vue'
        },
        methods: {
            CurrentTime1:function() {
                return Date.now();
            }
        },
        computed: {
            //CurrentTime2,这是一个属性！不是方法
            CurrentTime2:function () {
                this.message;
                return Date.now();
            }
        }
    })
</script>
</body>
</html>

注意：methods和computed里的东西不能重名

说明：

methods：定义方法，调用方法需要带括号
computed：定义计算属性，调用属性一定不能带括号；this.message 是为了
能够让 currentTime2 观察到数据变化而变化
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

8.插槽

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

比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？

第一步：定义一个待办事项的组件

<todo></todo>
<script type="text/javascript">
    // 定义一个待办事项
    Vue.component('todo',{
        template:'<div>\
        <div>待办事项</div>\
            <ul>\
            <li>kk学习vue</li>\
            </ul>\
        </div>'
    });
</script>

第二步: 我们需要让待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽!

1、将上面的代码留出一个插槽,即 slot

<todo>
</todo>
<script type="text/javascript">
    // 定义一个待办事项
    Vue.component('todo',{
        template:'<div>\
        <slot name="todo-title"></slot>\
            <ul>\
            <slot name="todo-items"></slot>\
            </ul>\
        </div>'
    });
</script>

2、定义一个名为 todo-title 的待办标题组件和 todo-items 的待办内容组件

Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    Vue.component('todo-items',{
        props:['item','index'],//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
        template:'<li>{{index+1}}.{{item}}</li>'
    });

3、实例化 Vue 并初始化数据

var vm=new Vue({
        el:'#app',
        data:{
            todoItems: ['kk1','kk2','kk3']
        }
    });

4、将这些值,通过插槽插入

<div id="app">
    <todo>
        <todo-title slot="todo-title" title="kk系列"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    v-bind:item="item" :index="index"></todo-items>
    </todo>
</div>

此时:我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中

//整体代码
<!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="kk系列"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    v-bind:item="item" :index="index"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定义一个待办事项
    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'],//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
        template:'<li>{{index+1}}.{{item}}</li>'
    });
    var vm=new Vue({
        el:'#app',
        data:{
            todoItems: ['kk1','kk2','kk3']
        }
    });
</script>
</body>
</html>

进阶：自定义事件！

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ODqG4nnt-1612795022872)(C:\Users\HQKJ\AppData\Roaming\Typora\typora-user-images\1612684099951.png)]

1.在vue的实例中,增加了 methods 对象并定义了一个名为 removeTodoItems 的方法

new Vue({
  el: '#app',
  data: {
    todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
 },
  methods: {
    // 该方法可以被模板中自定义事件触发
    removeTodoItems: function (index) {
      console.log("删除 " + this.todoItems[index] + " 成功");
      // splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
      // 其中 index 为添加/删除项目的位置，1 表示删除的数量
      this.todoItems.splice(index, 1);
   }
 }
})

2.修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件

Vue.component('todo-items', {
  props: ['item', 'index'],
  template: '<li>{{index + 1}}. {{item}} <button
@click="remove_component">删除</button></li>',
  methods: {
    remove_component: function (index) {
      // 这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的
方式指派
      this.$emit('remove', index);
   }
 }
});

3.修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到vue的方法中!

<!--增加了 v-on:remove="removeTodoItems(index)" 自定义事件，该事件会调用 Vue 实例中
定义的名为 removeTodoItems 的方法-->
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
      v-bind:item="item" v-bind:index="index"
      v-on:remove="removeTodoItems(index)"></todo-items>

9.Axios

前提

Vue遵循SoC 关注度分离原则,Vue是纯粹的视图框架,并不包含,比如Ajax之类的通信功能,为了解决通信问题,我们需要使用Axios 框架做异步通信.

什么是axios

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

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

为什么要使用Axios

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

data.html

{
  "name": "kk说Java",
  "url": "www.baidu.com",
  "page": 1,
  "address": {
    "street": "高密市",
    "city": "潍坊市",
    "country": "中国"
  }
}

axios.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kk学java</title>
<!--v-cloak解决闪烁问题-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="vue" v-cloak>
    <div>名称：{{info.name}}</div>
    <div>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>
    <div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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 {
                info: {
                    name: null,
                    address: {
                        country: null,
                        city: null,
                        street: null
                    },
                    url: null
                }
            }
        },
        mounted() { //钩子函数
            axios
                .get('data.json')
                .then(response => (this.info = response.data));
        }
    });
</script>
</body>
</html>

Vue生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

10.第一个vue-cli程序

(myvuebasic)

vue-cli启动程序

cmd中找到合适目录
创建一个基于webpack模板的vue应用程序

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

说明：

Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 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：创建完成后直接初始化，选择 n，我们手动执行;运行结果!

初始化并运行

cd myvue

npm install

npm run dev

执行完成后,目录多了很多依赖

vue-cli目录结构

src目录

src 目录是项目的源码目录，所有代码都会写在这里

main.js

import Vue from 'vue'ES6 写法，会被转换成 require(“vue”); （require 是 NodeJS 提供
的模块加载器）

import App from './App'意思同上，但是指定了查找路径，./ 为当前目录

Vue.config.productionTip = false ：关闭浏览器控制台关于环境的相关提示

new Vue({...})实例化Vue

el: '#app'查找 index.html 中 id 为 app 的元素

template: ''模板，会将 index.html 中
替换为

components: { App }引入组件，使用的是 import App from ‘./App’ 定义的 App 组
件;

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

template：HTML 代码模板，会替换 < App /> 中的内容
import HelloWorld from ‘./components/HelloWorld’：引入 HelloWorld 组件用于替换 template中的 < HelloWorld/>
export default{…}：导出 NodeJS 对象，作用是可以通过 import 关键字导入
- name: ‘App’：定义组件的名称
- components: { HelloWorld }：定义子组件
在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域,是当前的界面私有的!

11.vue-router

（myvue）

前提

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

安装

基于myvuebasic进行测试学习；先查看node_modules中是否存在vue-router

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue' import VueRouter from 'vue-router' // 显示的使用 Vue.use(VueRouter);

测试

components 目录下存放我们自己编写的组件
定义组件 Content.vue 组件
安装路由,在src目录下,新建一个文件夹 : router ,专门存放路由，写入 index.js
我们在新建一个 Main.vue 组件
将Main组件也配置到路由中！
在 main.js 中配置路由
在 App.vue 中使用路由
npm run dev

12.路由模式和404

(hello-pack)

路由模式有两种：

hash：路径带 # 符号，如 http://localhost/#/login
history：路径不带 # 符号，如 http://localhost/login

修改路由配置，代码如下：

export default new Router({ mode: 'history', routes: [ ] });

处理 404 创建一个名为 NotFound.vue 的视图组件，代码如下：

页面不存在，请重试！ `

修改路由配置，代码如下：

import NotFound from '../components/NotFound' { path: '*', component: NotFound }

13.Element-ui

（hello-vue引入）（hello-pack实现）

简介

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

码农公寓

VUE