VUE

最新推荐文章于 2023-07-19 20:00:00 发布

wild horses

最新推荐文章于 2023-07-19 20:00:00 发布

阅读量559

点赞数

文章标签： js vue html javascript

本文链接：https://blog.csdn.net/weixin_45557307/article/details/106772503

版权

VUE

一.ES6语法

VUE基于是ES6的，所以在使用Vue之前我们需要先了解一下ES6的语法。

1.什么是ECMAScript

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。为什么会出现这个规范呢？

1.1.JS发展史

1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。

1.2.ECMAScript发展历史

97年而后，ECMAScript就进入了快速发展期。1998年6月，ECMAScript 2.0 发布。
1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了
2007年10月，ECMAScript 4.0 草案发布。这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。

一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。

一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。

ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的ECMAScript5和6版本
2009年12月，ECMAScript 5 发布。
2011年6月，ECMAScript 5.1 发布。
2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。

ES6就是javascript用的最多语言规范.被各大浏览器厂商实现了.

2.ES6语法规范

2.1.let & var

都是用来声明变量， let相较于var，他是块级的(局部)。

for(var i == 0 ; i < 10 ; ++){
    console.debug(i);
}
console.debug("i="+i);	//正常打印
------------------------------------
for(let i == 0 ; i < 10 ; ++){
    console.debug(i);
}
console.debug("i="+i);	//这里会报错，i会找不到

2.2.const

const声明常量不能修改，如同Java的final修饰符

const c = 4;
c = 5;	//编译报错，不能修改

2.3.结构表达式

数组赋值

let arr = ["好","大"];
------------------------------------
console.debug(arr[0],arr[1]);	//以前的取值
------------------------------------

let [a,b] = arr;	//结构表达式数组赋值,定义了变量a,b并按照索引赋值。
console.debug(a,b);

对象赋值

var user = {
    id: 1,
    username:"zs",
    age: 11
}
--------------------------------------
console.debug(user.id,user.username,user.age);	//以前的取值
--------------------------------------
var {id,username,age} = user;	//结构表达式，对象赋值，按照属性名赋值。
console.debug(id,username,age);

方法参数赋值

var user = {
    id: 1,
    username:"zs",
    age: 11
}
--------------------------------------
function showUser({id,username,age}){ 	//结构表达式，方法参数赋值，按参数名赋值。
	console.debug(id,username,age);
}
showUser(user);	//把user对象作为参数传给showUser方法

注意：数组用 [ ] 赋值，对象用 { } 赋值

2.4.箭头函数

var user = {
    username:"zs",
    age:22,
    showUser:function(){	//以前定义方法的方式
        console.debug(this.username+" "+this.age);
    },
    //--------------------------------------
    showUser2:()=>{	//es6定义方法的方式
        //注意：这里的this指的是window对象了。不能用this.usename
		console.debug(user.username+" "+user.age);        
    },
    showUser3(){	//简写
        console.debug(user.username+" "+user.age);        
    }
}
user.showUser();
user.showUser2();
user.showUser3();

2.5.Promise对象

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

  /**=======================================
     Promise 异步请求
     =======================================**/
    //1.执行异步请求
    const p = new Promise((resolve, reject) =>{
        //成功，调用 resolve 
        //失败，调用 reject
        // 这里我们用定时任务模拟异步
        setTimeout(() => {
            const num = Math.random();
            // 随机返回成功或失败
            if (num < 0.5) {
                //2.调用成功的结果回调
                resolve("成功！num:" + num)
            } else {
                //3.调用失败的结果回调
                reject("出错了！num:" + num)
            }
        }, 300)
    })
    // 调用promise
    p.then(function (msg) {
        //2.调用成功的结果回调
        console.log(msg);
    }).catch(function (msg) {
        //3.调用失败的结果回调
        console.log(msg);
    })

2.6.模块化

main.html
main.js
util.js

util.js

export const util = {
    sum(a , b){
        return a + b;
    }
}
-----------------------------或者
const util = {
    sum(a , b){
        return a + b;
    }
}
export const;
-----------------------------批量导出
lef a = 1 ,let b = 2;
export {a,b};

main.js

import {util} from './util.js';

main.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<script src="./main.js" type="model"></script>
<script>
    alert(util.sum(1,1));   //运行会报错，浏览器不支持，要使用webpack之后才能运行
</script>
<body>

</body>
</html>

运行会报错，浏览器不支持，要使用webpack之后才能运行

2.7.总结

let
const
结构表达式
箭头函数
Promise
模块化

二.前端技术了解

1.前段历史

1.1.静态网页

1990 html

1.2.异步刷新-操作dom

1995 javascprint

1.3.动态网站

Asp/jsp（java）,php等，后台臃肿

1.4.Ajax成为主流

异步请求

1.5.Html5

被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范。

2.Nodejs介绍

2.1.介绍

Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统。

2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。

Java	Nodejs
后端服务器开发	前段服务器开发
Maven管理jar包	NPM管理JS库
SSM架构开发项目	VUE前段框架

随后，在node的基础上，涌现出了一大批的前端框架：Angular（MVC->MVVM）,Vue(MVVM)等等

2.2.主流前端框架

前端框架三巨头：

Vue.js:vue.js以轻量易用著称
React.js:vue.js和React.js发展速度最快，集web前端与app于一身技术
AngularJS:AngularJS还是曾今老大。

三.Nodejs和VUE的安装

vue的安装方式有两种，

手动下载VUE的js库，然后在html中导入JS库进行开发
通过Npm安装VUE的JS库，然后在html中导入使用

第一种方式我们玩其他JS库的时候一直都在用，我们主要使用Npm来安装VUE

1.Nodejs的安装

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具.

1.1.安装Nodejs

Nodejs自带npm，安装好Nodejs就安装好了npm

NodeJs下载：https://nodejs.org/en/download/
安装：双击安装
升级：npm install npm@latest -g
测试Node：cmd -> node -v
测试Npm： cmd -> npm -v
淘宝镜像：npm config set registry https://registry.npm.taobao.org

1.2.cnpm的使用（可用可不用）

淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟一次以保证尽量与官方服务同步。

安装：命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org
测试cnpm ：cnpm -v

2.VUE的安装

我们在IDEA中创建一个静态项目，通过Terminal来安装VUE

2.1.IDEA准备

IDEA安装Nodejs插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lKWCn6Jz-1592229882014)(images/image-20200423135515028.png)]

IDEA配置Terminal
在这里插入图片描述

2.2.Vue安装和使用

VUE官网地址：https://cn.vuejs.org/v2/guide/

使用CDN方式

Vue有两种使用方式，1是使用cdn方式直接引入JS库，2.使用Npn安装VUE库，第一种方式如下：

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

当然也可以手动下载该JS库到本地项目，然后引入JS库

使用NPM安装VUE

使用Terminal初始化：npm init -y

改名了是初始化NPM，会在项目中产生一个package.json文件。
安装vue：

全局安装（不推荐）：npm install -g vue

局部安装（推荐）：npm install vue

安装成功后VUE的JS库：node_modules/vue/dist/vue.js

注意：项目的名称不能使用“vue”，不然会报错

NPM相关命令

查看模块：npm list vue

卸载模块：npm uninstall vue

更新模块：npm update vue

运行工程：npm run dev/test/online

编译工程：npm run build

四.VUE的基本使用

1.VUE介绍

1.1.Vue是什么

Vue (读音 /vjuː/，类似于 ***view*) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

VUE+ElementUI

1.2.Vue的特点

轻量

Vue.js库的体积非常小的，并且不依赖其他基础库。

数据绑定

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

指令

内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

插件化

Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

组件化，他支持自定义标签

组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

1.3.MVVM思想

Vue是一款开源的JavaScript MV*（MVVM、MVC）框架。

Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构.

M ：即Model，模型，包括数据和一些基本操作
V ：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

只要我们Model发生了改变，View上自然就会表现出来。
当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yNayFd00-1592229882019)(images/image-20200423134455899.png)]

总结一下：MVVM的思想就是数据模型和视图的双向绑定，只要数据变化，视图会跟着变化，只要视图被修改，数据也会跟者变化。

2.VUE入门

2.1.Hello World程序

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

创建vue-demo.html,目录结构如下：

vue-demo
	node_modules
	package.json
	package-lock.json
	pages
		vue-demo.html

vue-demo.html

<script type="application/javascript" src="../node_modules/vue/dist/vue.js"></script>
---------------------------------------------------
<body>
    <div id="app">
        <!--        取data中的数据-->
        {{ message }}
    </div>
</body>
---------------------------------------------------
<script type="application/javascript">
    var app = new Vue({
        //使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

Hello Vue!

2.2.VUE的el挂载

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用。

2.3.VUE的数据“data”

<body>
    <div id="app">
        <!--        取data中的数据-->
        {{ message }}
        <hr/>
        {{ user }}
        <hr/>
        {{ user.username }}	//取对象中的数据
    </div>
</body>
<script type="application/javascript">
    var app = new Vue({
        //使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据
        data: {
            message: 'Hello Vue!',	//普通数据
            user:{	//对象数据
                username:"zs",
                age:11
            }
        }
    })
</script>

注意：{{}}取值不能脱离VUE绑定的元素。

2.4.VUE的方法

所有的方法都在methods属性中定义，方法的调用可以通过在VUE绑定的页面元素中使用{{方法名()}} 的方式，也可以在js中通过VUE对象调用.

<body>
    <div id="app">
        <!--        取data中的数据-->
        取普通值：{{ message }}
        <hr/>
        取对象值：{{ user }}
        <hr/>
        取对象中的属性：{{ user.username }}
        <hr/>
        调用方法：{{showUser('参数')}}
    </div>
</body>
<script type="application/javascript">
    var app = new Vue({
        //使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据 ，所有的数据都在这里绑定
        data: {
            message: 'Hello Vue!',
            user:{
                username:"zs",
                age:11
            }
        },
        //vue的方法，所有的方法都在这里定义
        methods:{
            showUser(args){
                //这里的 this 代表 Vue对象
                console.log(this.user.username);
                console.log(this.user.age);
                console.log(args);
            }
        }
    })

    //调用vue方法
    app.showUser('我也是参数');
</script>

3.VUE的表达式

3.1.表达式语法

VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

3.2.简单表达式

在{{ }}中可以进行简单的运算.

<div id="app">
	<!--简单表达式  -->
	<h1>{{num1+num2}}</h1>
	<!-- +:运算，字符串连接 -->
	<h1>{{5+"v5"}}</h1>
	<h1>{{5+"5"}}</h1>
	<!-- -：减法 -->
	<h1>{{"5"-"5"}}</h1>
	<h1>{{5*5}}</h1>
	<!-- *:乘 -->
	<h1>{{"5"*"5"}}</h1>
	<!-- / 除-->
	<h1>{{5/5}}</h1>
	<h1>{{5/5}}</h1>
 </div>
---------------------------------------------------------------------------------------------------
var app = new Vue({
  //挂载到id=app元素上
  	el:"#app",
	num1: 10,
	num2: 20
});

3.3.三目运算符

在{{}}中的表达式可以使用data中数据，可以使用三元运算符,但是不能够使用其他语句

<div id="app">
	<!--三目运算  -->
	{{ show1?"真":"假"}}
</div>

var app = new Vue({
	el : "#app",
	data : {
		show1 : true
	}
});

3.4.字符串操作

直接使用字符串字面值作为字符串对象
使用data中的字符串对象

<div id="app">
    {{"这是字面值"}}<br/>
    {{"这是字面值".length}}<br/>
    {{message.length}}<br/>
    {{message.substring(1,5)}}<br/>
    {{message.substring(2,6).toUpperCase()}}<br/>
</div>


var app = new Vue({
	el: "#app",
	data: {
		message: "这是data中的数据"
	}
});

3.5.对象操作

在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

<div id="app">
    {{user}}<br/>
    {{JSON.stringify(user)}}<br/>
    {{user.toString()}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.getAge()}}<br/>
</div>

var user = {
	name: "张三",
	age: 29,
	getAge: function () {
		return this.age
	},
	toString:function(){
		return "姓名:"+this.name+",年龄:"+this.age;
	}
};
var app = new Vue({
	el: "#app",
	data: {
		user: user
	}
});

3.6.数组操作

在表达式中可以使用JavaScript数组中的任何语法来操作数组.

<div id="app">
    {{hobbys}}<br/>
    {{hobbys[0]}}<br/>
    {{hobbys.length}}<br/>
    {{hobbys.toString()}}<br/>
    {{hobbys.join("------")}}<br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
	}
});

4.VUE的指令

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

Ø 作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Ø 一个标签元素上可以出现多个指令属性

Ø 指令只能够出现在Vue对象所挂载的标签范围内的标签中

常用指令如下：

v-model=“表达式” 数据双向绑定
v-text=“表达式”  设置标签中的文本
v-html=“表达式”  设置标签中的html
v-if(else else if)=“表达式”    判断条件	
v-for=“表达式”   循环
v-on=“表达式”    注册事件

4.1.v-text

语法

<标签 v-text="textValue"></标签>

<div id="app">
    <span v-text="message"></span><br/>
    <span v-text="user.username"></span><br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		message: "<h1>这是一个Span!</h1>",
		user: {
			username: "lw"
		},
	}
});

给元素填充纯文本内容

4.2.v-html

通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

语法

<标签 v-html="htmlValue"></标签>

<div id="app">
    <div v-html="message"></div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		message: "<h1>这是HTMl代码</h1>"
	}
});

和v-text的区别是v-html会把内容的html符号进行渲染

4.3.v-for

v-for可以作用于：数字，字符串，数组，对象

语法一：普通用法

<标签 v-for="每一个元素 in 数据源">{{每一个元素}}</标签>

语法二：带索引

<标签 v-for="(元素,索引|键) in 数据源">{{元素}}=={{索引}}</标签>

语法三：键，值，索引

<标签 v-for="(元素,键,索引) in 对象"></标签>

<div id="app">
    <h1>循环数组</h1>
    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
        <li v-for="value in student">{{value}}</li>
    </ul>

    <h1>带索引循环数组</h1>
    <ul>
        <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
    </ul>
    <h1>带键遍历对象</h1>
    <ul>
        <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
    </ul>
</div>

var app = new Vue({
	el: "#app",
	data: {
		hobbys : ["爬山","游泳","打豆豆","睡觉"],
		student : {
			name: "小毛",
			age: 29,
			sex: "男",
		},
		num : 10,
		str : "itsource",
	}
});

学生列表案例

<div id="app">
	<table >
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
		</tr>
		<tr v-for="student in students">
			<td>{{student.id}}</td>
			<td>{{student.name}}</td>
			<td>{{student.age}}</td>
			<td>{{student.sex}}</td>
		</tr>
	</table>
</div>

var app = new Vue({
	el: "#app",
	data: {
		students: [
			{id:1,name: "刘备", age: 29, sex: "男"},
			{id:2,name: "貂蝉", age: 30, sex: "女"},
			{id:3,name: "吕布", age: 31, sex: "男"}
		]
	}
});

4.4.v-bind

将data中的数据绑定到标签上,作为标签的属性.

语法一

<标签 v-bind:标签属性名字="表达式"></标签>

语法二：简写

<标签 :标签属性名字="表达式"></标签>

语法三：为一个标签绑定一个对象作为该标签的多个属性

<标签 v-bind="对象"></标签>

<div id="app">
    <img src="xxx.jpg" />
    
    <img v-bind:src="imgsrc" v-bind:title = "title"/>
    <img :src="imgsrc" :title = "title"/>
    <input v-bind="props"/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		imgsrc: "./img/1.jpg",
		title: "二哈!",
		props :{
			type: "text",
			name: "username",
		}
	}
});

4.5.v-model 指令(重点)

在表单控件上创建双向绑定,表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,

当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定

v-model只作用于以下表单: input select textarea

<标签 v-model="表达式"></标签>

<div id="app">
  <h1>绑定到type=text的input表单元素</h1>
  姓名:<input type="text" v-model="inputValue"><br/>
  data中的值:{{inputValue}}

  <h1>绑定到type=checkbox的input表单元素</h1>
  打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
  踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
  data中的值:{{checkboxValue}}


  <h1>绑定到type=radio的input表单元素</h1>
  打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
  踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
  data中的值:{{radioValue}}

  <h1>绑定到textarea的元素</h1>
  个人简介:<textarea v-model="textareaValue"></textarea><br/>
  data中的值:{{textareaValue}}


  <h1>绑定到单选的select的元素</h1>
  技能:<select v-model="skills">
        <option value="java">java</option>
        <option value="php">php</option>
        <option value=".net">.net</option>
      </select><br/>
  data中的值:{{skills}}

</div>

var app = new Vue({
	el: "#app",
	data: {
		inputValue: "初始化的值",
		checkboxValue: ["踢足球"],
		radioValue: "打篮球",
		textareaValue: "你是一个优秀的软件工程师!",
		skills: "java",
	}
});

4.6.v-show

根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。当v-show的值为假时, 会在标签的css中添加 display: none

 <标签名 v-show="表达式"></标签名>

4.7.v-if

语法一

<标签名 v-if="表达式"> ... </标签名>

<div id="app">
    <div v-if="show">你看到我了!</div>
    <div v-if="hidden">你看不到我了!</div>
    <div v-if="score>=90">优秀</div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		"show":true,
		"hidden":true,
		"score":90,
	}
});

语法二

 <标签名 v-if="表达式"></标签名>
 <标签名 v-else></标签名>

<div id="app">
    <div v-if="isVip">欢迎欢迎!!</div>
    <div v-else>滚动!!</div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		isVip: true
	}
});

语法三

<标签名 v-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else></标签名>

<div id="app">
    <div v-if="score>=90">优秀!!</div>
    <div v-else-if="score>=70">良好!!</div>
    <div v-else-if="score>=60">及格!!</div>
    <div v-else="score<60">不及格!!</div>
</div>

var app = new Vue({
	el: "#app",
	data: {
		score: 80
	}
});

4.8.v-on

使用v-on指令注册事件

<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
  简写方式
<标签 @事件句柄="表达式或者事件处理函数"></标签>

<div id="app">
  <h1>结果</h1>
    {{num}}
  <h1>表达式的写法</h1>
 <button v-on:click="num++">按钮</button><br/>
 <button @click="num++">按钮</button><br/>

 <h1>事件处理函数</h1>
 <button v-on:click="myclick">按钮</button><br/>
 <button @click="myclick">按钮</button><br/>
</div>

var app = new Vue({
	el: "#app",
	data: {
		num:0
	},
	methods:{
		myclick:function(){
			app.num++;
			console.log(this);
		}
	}
});

5.计算属性和watch

5.1.computed

有的时候我们需要在页面进行复杂的计算，复杂的计算导致页面很乱，Vue中提供了计算属性，来替代复杂的表达式：

<div id="app">
    <h1>您的生日是：{{birth}} </h1>
</div>
-----------------------------------------------------------------
var vm = new Vue({
    el:"#app",
    data:{
        birthday:1429032123201 // 毫秒值
    },
    computed:{
        birth(){// 计算属性本质是一个方法，但是必须返回结果
            const d = new Date(this.birthday);
            return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
        }
    }
})

5.2.watch

watch可以让我们监控一个值的变化。从而做出相应的反应。

<div id="app">
      <input type="text" v-model="message">
</div>
-------------------------------------------------------------
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"xxxx"
        },
        watch:{
            message(newVal, oldVal){	//监听 message 的变化，调用该函数。
                console.log(newVal, oldVal);
            }
        }
    })
</script>

6.组件component

6.1.什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 vue.js 特性进行了扩展的原生 HTML 元素。

简而言之，组件是用来完成特定功能的一个自定义的HTML标签，组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码. 封装重复利用

6.2.组件的分类

组件分为全局组件和局部组件

全局组件：在所有vue实例中(.在它所挂载元素下面有效)有效
局部组件：在自己vue实例中(.在它所挂载元素下面有效)有效

6.3.全局组件

全局组件可以在任何被挂着的标签中使用 , 全局组件的配置对象中必须包含template属性

定义全局组件语法

Vue.component("自定义标签的名字",{配置对象})

<div id="app">
  <mycomponent1></mycomponent1>
  <mycomponent2></mycomponent2>
</div>

<div id="app1">
  <mycomponent1></mycomponent1>
  <mycomponent2></mycomponent2>
</div>

-------------------------------------------------------------------------------

//定义第一个全局组件

Vue.component("mycomponent1",{
	template : "<h1>这是第一个全局组件</h1>"
})

 

//定义第二个全局组件

var component2Config = {
	template : "<h1>这是第二个全局组件</h1>"
};

Vue.component("mycomponent2",component2Config);

var app = new Vue({
	el: "#app",
	data: {
	}
});


var app1 = new Vue({
    el: "#app1",
    data: {
    }
});

注意事项：template中的html必须在一个标签中. 仅且只能有一个根节点，如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件

6.3.局部组件

局部组件只能够在所挂载的标签中使用

定义局部组件语法

var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部组件的名字1" : {组件的配置对象},
        "局部组件的名字2" : {组件的配置对象}
    }
  });

案例

<div id="app1">
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <mycomponent></mycomponent>
</div>


//1. 在id=app1挂载的实例的components中定义局部组件
var app1 = new Vue({
	el: "#app1",
	data: {},
	components : {
		"mycomponent" : {
			template : "<h1>这是一个局部组件</h1>"
		}
	}
});

//2. 在id=app2的标签中是不能够使用上面app2对象的局部组件.
var app2 = new Vue({	
	el: "#app2",
	data: {}
});

利用全局组件定义局部组件

<!--使用局部组件-->
<div id="#app">
	<innercomponent></innercomponent>
</div>
<!-- 使用全局组件 -->
<div id="#app1">
	<outercomponent></outercomponent>
</div>

-------------------------------------------
Vue.component("outercomponent",{
	tmeplate:"<h1>哈哈/h1>"
})
        
new Vue({
        
	el:"#app",
    components:{
        mycomponent:{
            innercomponent:outercomponent	//应用全局组件来定义局部组件
        }
    }    
})
new Vue({
        
	el:"#app1",
})

6.4.HTML模板定义组件

在JS定义组件，组件的HTML内容比较多的时候拼接起来比较麻烦，VUE支持把中的HTML片段作为模板来定义组件。

案例：可以使用定义模板，也可以使用

<div id="app">
	<!--使用组件-->
    <mycomponent></mycomponent>
</div>

<!--定义模板方式一：<template> -->
<template id="mytemplate1">
       <h1>template标签中的html</h1>
</template>

<!--定义模板方式二：<script>  -->
<script type="text/template" id="mytemplate2">
    <h1>template标签中的html</h1>
</script>

<script type="text/javascript">
    var app4 =  new Vue({
        el:"#app",
        components:{
            "mycomponent":{
                template:"#mytemplate2"	//引用模板定义组件
            }
        }
    });
</script>

6.6.组件获取数据

在使用组件的时候往往需要动态填充填充数据，VUE组件要动态获取数据并不是从VUE的Data中取，而是从template中的Data属性获取数据，并且data必须是一个函数，函数返回的数据必须是JSON

<body>
    <div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mytemplate">
            {{name}}:欢迎登陆        
    </template>
</body>
<script type="text/javascript">

   var mytabConfig = {
       template:"#mytemplate",
       data(){	//组件中的数据从这里找 ，data必须是一个函数，这里用了ES6语法
           return {"name1":"xxxx"}	//返回的数据必须是JSON
       }
   }
   //定义组件
   Vue.component("mycomponent",mytabConfig);
    
   var app = new Vue({
       el: "#app",
       data: {	//组件中的数据会不从这里找
       }

   });
</script>

上面是全局组件的写法，局部组件也是一样

var app = new Vue({
       el: "#app",
       data: {
       },
       components:{
            mycomponent:{
                template:"#mytemplate",
                data(){		//局部组件的数据
                    return {"name1":"xxxx"}	//返回的数据必须是JSON
                }
            }
        }

});

7.路由router

文档地址：https://router.vuejs.org/zh/

7.1.什么是路由

路由是负责将进入的浏览器请求映射到特定的组件代码中(html)。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。

7.2.安装vue-router

我们可以采用两种方式来安装vue-router，一是使用CDN 的方式直接引入JS库 https://unpkg.com/vue-router/dist/vue-router.js 而是通过Npm安装。

npm install vue-router

然后在页面导入router的js库

<script type="application/javascript" src="../node_modules/vue-router/dist/vue-router.js"></script>

7.3.vue-router案例

模拟导航菜单，点击菜单切换不同的视图，需要考虑如下几个因素

1.定义导航：一个导航绑定URL

2.定义组件：一个URL对应一个组件

3.映射路由：建立URL和组件的关系

4.渲染路由：组件渲染的位置

<div id="app">
	<!-- 使用 router-link 组件来导航. -->
	<!-- 通过传入 `to` 属性指定链接. -->
	<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	<!-- 使用app中的路由：匹配到product路由地址，然后在router-view标签中展示这个地址对应的资源 -->
	<router-link to="/index">首页</router-link>
    <router-link to="/product">公司产品</router-link>
	<router-link to="/about">关于我们</router-link>
	<hr />
	<!-- 路由出口 -->
	<!-- 路由匹配到的组件将渲染在这里 -->
	<router-view></router-view>
</div>

<script>


//>>1.定义首页:组件
var index = Vue.component("index", {
    template : "<h1>首页</h1>"
});
//>>2.公司产品：组件
var product = Vue.component("product", {
    template : "<h1>公司产品</h1>"
});
//>>3.关于我们：组件
var about = Vue.component("about", {
    template : "<h1>关于我们</h1>"
});

//>>4.创建一个路由：
var router = new VueRouter({
    routes : [ {
        path : "/",//路由地址
        component : index
        //路由对应的资源
    }, {
        path : "/about",//路由地址
        component : about
        //路由对应的资源
    }, {
        path : "/product",
        component : product
    }, ]
});

//创建一个vue对象
var app = new Vue({
    el : "#app",//挂载在app上
    router : router
//使用路由对象
});	
</script>

五.VUE的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。主要方法有：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，Destroyed。还有两个不常用的actived，deactivated。

注意：这里我们重点掌握两个常用的方法即可：create和mounted

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-94elDCBU-1592229882021)(images/image-20200423205426518.png)]

1.生命周期方法

1.1.beforeCreate

在实例初始化之后，在数据观测（data observer）和event/watcher事件配置之前被调用，此时data和$el都没有初始化，全部为undefined。
可以在此时加一些loading效果，然后在created移除，可以用在进入请求时间较长的页面，给用户提示，提高用户体验。

1.2.created

在实例创建完成后立即被调用，在这一步，实例已完成以下配置：数据观测（data observer），属性和方法的运算，watch/event事件回调，然而挂载阶段还没开始，$el属性目前不可见。

1.3.beforeMount

在挂载开始之前被调用：相关的render函数首次被调用。此时，data和$el都已经存在，但是DOM为虚拟DOM，仍然没有被加载完。

1.4.mounted

el被新创建的vm. $e l 所替换，并挂载到实例上去调用该钩子。这时候可以执行异步请求，请求数据初始化页面。此时 d a t a 和$ el都已经存在，DOM也已经加载完成，完成挂载。

1.5.beforeUpdate

当data中的数据发生改变时，在变化的数据重新渲染视图之前触发。

1.6.updated

检测到数据发生变化时，变化的数据重新渲染视图之后触发。

1.7.beforeDestroy

实例销毁之前调用，此时实例仍然可用。

1.8.destroyed

实例销毁之后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器都被移除，所有的子实例也会被销毁。

1.9.activated

keep-alive 组件激活时调用

1.10.deactivated

keep-alive 组件停用时调用

2.create和mounted

created代表在vue实例创建后；我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

<div id="app">
      {{hello}}
</div>
-------------------------------------------
 var vm = new Vue({
      el:"#app",
      data:{
          hello: '' // hello初始化为空
      },
      created(){
          this.hello = "hello, world！ 我出生了！";
      },
  	 mounted(){
          "vue初始化完成，可以在这里发送AJAX请求加载页面需要的相关数据";
      }
  })

六.Webpack打包

1.概述

1.1.为什么要打包

将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
将代码打包的同时进行混淆，提高代码的安全性。

1.2.什么是webpack

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wfqR5XVR-1592229882022)(images/image-20200423213604311.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f0LmfhSF-1592229882022)(images/4218193775-5caaf14b838a5_articlex.png)]

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

2.安装webpack

2.1.本地安装

 npm install webpack --save-dev	//服务
	
 npm install webpack-cli --save-dev	//客户端

2.2.全局安装

推荐使用后面要用

npm install -g webpack 

npm install -g webpack-cli

3.执行打包

3.1.准备工作

准备JS : util.js

export const util = {
    sum(a , b){
        return a + b;
    }
}

main.js

import {util} from "./util";
let sum = util.sum(1,2);
alert(sum);

main.html

        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<!--模块导入-->
<script type="application/javascript" src="../dist/bundle.js" ></script>
<body>

</body>
</html>

3.2.执行打包

把 main.js 及其依赖的js打包成 dist/bundle.js

webpack ./pages/main.js -o dist/bundle.js

4.webpack打包配置

上面我们每次在打包的时候，都要输入 webpack src/a.js -o dist/bundle.js 这个命令，比较麻烦，webpack提供了一个webpack.config.js可以对打包信息进行统一配置,到时候打包的时候，只需要运行webpack 命令就可以进行打包。

4.1.创建 webpack.config.js

//导入路径模块，这个是内置的模块
var path = require("path");

module.exports = {
    entry: './src/main.js',	//入口js
    output: {	//输出位置
        path: path.resolve(__dirname, './dist'),	//打包后的文件输出路径
        filename: 'bundle.js'	//打包后的js
    }
}

4.2.执行打包

运行下面命令，自动根据webpack.config.js配置来打包

webpack

5.打包css

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用。

vue-loader 转换vue组件 *.vue
css-loader 加载css文件
babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

如果要打包css需要安装两个loader

style-loader : 将模块导出为样式，添加到DOM中 - 使用的时候加载样式
css-loader : 解析css，使用import加载，返回css代码 - 带包的时候的加载css

5.1.安装loader

npm install style-loader --save-dev
npm install css-loader --save-dev

5.2.编写css文件

css/main.css

.color-red{
    color:red;
}

5.3.导入main.css

修改main.js , 把css导入到main.js中

//引入css
require('../css/main.css');

import {util} from "./util";
let sum = util.sum(1,2);
//alert(sum);

5.4.页面导入

导入main.js,该JS种已经导入了main.css,下面直接使用main.css中的样式

<!--模块导入-->
<script type="application/javascript" src="../dist/bundle.js" ></script>
<body>
<!--    测试css打包-->
    <div class="color-red">有点红</div>

</body>

5.5.css的打包配置

在webpack.config.js文件引入下面代码

//导入路径模块，这个是内置的模块
var path = require("path");

module.exports = {
    entry: './pages/main.js',	//入口js
    output: {	//输出位置
        path: path.resolve(__dirname, './dist'),	//打包后的文件输出路径
        filename: 'bundle.js'	//打包后的js
    },
    module: {
        rules: [
            {
                test: /\.css$/,     //匹配文件规则
                use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            },
        ]
    }
}

5.6.执行打包

webpack

6.webpack服务

刚才的案例中,我们都是本地运行。webpack给我们提供了一个插件，可以帮我们运行一个web服务,并且提供了热部署功能。

6.1.安装插件

npm install webpack-dev-server --save-dev

6.2.配置脚本

在package.json中配置script

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
}
 
--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1

6.3.启动

npm run dev/test

运行可能会出错，兼容问题，需要修改一下版本

6.4.修改版本

"devDependencies": {
  "css-loader": "^3.1.0",
  "style-loader": "^0.23.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.9.7"
},

然后安装该版本的webpack

npm install

再启动

npm run dev

访问：http://localhost:8080/

七.VUE-CLI脚手架

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli使用它能快速的构建一个web工程模板。

官网：https://github.com/vuejs/vue-cli

1.安装VUE-CLI

1.1.安装Vue-cli

搭建静态web工程,安装Vue-cli

npm install -g vue-cli

1.2.创建项目结构

vue-cli快速创建webpack项

vue init webpack

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hk2S9PdG-1592229882023)(images/image-20200426155334638.png)]

下面的输入no,然后回车：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NM1N0UH4-1592229882023)(images/image-20200426155445507.png)]

启动项目

npm run dev

2.项目结构

2.1.package.json

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7gkE0nF-1592229882024)(images/image-20200426155917731.png)]

2.2.webpack.dev.conf.js

这个js在package.json的scripts中引入，是用来对webpack打包的配置js,其中导入了 webpack.base.conf.js 他是webpack的基础js。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vi13v0E-1592229882024)(images/image-20200426160549365.png)]

2.3.main.js

main.js作为程序的主要JS，该js中的配置在整个项目中都适用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tKALNcxJ-1592229882024)(images/image-20200426160816874.png)]

main.js如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7cGtJqxo-1592229882025)(images/image-20200426161100500.png)]

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', //元素绑定 ，对应了 App.vue中的 <div id="app"/>
  router, //路由，对应了 import router from './router'
  components: { App },  //定义组件 ，对应了 import App from './App' 其实引入了App.vue
  template: '<App/>'  //默认使用的组件，会把这个组件展示到页面上
})

2.4.app.vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NwShq20t-1592229882025)(images/image-20200426161155004.png)]

这个页面是程序的主页面，所有的其他子页面都将会挂载到这个下面，router-view是组件渲染的位置。

2.5.router/index.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YOnGKOsT-1592229882026)(images/image-20200426161240580.png)]

这里导入了 HelloWorld.vue 页面，我们访问 8080 看到的页面就是这个页面。

2.6.总结一下

main.Js ：程序的主js
app.vue:程序的vue主页面，其他所有的页面都挂载这个主页面之下
router/iundex.js :路由，程序的url导航

wild horses

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE

VUE一.ES6语法VUE基于是ES6的，所以在使用Vue之前我们需要先了解一下ES6的语法。1.什么是ECMAScriptECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。为什么会出现这个规范呢？1.1.JS发展史1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。1997年，为了统一各种不同script脚本语言，ECMA
复制链接

扫一扫