Vue组件介绍及开发
一. 经过axios实现数据请求
1.json
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是相似于javascript对象的一种数据格式。javascript
json的做用：在不一样的系统平台，或不一样编程语言之间传递数据。css
(1) json数据的语法
json数据对象相似于JavaScript中的对象，可是它的键对应的值里面是没有函数方法的，值能够是普通变量，不支持undefined，值还能够是数组或者json对象。html
// 原生的js的json对象前端
var obj = {vue
age:10,java
sex: '女',node
work:function(){python
return "好好学习",jquery
}webpack
}
// json数据的对象格式,json数据格式,是没有方法的,只有属性：
{
"name":"tom",
"age":18
// 最后一个不要加逗号
}
// json数据的数组格式：
["tom",18,"programmer"]
复杂的json格式数据能够包含对象和数组的写法。
{
"name":"小明",
"age":200,
"is_delete": false,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100,
"lve":["code","eat"]
}
}
// 数组结构也能够做为json传输数据。
json数据能够保存在.json文件中，通常里面就只有一个json对象。
总结：
1. json文件的后缀是.json
2. json文件通常保存一个单一的json数据
3. json数据的属性不能是方法或者undefined，属性值只能：数值[整数,小数,布尔值]、字符串、json和数组
4. json数据只使用双引号、每个属性成员之间使用逗号隔开，而且最后一个成员没有逗号。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
}
工具：postman能够用于测试开发的数据接口。
(2)js中提供的json数据转换方法
javascript提供了一个JSON对象来操做json数据的数据转换.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // json语法 let emp = { "username":"xiaohui", "password":"1234567", "age":20 }; console.log(emp); console.log(typeof emp); // JSON对象提供对json格式数据的转换功能 // stringify(json对象) # 用于把json转换成字符串 let result = JSON.stringify(emp); console.log(result); console.log(typeof result); // parse(字符串类型的json数据) # 用于把字符串转成json对象 let json_str = '{"password":"1123","age":20,"name":"xiaobai"}'; console.log(json_str); console.log(typeof json_str); let json_obj = JSON.parse(json_str); console.log(json_obj); console.log(typeof json_obj); console.log(json_obj.age) </script> </body> </html>
2. ajax简介
ajax，通常中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译做：异步js和xml数据传输数据。
ajax的做用： ajax可让js代替浏览器向后端程序发送http请求，与后端通讯，在用户不知道的状况下操做数据和信息，从而实现页面局部刷新数据/无刷新更新数据。
因此开发中ajax是很经常使用的技术，主要用于操做后端提供的`数据接口`，从而实现网站的`先后端分离`。
ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就能够与后端进行数据通讯。
(1)数据接口
数据接口，也叫api接口，表示`后端提供`操做数据/功能的url地址给客户端使用。
客户端经过发起请求向服务端提供的url地址申请操做数据【操做通常：增删查改】
同时在工做中，大部分数据接口都不是手写，而是经过函数库/框架来生成。
(2)ajax的使用
ajax的使用必须与服务端程序配合使用，可是目前咱们先学习ajax的使用，因此暂时先不涉及到服务端python代码的编写。所以，咱们可使用别人写好的数据接口进行调用。
jQuery将ajax封装成了一个函数$.ajax()，咱们能够直接用这个函数来执行ajax请求。
jQuery版本：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body> <button id="btn">点击获取数据</button> <script> $("#btn").click(function(){ $.ajax({ // 后端程序的url地址 url: 'http://wthrcdn.etouch.cn/weather_mini', // 也可使用method，提交数据的方式，默认是'GET'，经常使用的还有'POST' type: 'get', dataType: 'json', // 返回的数据格式，经常使用的有是'json','html',"jsonp" data:{ // 设置发送给服务器的数据，若是是get请求，也能够写在url地址的?后面 "city":'深圳' } }) .done(function(resp) { // 请求成功之后的操做 console.log(resp); }) .fail(function(error) { // 请求失败之后的操做 console.log(error); }); }); </script> </body> </html>
vue版本(可填写城市版)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/axios.js"></script> <!--<script src="js/axios.js"></script>--> </head> <body> <div id="app"> <input type="text" v-model="city"> <button @click="get_weather">点击获取天气</button> <div v-for="k,v in weather_info.data"> <p>{{v}}:{{k}}</p> </div> </div> <script> let vm = new Vue({ el:"#app", data:{ city:"", weather_info: {}, }, methods:{ get_weather(){ // http://wthrcdn.etouch.cn/weather_mini?city=城市名称 axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city) .then(response=>{ console.log(response); this.weather_info = response.data; }).catch(error=>{ console.log(error.response) }); // 上面的参数写法,也能够是下面这种格式: // axios.get("http://wthrcdn.etouch.cn/weather_mini",{ // // get请求的附带参数 // params:{ // "city":"广州", // } // }).then(response=>{ // console.log(response.data); // 获取接口数据 // }).catch(error=>{ // console.log(error.response); // 获取错误信息 // }) } } }) </script> </body> </html>
(3)同源策略
同源策略，是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通讯的两个地址（例如服务端接口地址与浏览器客户端页面地址）之间比较，协议、域名(IP)和端口是否相同。不一样源的客户端脚本[javascript]在没有明确受权的状况下，没有权限读写对方信息。
ajax本质上仍是javascript，是运行在浏览器中的脚本语言，因此会被受到浏览器的同源策略所限制。
| 前端地址：http://www.oldboy.cn/index.html |
是否同源 |
缘由 |
| http://www.oldboy.cn/user/login.html |
是 |
协议、域名、端口相同 |
| http://www.oldboy.cn/about.html |
是 |
协议、域名、端口相同 |
| https://www.oldboy.cn/user/login.html |
否 |
协议不一样 ( https和http ) |
| http:/www.oldboy.cn:5000/user/login.html |
否 |
端口 不一样( 5000和80) |
| http://bbs.oldboy.cn/user/login.html |
否 |
域名不一样 ( bbs和www ) |
同源策略针对ajax的拦截，代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <script src="js/axios.js"></script> </head> <body> <div id="app"> <button id="btn" @click="get_music">搜索音乐</button> </div> <script> var vm = new Vue({ el: "#app", data: { }, methods: { get_music(){ axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=叶问宗师" ).then(response=>{ console.log(response.data); }).catch(error=>{ alert("出错了！"); console.log(error.response); }) } } }) </script> </body> </html>
上面代码运行错误以下：
Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
上面错误，关键词：Access-Control-Allow-Origin
只要出现这个关键词，就是访问受限。出现同源策略的拦截问题。
<1>ajax跨域（跨源）方案之CORS
ajax跨域(跨源)方案：后端受权[CORS]，jsonp，服务端代理
CORS是一个W3C标准，全称是"跨域资源共享"，它容许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。
实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。
#django的视图 def post(request): response = new Response() response .set_header("Access-Control-Allow-Origin","http://localhost:63342") return response;
// 在响应行信息里面设置如下内容： Access-Control-Allow-Origin: ajax所在的域名地址 Access-Control-Allow-Origin: www.xxx.cn # 表示只容许www.xxx.cn域名的客户端的ajax跨域访问 // * 表示任意源，表示容许任意源下的客户端的ajax均可以访问当前服务端信息 Access-Control-Allow-Origin: *
jsonp咱们经过代码了解一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>严格来讲：jsonp不是ajax技术，采用了script标签的加载跨域脚本的方式避开了同源策略</p> <p>jsonp技术的实现，是依靠服务端和浏览器端双方配合的</p> <p>api地址：https://suggest.taobao.com/sug?code=utf-8&q=商品名称&callback=cb</p> <button id="btn">点击搜索</button> <script> function hello(data) { console.log(data.result); alert(data.result); } let btn = document.getElementById("btn"); btn.onclick = function () { // 1. 建立一个script标签 script = document.createElement("script"); // 2. 把script的src属性，设置为后端api的接口地址，并且后端接口返回的数据必须是js代码， // 这个代码中，必须调用一个客户端已经提早声明的函数。 script.src = "https://suggest.taobao.com/sug?code=utf-8&q=咏春&callback=hello"; document.head.appendChild(script); } </script> </body> </html>
总结：
1. 同源策略：浏览器的一种保护用户数据的一种安全机制。
浏览器会限制ajax不能跨源访问其余源的数据地址。
同源：判断两个通讯的地址之间，是否协议，域名[IP]，端口一致。
ajax： http://127.0.0.1/index.html
api数据接口： http://localhost/index
这两个是同源么？不是同源的。是否同源的判断依据不会根据电脑来判断，而是经过协议、域名、端口的字符串是否来判断。
2. ajax默认状况下会受到同源策略的影响，一旦受到影响会报错误以下：
No 'Access-Control-Allow-Origin' header is present on the requested resource
3. 解决ajax只能同源访问数据接口的方式：
(1). CORS，跨域资源共享，在服务端的响应行中设置：
Access-Control-Allow-Origin: 容许访问的域名地址
(2). jsonp
(3). 是否服务端代理
思路：经过python来请求对应的服务器接口，获取到数据之后。
二.Vue自动化工具（Vue-cli）
前面学习了普通组件之后，接下来咱们继续学习单文件组件则须要提早先安装准备一些组件开发工具。不然没法使用和学习单文件组件。
通常状况下，单文件组件，咱们运行在 自动化工具vue-CLI中，能够帮咱们编译单文件组件。因此咱们须要在系统中先搭建vue-CLI工具，
官网：https://cli.vuejs.org/zh/
Vue CLI 须要 [Node.js](https://nodejs.org/) 8.9 或更高版本 (推荐 10.+)。你可使用 [nvm](https://github.com/creationix/nvm)或 [nvm-windows](https://github.com/coreybutler/nvm-windows)在同一台电脑中管理多个 Node 版本。
nvm工具的下载和安装：
https://www.jianshu.com/p/d0e0935b150a
https://www.jianshu.com/p/622ad36ee020
安装记录:
打开:https://github.com/coreybutler/nvm-windows/releases
1.安装Vue-cli与相关依赖包
关于安装vue-cli以及相关的依赖包等教程请见：
windos安装教程:https://www.cnblogs.com/liluxiang/p/9592003.html
ubuntu安装教程:https://www.cnblogs.com/Asterism-2012/p/10177345.html
2.使用Vue-CLI初始化建立前端项目
使用vue自动化工具能够快速搭建单页应用项目目录。
该工具为现代化的前端开发工做流提供了开箱即用的构建配置。只需几分钟便可建立并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
// 生成一个基于 webpack 模板的新项目
vue init webpack 项目目录名
例如：
vue init webpack myproject
// 启动开发服务器 ctrl+c 中止服务
cd myproject
npm run dev # 运行这个命令就能够启动node提供的测试http服务器
3.vue项目框架目录结构
src 主开发目录，要开发的单文件组件所有在这个目录下的components目录下
static 静态资源目录，全部的css，js文件放在这个文件夹
dist项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件通过编译变成js 代码之后,dist就出现了]
node_modules目录是node的包目录，
config是配置目录，
build是项目打包时依赖的目录
src/router 路由,后面须要咱们在使用Router路由的时候,本身声明.
4.项目执行流程图
整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会经过组件嵌套或者路由来引用components文件夹中的其余单文件组件。
三.组件化开发
组件（Component）是自定义封装的功能。在前端开发过程当中，常常出现多个网页的功能是重复的，并且不少不一样的页面之间，也存在一样的功能。
而在网页中实现一个功能，须要使用html定义功能的内容结构，使用css声明功能的外观样式，还要使用js来定义功能的特效，所以就产生了把一个功能相关的[HTML、css和javascript]代码封装在一块儿组成一个总体的代码块封装模式，咱们称之为“组件”。
因此，组件就是一个html网页中的功能，通常就是一个标签，标签中有本身的html内容结构，css样式和js特效。
这样，前端人员就能够在组件化开发时，只须要书写一次代码，随处引入便可使用。
vue的组件有两种：默认组件[全局组件] 和 单文件组件。
1.默认组件的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <style> .title{ color: blue; } </style> </head> <body> <div id="app"> <myheader></myheader> </div> <script> // 1. 声明默认组件 Vue.component /* * 组件名称：不要大写，也不要和原生的HTML标签同名，更不要任意使用特殊的符号 * Vue.component("组件名称", { * template: "html代码", // 组件的HTML结构代码 * data(){ * return {} * }, * methods: { // 组件的相关的js方法 * 方法名(){ * // 逻辑代码 * } * } * } * */ // `` 是js的多行字符串 // 组件里面的data的值，必须是一个匿名函数，函数的返回值必须是一个json对象 Vue.component('myheader', { template: `<div>头部组件的HTML代码<h2 @click="demo" :class="className">{{message}}</h2></div>`, data(){ return { "message": "hello, 我是组件里面的data数据", "className": "title" } }, methods: { demo(){ alert('你好！') } } }); var vm = new Vue({ el: "#app", data: { } }) </script> </body> </html>
2.单文件组件的使用
普通组件的缺点：
1. html代码是做为js的字符串进行编写，因此组装和开发的时候不易理解，并且没有高亮效果。
2. 普通组件用在小项目中很是合适，可是复杂的大项目中，若是把更多的组件放在html文件中，那么维护成本就会变得很是昂贵。
3. 普通组件只是整合了js和html，可是css代码被剥离出去了。使用的时候的时候很差处理。
将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，至关于一个组件具备告终构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，好比："Home.vue"。
建立组件:
在组件中编辑三个标签，编写视图、vm对象和css样式代码。
修改组件的导入：将原来的默认进行注释
修改成：
<template> <div id="app"> <!--<img src="./assets/logo.png">--> <!--<HelloWorld/>--> <Home/> </div> </template> <script> // import HelloWorld from './components/HelloWorld' import Home from './components/Home' export default { name: 'App', components: { // 子组件集合 // HelloWorld Home } } </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> 完成案例-点击加减数字 Home.vue文件： <template> <div id="Home"> <span @click="num--">-</span> <input type="text" size="1" v-model="num"> <span @click="num++">+</span> </div> </template> <script> // 暴露对象 export default { name: "Home", // 组件名称 data(){ return { num: 0, } }, components: { } } </script> <style> span{ font-size: 30px } </style>
效果如操做图：
在App.vue下添加样式：
span{ border: 2px solid red; }
获得的效果：
3.组件的嵌套使用
有时候开发vue项目时,页面也能够算是一个大组件,同时页面也能够分红多个子组件.
由于,产生了父组件调用子组件的状况.
例如,咱们能够声明一个组件,做为父组件
在components/建立一个保存子组件的目录common，并建立一个Header.vue文件。
Header.vue文件：
// 组件中代码必须写在同一个标签中 <template> <div> 公共头部 <p>{{message}}</p> </div> </template> <script> export default { name: "Header", data(){ return { message: "头部组件的data数据" } } } </script> <style> p{ color: red; } </style> 而后，在父组件中调用上面声明的子组件： <template> <div id="Home"> <!--使用子组件--> <HeaderSon></HeaderSon> 我是Home组件的template内容 <span @click="num--">-</span> <input type="text" size="1" v-model="num"> <span @click="num++">+</span> </div> </template> <script> // 导入子组件 import HeaderSon from './common/Header' // 暴露对象 export default { name: "Home", // 组件名称 data(){ return { num: 0, } }, components: { // 注册子组件 HeaderSon, } } </script> <style> span{ font-size: 30px } </style>
最后,父组件被App.vue调用.就能够看到页面效果.
效果：
四.在组件中使用axios获取数据
1.父组件的数据传递给子组件
例如,咱们但愿把父组件的数据传递给子组件.
能够经过props属性来进行数据传递.
传递数据三个步骤：
1. 在父组件中，调用子组件的组名处，使用属性值的方式往下传递数据
<HeaderSon :fnum="num" title="Home里面写的数据"></HeaderSon>
上面表示在父组件调用Menu子组件的时候传递了2个数据：
若是要传递变量[变量能够各类类型的数据]，属性名左边必须加上冒号:，同时，属性名是自定义的，会在子组件中使用。
若是要传递普通字符串数据，则不须要加上冒号:
2. 在子组件中接受上面父组件传递的数据，须要在vm组件对象中，使用props属性类接受。
<script> export default { name: "Header", data(){ return { message: "头部组件的data数据" } }, props: [ "fnum", 'title' ] } </script>
3.在子组件中的template中使用父组件传递过来的数据
// 组件中代码必须写在同一个标签中
<template> <div> 公共头部 <p>{{message}}</p> <p>父组件传过来的fnum：{{fnum}}</p> <p>父组件传过来的title：{{title}}</p> </div> </template>
效果：
代码的步骤流程为：
2.子组件传递数据给父组件
子传父传递数据步骤：
(1)在子组件中，经过 this.$emit() 来调用父组件中定义的事件
<script> export default { name: "Header", data(){ return { message: "头部组件的data数据" } }, props: [ "fnum", 'title' ], watch: { fnum(){ console.log(this.fnum); // this.$emit("父元素的自定义事件","要传递的数据"); // 经过this.$emit()方法，子组件能够把数据传递给父组件 this.$emit("PostParentData", this.fnum); } } } </script>
(2)父组件中声明一个和子组件 this.$emit("自定义事件名称") 对应的事件属性。
(3)父组件中，声明的自定义方法，在事件被调用时执行。
- 1. Vue组件介绍及开发
- 2. Vue组件、插件介绍
- 3. Vue组件开发
- 4. vue组件开发
- 5. Vue (三) --- Vue 组件开发
- 6. Kafka简介及各个组件介绍
- 7. Hbase简介及各个组件介绍
- 8. 组件介绍
- 9. vue-loader和单页组件介绍
- 10. Vue的Keep-alive组件详细介绍
- 更多相关文章...
- • 网站主机 介绍 - 网站主机教程
- • ASP AdRotator 组件 - ASP 教程
- • PHP开发工具
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Vue组件介绍及开发
- 2. Vue组件、插件介绍
- 3. Vue组件开发
- 4. vue组件开发
- 5. Vue (三) --- Vue 组件开发
- 6. Kafka简介及各个组件介绍
- 7. Hbase简介及各个组件介绍
- 8. 组件介绍
- 9. vue-loader和单页组件介绍
- 10. Vue的Keep-alive组件详细介绍