狂神Vue学习笔记摘录

Vue学习笔记：
主要根据狂神说Vue视频学习整理的笔记。大多数笔记是抄狂神视频的。
一、前端核心分析
1.1、概述
Soc原则：关注点分离原则

Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据

网络通信 ： axios

页面跳转 ： vue-router

状态管理：vuex

Vue-UI : ICE , Element UI

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

1.4、表现层（CSS）
CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具,提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。
什么是CSS预处理器？
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。
常用的CSS预处理器有哪些

SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。
1.5、行为层（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 通信功能；
二：Vue基础
【说明】IDEA可以安装Vue的插件!
注意：Vue不支持IE 8及以下版本， 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。

（1）下载地址

开发版本
包含完整的警告和调试模式：https：//yuejs.org/js/vue.js
删除了警告， 30.96KB min+gzip：https：//vuejs.org/js/vue.min.js
CDN

（2）代码编写

Vue.js的核心是实现了MVVM模式， 她扮演的角色就是View Model层， 那么所谓的第一个应用程序就是展示她的数据绑定功能，操作流程如下：
1、创建一个HTML文件

Title2.引入Vue.js 说明：

el: ‘#vue’：绑定元素的ID
data:{message:‘Hello Vue!’}：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！
4、将数据绑定到页面元素

{{message}}
说明：只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来， 即可实现数据绑定功能， 也就实现了View Model层所需的效果， 是不是和EL表达式非常像? 完整的HTML：Title
{{message}}
三：基础语法指令 3.1、v-bind 我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新! 我们还可以使用v-bind来绑定元素特性!Title
鼠标悬停几秒钟查看此处动态绑定的提示信息！
你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。 如果你再次打开浏览器的JavaScript控制台， 输入app， message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。 3.2 条件判断语句 v-if; v-else; v-else-if语句： v-if v-else-if v-else 示例代码：Title

A

B

D

C

3.3 v-for 格式：
  • {{item.message}}---{{index}}
注：items是数组，item是数组元素迭代的别名。 3.4 v-on监听事件 在button中 加上v-on:click="方法名" 即可调用methods中的方法 四、表单双绑、组件 什么是双向数据绑定？ Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。 值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。

（1）为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

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

什么是组件？
组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板， 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

Vue组件：
使用Vue.component()方法注册组件：

说明：

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

使用props属性传递参数
像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！
注意：默认规则下props属性里的值不能为大写；

Title

说明：

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

Vue 7大属性
el：指示Vue编译器从什么地方开始解析Vue语法，是一个占位符；
data： //变量、数据
methods //方法
template：用来设置模,会替换页面元素，包括占位符
render：创建真正的Virtual DOM
computed：计算属性
watch：监听 监听变化： watch:function(new,old){}

五、Axios
咱们开发的接口大部分都是采用JSON格式， 可以先在项目里模拟一段JSON数据， 数据内容如下：创建一个名为data.json的文件并填入上面的内容， 放在项目的根目录下
{
“name”: “狂神说Java”,
“url”: “https://blog.kuangstudy.com”,
“page”: 1,
“isNonProfit”: true,
“address”: {
“street”: “含光门”,
“city”: “陕西西安”,
“country”: “中国”
},
“links”: [
{
“name”: “bilibili”,
“url”: “https://space.bilibili.com/95256449”
},
{
“name”: “狂神说Java”,
“url”: “https://blog.kuangstudy.com”
},
{
“name”: “百度”,
“url”: “https://www.baidu.com/”
}
]
}
使用： axios.get(‘地址’).then(返回对象=>(执行方法)}

六： 计算属性computed
计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!
在computed中设置方法，页面中直接调用，当方法中值发生了变化才会刷新，否则计算缓存中的值。
七：插槽
狂神例子：
第一步定义一个待办事项的组件

第二步 我们需要让，代办事项的标题和值实现动态绑定，怎么做呢？我们可以留一个插槽！ 1-将上面的代码留出一个插槽，即slot Vue.component('todo',{ template:'
\ \
  • \ \
\
' }); 2-定义一个名为todo-title的待办标题组件 和 todo-items的待办内容组件 Vue.component('todo-title',{ props:['title'], template:'
{{title}}
' });

12345
//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
Vue.component(“todo-items”,{
props:[“item”,“index”],
template:"

  • {{index+1}},{{item}}
  • "
    });
    3-实例化Vue并初始化数据
    var vm = new Vue({
    el:"#vue",
    data:{
    todoItems:[‘test1’,‘test2’,‘test3’]
    }
    });
    4-将这些值，通过插槽插入





    </todo-items

    说明：我们的todo-title和todo-items组件分别被分发到了todo组件的todo-title和todo-items插槽中 完整代码如下：Title
    八：创建一个vue-cli项目 准备工作： 在系统管理员下运行cmd 安装环境 node.js 安装阿里镜像： npm install cnpm -g 安装vue-cli cnpm install vue-cli -g 创建项目： cmd中进入文件夹 生成项目 vue init webpack 项目名 运行项目 npm run dev 结束运行 Ctrl+S

    Webpack
    Webpack是一个现代JS应用程序的静态模块打包器
    安装 webpack
    1.npm install webpack -g
    2.npm install webpack-cli -g
    webpack 配置
    创建 webpack.config.js配置文件

    entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
    output：输出， 指定WebPack把处理完成的文件放置到指定路径
    module：模块， 用于处理各种类型的文件
    plugins：插件， 如：热更新、代码重用等
    resolve：设置路径指向
    watch：监听， 用于设置文件改动后直接打包
    例：
    module.exports = {
    entry:"",
    output:{
    path:"",
    filename:""
    },
    module:{
    loaders:[
    {test:/.js$/,;\loade:""}
    ]
    },
    plugins:{},
    resolve:{},
    watch:true
    }
    直接运行webpack命令打包

    使用webpack
    创建项目
    创建一个名为modules的目录，用于放置JS模块等资源文件
    在modules下创建模块文件，如hello.js，用于编写JS模块相关代码
    //暴露一个方法：sayHi
    exports.sayHi = function(){
    document.write(“

    Hello Webpack
    ”);
    }
    在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性
    //require 导入一个模块，就可以调用这个模块中的方法了
    var hello = require("./hello");
    hello.sayHi();
    在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
    module.exports = {
    entry:"./modules/main.js",
    output:{
    filename:"./js/bundle.js"
    }

    }
    在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件
    <!doctype html>



    狂神说Java





    在IDEA控制台中直接执行webpack；如果失败的话，就使用管理员权限运行即可！
    九、vue-router路由
    学习的时候，尽量的打开官方的文档

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

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

    安装
    先查看node modules中是否存在vue-router

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

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

    Vue.use(VueRouter);

    安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js，如下

    import Vue from’vue’
    //导入路由插件
    import Router from ‘vue-router’
    //导入上面定义的组件
    import Content from ‘…/components/Content’
    import Main from ‘…/components/Main’
    //安装路由
    Vue.use(Router) ;
    //配置路由
    export default new Router({
    routes:[
    {
    //路由路径
    path:’/content’,
    //路由名称
    name:‘content’,
    //跳转到组件
    component:Content
    },{
    //路由路径
    path:’/main’,
    //路由名称
    name:‘main’,
    //跳转到组件
    component:Main
    }
    ]
    });
    在App.vue中使用路由



    首页
    内容


    路由嵌套
    //导入vue
    import Vue from ‘vue’;
    import VueRouter from ‘vue-router’;
    //导入组件
    import Main from “…/views/Main”;
    import Login from “…/views/Login”;
    //导入子模块
    import UserList from “…/views/user/List”;
    import UserProfile from “…/views/user/Profile”;

    //使用
    Vue.use(VueRouter);
    //导出
    export default new VueRouter({
    routes: [
    {
    //登录页
    path: ‘/main’,
    component: Main,
    // 写入子模块
    children: [
    {
    path: ‘/user/profile’,
    component: UserProfile,
    }, {
    path: ‘/user/list’,
    component: UserList,
    },
    ]
    },
    //首页
    {
    path: ‘/login’,
    component: Login

    },

    ]
    })
    参数传递
    router中：
    {
    path: ‘/user/profile/:id’,
    name:‘UserProfile’,
    component: UserProfile
    }
    传参：

    个人信息
    3、在要展示的组件Profile.vue中接收参数 使用 {{$route.params.id}}来接收

    个人信息

    {{$route.params.id}}
    第二种取值方式 使用props 减少耦合 1、修改路由配置 , 主要在router下的index.js中的路由属性中增加了 props: true 属性 { path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true }

    2、传递参数和之前一样 在Main.vue中修改route-link地址、

    个人信息
    3、在Profile.vue接收参数为目标组件增加 props 属性

    个人信息 {{ id }}

    组件重定向

    重定向的意思大家都明白，但 Vue 中的重定向是作用在路径不同但组件相同的情况下，比如：
    在router下面index.js的配置

    {
    path: ‘/main’,
    name: ‘Main’,
    component: Main
    },
    {
    path: ‘/goHome’,
    redirect: ‘/main’
    }

    路由模式与 404
    路由模式有两种

    hash：路径带 # 符号，如 http://localhost/#/login
    history：路径不带 # 符号，如 http://localhost/login
    修改路由配置，代码如下：
    export default new Router({
    mode: ‘history’,
    routes: [
    ]
    });

    404 demo
    1.创建一个NotFound.vue视图组件
    2.修改路由配置index.js
    import NotFound from ‘…/views/NotFound’
    {
    path: ‘*’,
    component: NotFound
    }

    路由钩子与异步请求

    beforeRouteEnter：在进入路由前执行
    beforeRouteLeave：在离开路由前执行

    在Profile.vue中写
    export default {
    name: “UserProfile”,
    beforeRouteEnter: (to, from, next) => {
    console.log(“准备进入个人信息页”);
    next();
    },
    beforeRouteLeave: (to, from, next) => {
    console.log(“准备离开个人信息页”);
    next();
    }
    }

    参数说明：
    to：路由将要跳转的路径信息
    from：路径跳转前的路径信息
    next：路由的控制参数
    next() 跳入下一个页面
    next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
    next(false) 返回原来的页面
    next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

    在 beforeRouteEnter 中进行异步请求
    export default {
    //第二种取值方式
    // props:[‘id’],
    name: “UserProfile”,
    //钩子函数 过滤器
    beforeRouteEnter: (to, from, next) => {
    //加载数据
    console.log(“进入路由之前”)
    next(vm => {
    //进入路由之前执行getData方法
    vm.getData()
    });
    },
    beforeRouteLeave: (to, from, next) => {
    console.log(“离开路由之前”)
    next();
    },
    //axios
    methods: {
    getData: function () {
    this.axios({
    method: ‘get’,
    url: ‘XXXXX’
    }).then(function (response) {
    console.log(response)
    })
    }
    }
    }

    还有最后有张Vue生命周期图

    在这里插入图片描述