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

Posted 2020-06-19 Updated 2024-12- 10

By Administrator

11~15 min read

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()

json的属性值需要用双引号包起来,最后一个成员后边不需要逗号
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)
        }
    }
}

同源策略

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

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

解决方案:

服务的授权[cors]
设置header: 'Accesss-Control-Allow-Origin' '允许访问的域名地址'

jsonp

function getdata(){
    let script = document.createElement('script')
    script.src = '---?参数'
    document.head.append(script)
    console.log(script)
}

服务端代理

组件化开发

通过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及初始化

可以使用以下命令安装vue-cli

npm install -g vue-cli

初始化项目

Vue init webpack {项目名称}

build/  # 编译配置 
static/  # 静态资源
config/  #配置文件
node_modules/  #node包目录
package-lock.json  
src/    #开发代码目录
index.html     
package.json       
README.md

vue导入模块方式:
import 对象/类(可为别名) from "目录路径"
目录路径带点的,为相对路径
不带点的为node_modules目录中保存的目录名
在导入包时,如果包名以vue 或者 js 结尾则不需要加后缀
项目执行流程
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:{
            
        }
}

前端

License: CC BY 4.0