刘刚刚的个人博客

2.vue基础——开始组件化开发


vue-cli 、npm等工具极大的提高了vue的开发效率。本文主要介绍了axios及单文件组件的开发。

通过axios实现请求

vue中通常使用axios插件进行与后端服务的数据交互

axios与ajax一样,会受到同源策略的影响

使用方法:

axios.get('url',{
    params:{
        参数名:‘参数值’
    },
    headers:{
        选项名:‘选项值’
    }
}).then{
        response=>{
            //请求成功的回调
        }
   .catch{
       erro => {
           //请求失败的回调
       }
   }
}

axios.put('url',{    
        参数名:‘参数值’
    },
    headers:{
        选项名:‘选项值’
    }
}).then{
        response=>{
            //请求成功的回调
        }
   .catch{
       erro => {
           //请求失败的回调
       }
   }
}

axios.delete()的用法与axios.get() 一样

axios.put() axios.patch() axios.post() 一样

在http,不同的请求动作有不同的含义

get 向目标服务器请求获取数据

post 代表向目标服务器请求上传数据

put 代表向目标服务器请求更新全部数据

patch 代表向目标服务器请求更新某条数据

delete 代表向目标服务器请求删除

json

json数据类似js中的对象,但是没有js对象中的函数方法,值不支持undefined

// 原生的js的json对象
var obj = {
  age:10,
  sex: '女',
  work:function(){
    return "好好学习",
  }
}
// json数据的对象格式,json数据格式,是没有方法的,只有属性,属性值:字符串,数值(整数,浮点数,布尔值), json,
{
    "name":"tom",
    "age":18
}

// json数据的数组格式:
["tom",18,"programmer"]

json字符串转为json对象: JSON.parse({json字符串})

json对象转json字符串: JSON.stringify({json对象}),不能直接使用tostring()

  1. json的属性值需要用双引号包起来,最后一个成员后边不需要逗号
  2. json文件一般只保存一个单一的json对象

ajax

ajax技术的原理是实例化XMLHttpRequest 对象,使用此对象提供的内置方法与后端进行数据通信

XMLHttpRequest请求步骤

var xhr = XMLhttpRequest()
xhr.open('get','http://=----')
xhr.send('name=shuta')
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        //state 1表示ajax 对象刚创建,2表示请求组装完成 3,表示已经发送到服务器 4,表示客户端获取到服务器返回的的数据
        if(xhr.status == 200 ){
            console.log(xhr.responseText)
        }
    }
} 

同源策略

为保证用户的信息安全,不同源的客户端在没有得到服务端授权的情况下,浏览器拒绝给用户显示从服务器获取到的数据。

要求: 域名相同、端口相同、协议相同

解决方案:

  1. 服务的授权[cors]

    设置header: 'Accesss-Control-Allow-Origin' '允许访问的域名地址'

  2. jsonp

    function getdata(){
        let script = document.createElement('script')
        script.src = '---?参数'
        document.head.append(script)
        console.log(script)
    }
  3. 服务端代理

组件化开发

通过Vue对象可以创建组件,组件与组件之间的数据、方法都是独立的,互相不会影响

Vue.component('mynav',{
            template:"<div>2</div>",
            data(){
                return {
                    num:0
                }
            },
            methods:{

            }
        })

vue-cli

node与npm

在安装完node后,会包含包管理器npm

常用命令:

npm install -g 包名 #安装模块 -g代表全局安装,如果没有-g ,则表示在当前项目安装

npm list  #查看当前目录下已安装的node包

npm view 包名 engines  #查看包所依赖的Node版本

npm outdated #查看包是否已经过时

npm update 包名  #更新node包

npm uninstall 包名 #卸载node包

npm 命令 -h  #查看指定命令的帮助文档

vue-cli及初始化

  1. 可以使用以下命令安装vue-cli
npm install -g vue-cli
  1. 初始化项目
Vue init webpack {项目名称}
  1. 项目目录
build/  # 编译配置 
static/  # 静态资源
config/  #配置文件
node_modules/  #node包目录
package-lock.json  
src/    #开发代码目录
index.html     
package.json       
README.md  

  1. vue导入模块方式:

    import 对象/类(可为别名) from "目录路径"

    目录路径带点的,为相对路径

    不带点的为node_modules目录中保存的目录名

    在导入包时,如果包名以vue 或者 js 结尾则不需要加后缀

  2. 项目执行流程

    index.html => main.js => App.vue =>组件

单文件组件

组件写在 src/components 文件夹下边,组件名使用驼峰式写法,引用时使用小写

格式:

<template>

</template>

<script>
    //抛出对象,只有通过export关键字抛出的对象,才能被其他js文件引用
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>
  • 在template 中只能有一个根标签
  • 在style 标签中直接写css 样式,默认时全局样式,所有的组件样式都会被影响到,为了保证各个组件的独立性,需要加上scoped ,可以变为局部样式

在单文件组件中写数据,不需要再创建vm对象,因为已经创建好了

export default {
        name: "Home",
        data():{
    
        },
        methods:{
        
        },
        watch:{
            
        }
}
我的名片

昵称:shuta

职业:后台开发(php)

邮箱:648949076@qq.com

站点信息

建站时间: 2020/2/19
网站程序: ANTD PRO VUE + TP6.0
晋ICP备18007778号