Vue.js

最新推荐文章于 2023-03-08 11:25:46 发布

我要成为罗宾姐姐

最新推荐文章于 2023-03-08 11:25:46 发布

阅读量172

点赞数

分类专栏：前端基础文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45883310/article/details/117117357

版权

前端基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.Vue.js

1.1 Vue.js 介绍

1.1.1 官方网站

https://cn.vuejs.org/v2/guide/ 作者尤雨溪

1.1.2 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

代码编写步骤：

定义html，引入vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

定义app div，此区域作为vue的接管区域
定义Vue实例，接管app区域
定义model（数据对象）
在app中展示数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      
    <!-- 2. 定义app div 此区域作为vue的接管区域 -->
    <div id="app">
      <h2>{{name}}</h2>
    </div>
      
  </body>

  <!--原生js代码 jQuery中 如果 DOM 发生变化 js代码也需要做相应的改变 高耦合-->
  <!-- <script src="./js/jquery-1.8.3.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#app").append("<h2>Hello Word! !</h2>");
    });
  </script> -->

  <!--在Vue中 只需要定义好展示数据 并把它放在 DOM 合适的位置就可以-->
  <!-- 1.创建HTML文件 引入本地vue.js -->
  <script src="js/vue.min.js"></script>
  <script>
    //3. 创建vue实例
    var VM = new Vue({
      //定义 Vue实例挂载的元素节点 表示vue接管该div
      el: "#app", //挂载点
      //4.定义model模型数据对象
      data: {
        name: "Hello Word! !",
      },
    });
  </script>
    
</html>

1.1.3 MVVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

MVVM模式将页面分成了 M 、V、和VM

Model: 负责数据存储
View: 负责页面展示
View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

<body>
    <div id="app">
      <!-- View 视图部分 -->
      <h2>{{name}}</h2>
    </div>
  </body>

  <script src="./js/vue.min.js"></script>
  <script>
    //创建的vue实例,就是 VM ViewModel
    var VM = new Vue({
      el: "#app",
      //data就是MVVM模式中的 model
      data: {
        name: "hello",
      },
    });
  </script>

在这里插入图片描述

1.1.3.1 v-model 指令

作用：获取和设置表单元素的值(实现双向数据绑定)，绑定的数据会和表单元素值相关联

单向绑定：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新

双向绑定：用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定

在这里插入图片描述

1.2 axios

1.2.1 Ajax回顾

1.2.1.1 什么是Ajax?

Ajax 即"Asynchronous**[eɪˈsɪŋkrənəs]（异步）** Javascript And XML"，是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML。

1.2.1.2 Ajax的作用

传统的网页如果需要更新内容，必须重载整个网页页面。

Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）。

1.2.1.3 异步与同步

浏览器访问服务器的方式
- 同步访问：客户端必须等待服务器端的响应，在等待过程中不能进行其他操作
- 异步访问：客户端不需要等待服务的响应，在等待期间浏览器可以进行其他操作

1.2.2 axios入门

VUE中结合网络数据进行应用的开发

目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便
axios作用：在浏览器中可以帮助我们完成 ajax异步请求的发送

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax

1.2.2.1 axios使用

导包

<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

请求方式，以GET和POST举例

<!-- GET -->
axios.get(地址?key=value&key2=value2).then(function(response){},function(error){});

<!-- POST -->
axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})

1.2.3 天气查询案例

1.2.3.1 需求分析

功能分析：回车查询

输入内容，点击回车 (v-on.enter)
访问接口，查询数据 (axios v-model)
返回数据，渲染数据

案例模板

在这里插入图片描述

1.2.3.2 接口文档

请求地址:http://wthrcdn.etouch.cn/weather_mini

请求方法:get

请求参数:city (要查询的城市名称)

响应内容:天气信息

1.2.3.3 案例演示

项目文件夹

在这里插入图片描述

资源文件

查询天气案例

自定义JS文件

作为一个标准的应用程序，我们将创建VUE实例的代码，抽取到main.js 文件中，该文件放入js文件夹中

main.js

/**
 * 
 *  请求地址:http://wthrcdn.etouch.cn/weather_mini
    请求方法:get
    请求参数:city (要查询的城市名称)
    响应内容:天气信息
 */

var VM = new Vue({
  el: "#app",
  data: {
    city: "", // 先输入空 占位 根据用户输入确定值
    //定义数组保存 天气信息
    weatherList: [],
  },
  //编写查询天气的方法
  methods: {
    searchWeather: function () {
      console.log("天气查询");
      console.log(this.city);

      // axios回调函数中this指向已经改变,无法访问data中的数据
      var that = this; //把this保存起来

      //调用接口
      axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(
        function (resp) {
          console.log(resp.data.data.forecast);
          //获取天气信息 保存到weatherList
          // axios回调函数中this指向已经改变,无法访问data中的数据
          that.weatherList = resp.data.data.forecast;
        },
        function (error) {}
      );
    },
  },
});

把模板.html 的内容选择性地复制到查询天气案例.html

查询天气案例.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>天气查询</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />

    <style>
      /*
        1.应用的逻辑代码 建议与页面进行分离,使用单独的JS编写
        2.axios中 回调函数中的this 需要先保存 再使用
        3.服务器返回的数据比较复杂,获取数据的时候 要注意层级结构
      */
      [v-cloak]{
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="wrap" id="app" v-cloak>
      <div class="search_form">
        <div class="logo">天气查询</div>
        <div class="form_group">
          <input
            type="text"
            class="input_txt"
            placeholder="请输入要查询的城市"
            v-model="city"
            @keyup.enter="searchWeather"
          />
          <button class="input_sub">回车查询</button>
        </div>
      </div>
      <ul class="weather_list">
        <!-- 展示数据 -->
        <li v-for="item in weatherList">
          <div class="info_type">
            <span class="iconfont">{{item.type}}</span>
          </div>
          <div class="info_temp">
            <b>{{item.low}}</b>
            ~
            <b>{{item.high}}</b>
          </div>
          <div class="info_date"><span>{{item.date}}</span></div>
        </li>
      </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 自己的js -->
    <script src="./js/main.js"></script>
  </body>
</html>

先在控制台看数据长什么样，再写代码决定怎么取数据

在这里插入图片描述

main.js

//获取天气信息 保存到weatherList
that.weatherList = resp.data.data.forecast;

代码写好后

在这里插入图片描述

1.2.3.4 案例总结

应用的逻辑代码建议与页面进行分离,使用单独的JS编写
axios中回调函数中的this 需要先保存再使用
服务器返回的数据比较复杂,获取数据的时候要注意层级结构

解决页面闪烁问题

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码

我们可以使用 v-cloak 指令来解决这一问题

<!-- 查询天气案例.html -->
<style>
    /* 通过属性选择器,设置 添加了v-cloak */
    [v-cloak] {
    	display: none;
    }
</style>

<!-- 在id为app的div中添加 v-cloak*/ -->
<div class="wrap" id="app" v-cloak>

2. Vue-cli

https://cli.vuejs.org/zh/guide/

2.1 什么是Vue-cli

Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具。为应用搭建基础的框架结构，提供插件、开发服务、Preset、构建打包功能。

Vue cli 背后集成了现代化开发的诸多功能，通过简单的命令就可以完成 "零配置"的项目环境搭建，相当于前端的maven。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

2.2 安装Vue-cli步骤

在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm

2.2.1 安装Node.js

安装了node.js才能使用npm ，才能安装vue-cli

2.2.1.1 什么是node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。

JavaScript程序，必须要依赖浏览器才能运行，没有浏览器可用Node.js解决。

简单的说 Node.js 就是运行在服务端的 JavaScript。

为什么会有node.js？

传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，这样就可以使用javascript去编写一些服务端的程序，这样也就实现了用 javaScript去开发 Apache + PHP 以及 Java Servlet所开发的服务端功能，这样做的好处就是前端和后端都采用 javascript，即开发一份js程序即可以运行在前端也可以运行的服务端，这样比一个应用使用多种语言在开发效率上要高，不过node.js属于新兴产品，一些公司也在尝试使用node.js完成一些业务领域，node.js基于V8引擎，基于事件驱动机制，在特定领域性能出色，比如用node.js实现消息推送、状态监控等的业务功能非常合适。

2.2.1.2 安装node.js

Download | Node.js (nodejs.org)

2.2.2 安装NPM

npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具maven的依赖管理功能差不多，我们通过npm 可以很方便地下载js库，打包js文件。

node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本。

2.2.2.1 安装cnpm

npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内淘宝镜像。

//安装
npm install -g cnpm --registry=https://registry.npm.taobao.org

//查看cnpm的版本
cnpm -v

2.2.3 安装vue-cli

//安装
npm install -g @vue/cli

//查看版本
vue -V

ElementUI对超过4.5版本的vue-cli不生效，安装时可指定版本npm install -g @vue/cli@4.4.6

2.3 构建Vue项目

创建一个项目

2.3.1 Vue 组件化开发

每一个*.vue 文件都是一个组件，是一个自定义的文件类型，比如 App.vue 就是整个项目的根组件。

组件的组成部分

template : 组件的HTML部分

script: 组件的JS脚本 (使用ES6语法编写)

props : 是组件中的属性, 表示组件可以接受参数

Header.vue

<script>
export default {
    name: "Header", //组件名称 用于路由的跳转
    // 常用写法
    props:['msg']
};
</script>

<script>
export default {
  name: 'Header',
  // 另一种写法
  props: {
      msg: String
  }
}
</script>

Home.vue

<Header msg="这是通过props属性进行赋值显示出来的"/>

在这里插入图片描述

style: 组件的CSS样式

Header.vue

<template>
    <div class="header">{{msg}}</div>
</template>

<script>
export default {
    name:"Header",
    data(){
        return{
             msg:"Header组件"
        }
    }
}
</script>

<style scoped>
.header {
    height: 100px;
    line-height: 100px;
    background-color: #eee;
    text-align: center;
    color: blue;
}
</style>

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <Header/>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '../components/Header.vue'

export default {
  name: 'Home',
  components: {
    Header
  }
}
</script>

在这里插入图片描述

3. ElementUI

官方站点： https://element.eleme.cn/#/zh-CN

3.1 Element-UI介绍

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建。

3.2 Element-UI使用

3.2.1 命令行方式安装

创建一个新的项目
当前项目下打开终端，安装依赖包，执行下面的命令
```
npm i element-ui -S
```

打开 main.js , 导入Element-UI 相关资源

main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、 VueRouter等

//导入组件库
import ElementUI from 'element-ui'

//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'

//配置Vue插件 将El安装到Vue上
Vue.use(ElementUI);

3.2.2 安装axios

npm安装：使用npm下载axios包
```
npm i axios
```

在main.js文件中导入axios 相关资源

//引入axios
import axios from 'axios'

//Vue对象使用axios
Vue.prototype.axios = axios;

我要成为罗宾姐姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js

1.Vue.js1.1 Vue.js 介绍1.1.1 官方网站https://cn.vuejs.org/v2/guide/ 作者尤雨溪1.1.2 声明式渲染Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。代码编写步骤：定义html，引
复制链接

扫一扫

专栏目录