![](https://img-blog.csdnimg.cn/20201208090141133.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
一种界面简约,功能强大的前端js框架
北冥燕
素寅冻窗传宵柝,冷面清弦睹寒砚
展开
-
第十章 项目案例(头条新闻)
1.项目案例-头条新闻 1.1.数据接口 聚合数据:https://www.juhe.cn/ 申请 “新闻头条” 数据接口:https://www.juhe.cn/docs/api/id/235 (不可直接跨域访问) 注意:按照聚合数据网站的规定,进行注册以及实名认证,然后申请 “新闻头条” 数据接口。 1.2.工程目录结构 1.3.package.json文件 { “name”: “topnews”, “version”: “0.1.0”, “private”: true, “scripts”: {原创 2020-12-24 09:02:46 · 372 阅读 · 0 评论 -
第九章 Vue的生命周期
1.Vue生命周期 在使用vue进行日常开发中,我们总有这样的需求,想在页面刚一加载出这个表格组件时,就发送请求去后台拉取数据,亦或者想在组件加载前显示个loading图,当组件加载出来就让这个loading图消失等等这样或那样的需求。 要实现这些需求,最重要的一点就是我怎么知道这个组件什么时候加载,换句话说我该什么时候向后台发送请求,为了解决这种问题,组件的生命周期钩子函数就应运而生。 1.1.Vue生命周期图示 下面这张图,就是Vue官网给我们展示的Vue生命周期图: 这是官方文档给出的一个组件从被创原创 2020-12-23 15:48:01 · 101 阅读 · 1 评论 -
第八章 Vuex
1.Vuex简介 1.1.Vuex概述 Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. 试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了, 他们需要共有的父组件通过自定义事件进行实现, A组件原创 2020-12-23 15:32:51 · 71 阅读 · 0 评论 -
第七章 Axios的使用
1.AJAX基础 1.1.AJAX简介 AJAX即 “Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 通过在后台与服务器进行数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。 2005年初,许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯,如Go原创 2020-12-23 15:29:35 · 560 阅读 · 0 评论 -
第六章 Vue-Cli脚手架
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。 下面介绍 vue-cli 的整个搭建过程。 注意:以下内容是基于Vue-cli4.0以上版本的。 1.1.安装npm NPM(node package manager)是随同node.js一起安装的包管理工具,能解决前端代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用原创 2020-12-23 15:01:38 · 377 阅读 · 0 评论 -
第五章 Vue路由
1.Vue路由 1.1.Vue路由基础 Vue属于单页应用(SPA),即整个应用程序中只有一个html页面。 在单页应用中(SPA),由于只是更改DOM来模拟多页面,所以页面浏览历史记录的功能就丧失了。此时,就需要前端路由来实现浏览历史记录的功能。 <div id="app"> <p> <!-- 使用 router-link 组件来导航. to属性指定导航地址--> <router-link to="/home">hom原创 2020-12-23 14:40:50 · 198 阅读 · 0 评论 -
第四章 Vue组件
1.初识Vue组件 在vue中,组件是最重要的组合部分,官方中定义组件为可复用的vue实例,分为全局组件和局部组件,接下来通过实例来分别演示两种不同的组件。 1.1.全局组件 全局组件可以在任意Vue示例下使用。 <div id="app"> <mycomponent></mycomponent> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><原创 2020-12-23 11:53:35 · 83 阅读 · 0 评论 -
第三章 Vue进阶
1.Vue方法、计算属性及监听器 在vue中处理复杂的逻辑的时候,我们经常使用计算属性、方法及监听器。 methods:方法:它们是挂载在Vue对象上的函数,通常用于做事件处理函数,或自己封装的自定义函数。 computed:计算属性:在Vue中,我们可以定义一个计算属性,这个计算属性的值,可以依赖于某个data中的数据。或者说:计算属性是对数据的再加工处理。 watch:监听器:如果我们想要在数据发生改变时做一些业务处理,或者响应某个特定的变化,我们就可以通过监听器,监听数据的变化,从而做出相应的反应。原创 2020-12-23 11:42:22 · 98 阅读 · 0 评论 -
第二章 Vue基本语法
1.文本渲染指令 Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。 在前面,我们一直使用的是字符串差值的形式渲染文本,但是除此方法之外,vue还提供了其他几种常见的文本渲染方式: v-text:更新元素的innerText v-html:更新元素的innerHTML <div id="app"> <div v-html="msg"></div&g原创 2020-12-23 11:12:19 · 189 阅读 · 0 评论 -
第一章 认识Vue
1.Vue概述 1.1.早期前后端分离模式 早期的前后端分离开发模式是这样的: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> table { width: 600px; tex原创 2020-12-23 10:50:41 · 73 阅读 · 0 评论