vue的讲解

最新推荐文章于 2022-10-31 13:09:04 发布

彭十七

最新推荐文章于 2022-10-31 13:09:04 发布

阅读量401

点赞数 1

分类专栏： Vue 跳转文章标签： vue

本文链接：https://blog.csdn.net/weixin_42642664/article/details/102598764

版权

Vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

跳转

3 篇文章 0 订阅

订阅专栏

讲解分为，介绍vue，vue的安装，webpack打包工具，vue中的页面变成动态页面，ES6的一些常用语法介绍，vue中的页面优化。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

起步

1.安装

vue的安装有三种方式：

第一种采用下载.js文件引用script的方式访问地址：https://vuejs.org/js/vue.js

第二种不下载直接使用CDN 访问地址：https://www.bootcdn.cn/

第三种不下载直接使用npm（推荐）

关于使用npm构建项目，请访问 https://blog.csdn.net/weixin_42642664/article/details/100143541

2.精简压缩生产环境Webpack工具

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

下面是我们安装webpack的指令

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

使用 cnpm 安装 webpack：

cnpm install webpack -g

2.1关于webpack打包之后，加载出现空白的问题

webpack打包出现空白问题，最大的一点可能就是路径问题，关于webpack的路径导致的问题

https://blog.csdn.net/weixin_42642664/article/details/100534117

vue创建成功之后的目录

bulid文件里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等；

config文件里面是对保存项目初始化的配置

src存放代码的路径

3.页面变成动态页面

对于页面来说，静态页面是不够的，所以我们需要将静态页面变成动态页面

3.1认识条件渲染（v-if）

v-if使用跟java，JavaScript中的if判断是一样的，都是用于进行判断，在vue.js中，为了符合HTML代码的规范，可以直接使用v-if判断，下面是个小小栗子：

<h1 v-if="ok">Yes</h1>

同时v-if也提供了else条件语句。可以用v-else添加一个else块：

<h1 v-if="ok">Yes</h1>

<h1 v-else>No</h1>

在vue2.1以上版本中，还提供了else-if语句，标签为v-else-if，栗子如下：

<div v-if="type==='A' ">AAAA</div>

<div v-if="type==='B' ">BBBB</div>

<div v-if="type==='C' ">CCCC</div>

<div v-else>not A/B/C</div>

3.2v-show的应用

v-show，其用法与v-if基本相似。

<h1 v-show=“ok”>Hello</h1>

但是v-show不同的是，v-show的元素会一直保留在DOM层中，v-show是进行了简单的切换元素的CSS属性display

而v-if是，一个创建与销毁的过程，当v-if是为true时，在DOM层中创建，为false，DOM层销毁。

3.3列表渲染（v-for）

用v-for将一组数组对应为一组元素，对一些内容进行循环，v-for指令使用 item in items形式，items是原数组，item是别名

栗子：

<template>
	<div class="zong">
		<div class="top">
			<ul id="aaa">
				<li v-for="item in items">
					{{item.message}}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
	       items:[
			   {message:'Foo'},
			   {message:'Bar'},
		   ]
	      }
	    }
		}
</script>

3.4vue的路由 v-router

1.安装v-router

命令：cnpm install vue-router

安装完v-router之后进入src中的main.js文件中，引入router

在index.vue中

页面中

详细vue-router的介绍：https://blog.csdn.net/weixin_42642664/article/details/100582456

vue嵌套路由实现在两个页面之间来回切换：https://blog.csdn.net/weixin_42642664/article/details/100973186

4.ES6的常用语法介绍

默认参数，模版文本，多行字符串，箭头函数，Modules（模块）

4.1默认参数介绍：

以前的JavaScript定义方式

var link=function(height,color,url){
    var height = height || 50;
    var color = color || 'red';
    var url = url || 'http://baidu.com';
}

ES6中，直接将默认值放在函数申明中

var link = function(height=50,color='red',url='http://baidu.com'){

}

4.2模版文本介绍：

在其他语言中，使用模版和插入值是在字符串中输出变量的一种方式，所以在ES5中可以组合一个字符串

ES6之前方式只能使用组合字符串方式

var name='Your name is '+first+' '+last+' ';
var url = 'http：//localhost：300/api/message/'+id;

ES6中，可以使用新的语法${name}

var name = 'your name is ${first} ${last}';
var url = 'http：//localhost：300/api/message/${id}';

4.3多行字符串

在ES5中，我们使用一下方法来表示多行字符串：
var roadPoem='江南好，风景旧曾谙。'+'日出江花红胜火'+'春来江水绿如蓝'+'谁不忆江南？';

在ES6中支持多行文本

var roadPoem='江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝，谁不忆江南？';

4.4箭头函数介绍

ES5中

var _this=this;
$('.btn').click(function(event){
_this.sendData();
});

ES6中箭头函数:

$('.btn').click((event) =>{ this.sendData(); })

4.5Modules（模块）介绍

在ES6之前JavaScript是不支持本地模块的，办法是人想出来的，有人就用AMD，RequireJS及其他办法，现在ES6中可以使用import和export操作了。
  
  在ES5中可以在<script>中写可以运行的代码，或者库，如AMD。
  在ES6中可以使用export引入类。

举个例子，在ES5中module.js中pro变量和getadd()方法：

module.exports={
pro：3000，
getadd：function(){

}}

在ES5中需要依赖require引入module.js;

var service=require('module.js');
console.log(service.pro);           //3000

但在ES6中，将用export and import进行一个模块的引入和抛出：

export var port=3000;
export function getadd(url){}

import {pro,getadd} form 'module';
console.log(pro);                 //3000

5.页面优化

丰富的模版和UI框架

常用的一些UI框架

ELement 链接地址：https://element.eleme.cn/#/zh-CN

安装ElementUI命令

npm i element-ui -S

引入ElementUI

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

iview组件库

https://www.iviewui.com/

安装命令

$ npm install view-design --save

一般在 webpack 入口页面 main.js 中如下配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(ViewUI);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});