Vue基本知识熟知

最新推荐文章于 2024-06-09 20:17:27 发布

qq_55293923

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量352

点赞数 1

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_55293923/article/details/124465619

版权

Vue

第一个Vue程序

1.在idea中下载vue插件
2.新建一个html文件导入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> //官网中有具体新版本，可自行去查询
3.写下如下程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {
  {message}}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
     
        el:"#app",
        //Model :数据
        data:{
     
            message:"hello,vue!"
        }
    });
</script>
</body>

MVVM模式

在这里插入图片描述
MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个 Observer观察者

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

Vue组件

<!--view层 模板-->
<div id="app" >
    <lqc v-for="item in items" v-bind:data="item"></lqc>

</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    Vue.component('lqc',
        {
     
            props: ['data'],
            template: '<li>{
     {data}}</li>'
        });

    var vm = new Vue({
     
        el:"#app",
        data: {
     
            items: ["一一","二二","三三"]
        }
    });
</script>

Axios异步通信

是什么

【我自认为就是，前端页面数据，同json文件中的数据，双向绑定】****【axios.get(‘…/data.json’).then(response=>(this.info=response.data));这里是关键，钩子函数】
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

为什么要用Axios

由于Vue.js是一个视图层框架并且作者（尤雨溪）严格准守SoC(关注度分离原则）)，所以vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁!

第一个Axios应用程序

我们开发的接口大部分采用JSON格式
在此为模拟接口数据，创建一个data.json的文件，放在项目的根目录下

{
   
  "name": "lqc啊",
  "url": "https://www.baidu.com",
  "address": {
   
    "street": "西街",
    "house": "蘑菇屋"
  }
}

测试代码

<body>
<!--view层 模板-->
<div id="app" >
    <div>{
  {info.name}}</div>
    <div>{
  {info.address.house}}</div>
    <a v-bind:href="info.url">click me</a>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!--2.导入Axios.js-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript

最低0.47元/天解锁文章

qq_55293923

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基本知识熟知

Vue第一个Vue程序1.在idea中下载vue插件2.新建一个html文件导入Vue.js<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> //官网中有具体新版本，可自行去查询3.写下如下程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
复制链接

扫一扫