前端开发(HTML,CSS,VUE,JS)从入门到精通！第七天(Vue)(二)

八、Vue 样式绑定

1．class 和 style 都是 HTML 元素的属性，用于设置元素的样式，我们可以使用 v-bind 来设置样式属性，v-bind 在处理 class 和 style 时，进行了增强，表达式除了可以使用字符串之外，还可以使用对象和数组。

（1）v-bind:class 设置一个 Vue 属性，从而可以动态的切换 class

示例：

<!DOCTYPE html>

<head>

<style>

.cls{

width: 200px;

height: 200px;

background-color: blue;

}

</style>

</head>

<body>

<!--v-model 进行双向数据绑定，选中 checkbox 的时候，绑定的 use 值为 true，不选中时 use 的值为 false，这样双向数据绑定之后，

input的变化就会引起 Vue 属性 use 的变化，反过来也是一样的，属性的变化也会引起 input 的变化-->

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

use: false

}

})

</script>

</body>

</html>

当然，我们也可以一次性添加多个属性来动态切换 class，例如：

<!DOCTYPE html>

<head>

<style>

.active{

width: 200px;

height: 200px;

background-color: blue;

}

.text-waring{

color: red;

}

</style>

</head>

<body>

<!--v-model 进行双向数据绑定，选中 checkbox 的时候，绑定的 use 值为 true，不选中时 use 的值为 false，这样双向数据绑定之后，

input的变化就会引起 Vue 属性 use 的变化，反过来也是一样的，属性的变化也会引起 input 的变化-->

<input type="checkbox" v-model="flag1">点我

<input type="checkbox" v-model="flag2">点我

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

flag1: false,

flag2: false

}

})

</script>

</body>

</html>

我们还可以绑定一个对象，例如：

<!DOCTYPE html>

<head>

<style>

.active{

width: 200px;

height: 200px;

background-color: blue;

}

.text-waring{

color: red;

}

</style>

</head>

<body>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

classObject:{

'active': true,

'text-waring': true

}

})

</script>

</body>

</html>

我们还可以把一个数组传给 v-bind:class，例如：

<!DOCTYPE html>

<head>

<style>

.active{

width: 200px;

height: 200px;

background-color: blue;

}

.text-waring{

color: red;

}

</style>

</head>

<body>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

activeClass:'active',

waringClass:'text-waring'

}

})

</script>

</body>

</html>

（2）我们还可以使用 v-bind:style 直接设置样式

示例：

<!DOCTYPE html>

<head>

</head>

<body>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

textColor:'blue',

fontSize:'30px'

}

})

</script>

</body>

</html>

我们还可以将样式直接绑定一个对象，让模板更清晰，例如：

<!DOCTYPE html>

<head>

</head>

<body>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

动态绑定 style 样式，此时的样式名和 DOM 中的样式名一致：即一个单词全部小写，两个单词以上第一个单词首字母小写，

第二个单词首字母大写

styleObject:{

color:'#fff',

fontSize:'30px',

width:'200px',

height:'200px',

backgroundColor:'blue'

}

})

</script>

</body>

</html>

当然，我们也可以使用数组将多个样式应用在一个元素上，例如：

<!DOCTYPE html>

<head>

</head>

<body>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

动态绑定 style 样式，此时的样式名和 DOM 中的样式名一致：即一个单词全部小写，两个单词以上第一个单词首字母小写，

第二个单词首字母大写

styleObject1:{

color:'#fff',

fontSize:'30px',

width:'200px',

height:'200px',

backgroundColor:'blue'

styleObject2:{

border:'2px solid #ccc',

borderRadius:'20px' //驼峰命名法，对应 border-radius

}

})

</script>

</body>

</html>

九、事件处理

1．Vue 的事件处理通过 v-on 指令来监听事件

示例：

<!DOCTYPE html>

<head>

</head>

<body>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

methods: {

show: function (e) {//这里的参数 e 和 DOM 事件中的事件对象(Event)一致

console.log("您好" + this.name);//this 指的是当前的 Vue 对象,this.name 指上面定义的 Vue 的属性

console.log(e.clientX + ":" + e.clientY);

}

});

</script>

</body>

</html>

除了直接绑定一个方法之外，还可以使用内联的 JavaScript 语句：

<!DOCTYPE html>

<head>

</head>

<body>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

methods: {

show: function (msg) {//事件函数

alert(msg);

}

});

</script>

</body>

</html>

2．事件的修饰符

（1）v-on 提供了事件修饰符来处理 DOM 事件的细节，比如 event.preventDefault() 或event.stopPropagation()，在 Vue 中都可以使用事件修饰符来完成，Vue 通过"."操作符指定事件修饰符来完成事件的修饰，事件修饰符有：

① .stop：阻止冒泡

② .prevent：阻止事件的默认行为

③ .capture：阻止捕获

④ .self：只监听触发该元素的事件

⑤ .once：只触发一次

⑥ .left：鼠标左键事件

⑦ .right：鼠标右键事件

⑧ .middle：鼠标中间滚轮事件

示例：

<!DOCTYPE html>

<head>

</head>

<body>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

methods: {

show1: function () {//事件函数

console.log("父元素被点击");

show2: function () {//事件函数

console.log("子元素被点击");

show3: function () {//事件函数

console.log("孙子元素被点击");

}

});

</script>

</body>

</html>

示例2：

<form @submit.prevent="submit">：阻止表单提交

<a @click.stop.prevent="doThis">：事件修饰符串联，阻止冒泡并阻止默认行为

<form v-on:submit.prevent>：只有修饰符

<div v-on:click.capture="doThis">：阻止捕获

<div v-on:click.self="doThat">：在当前元素本身（而不是子元素）触发时触发

<a v-on:click.once="doThis">：只触发一次

2．按键修饰符

（1）可以给按键事件添加修饰符，例如：<input v-on:keyup.13="submit">：当按键值是 13 的时候调用 submit方法，记住按键的 keyCode 比较困难，Vue 提供了常用的按键的别名：

① .enter：回车键

② .tab：制表符键

③ .delete：包含 del 键和 backspace 键

④ .esc：ESC键

⑤ .space：空格键

⑥ .up：向上键

⑦ .down：向下键

⑧ .left：向左键

⑨ .right：向右键

⑩ .ctrl：Ctrl键

⑪ .alt：Alt键

⑫ .shift：Shift键

⑬ .meta：Meta键

例如：<input @keyup.enter="submit">：当回车键松开的时候触发事件函数submit。

十、表单

1．Vue 的表单可以使用 v-model 指令在表单元素上进行双向数据绑定

示例：

<!DOCTYPE html>

<head>

</head>

<body>

<!--当 v-model 指定的元素的值发生变化的时候，会引起 Vue 实例的 msg 属性值同步变化，反过来，通过 Vue 实例改变 msg 属性值的时候，

v-model 中的 msg 也会同步变化，这个会引起 input 的 value 进行更新，同时，表达式 {{msg}} 的值也会同步变化，我们将这个

过程称为双向数据绑定(MVVM)-->

ViewModel/VM：<input type="text" v-model="msg"> <br>

View/V：视图：{{msg}}

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

msg: ""//Model/M：数据

}

});

</script>

</body>

</html>

(1) 对于复选框，如果是一个复选框，则绑定一个逻辑值(true或false)，如果是多个复选框，则绑定到一个数组，例如：

<!DOCTYPE html>

<head>

</head>

<body>

<h3>单个复选框</h3>

<input type="checkbox" v-model="checked"> 单个复选框 <br>

<p>单个复选框：{{checked}}</p>

<hr>

<h3>多个复选框</h3>

<input type="checkbox" value="Baidu" v-model="names"> 百度

<input type="checkbox" value="Google" v-model="names"> 谷歌

<input type="checkbox" value="Huwwei" v-model="names"> 华为

<p>多个复选框：{{names}}</p>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

checked: false, //单个复选框绑定的是一个逻辑值

names: [] //多个复选框需要绑定到一个数组

}

});

</script>

</body>

</html>

(2) select 列表的双向数据绑定：

<!DOCTYPE html>

<head>

</head>

<body>

</select>

<br>

<p>您的选择是：{{site}}</p>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

site:'www.huawei.com'

}

});

</script>

</body>

</html>

绑定是 option 的 value 值。

(3) 单选按钮双向数据绑定

<!DOCTYPE html>

<head>

</head>

<body>

<input type="radio" value="boy" v-model="sex"> 男

<input type="radio" value="girl" v-model="sex"> 女

<br>

<p>您的选择是：{{sex}}</p>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性，由于 Vue 属于响应式框架，一旦这里的属性发生变化，界面上面的 Vue 的表达式页面跟着变

sex:''

}

});

</script>

</body>

</html>

radio 也是绑定的 value 值。

2．表单元素的修饰符

（1）.lazy：默认情况下，v-model 绑定的表单元素会在 input 事件中同步输入框的值与属性数据，但是可以加上修饰符 .lazy，从而转为 change 事件（当表单元素失去焦点的时候才同步）。

（2）.trim：自动过滤掉用户输入的首尾的空格，例如：

（3）.number：自动转换为数字

十一、Vue 的组件

1．组件（component）是 Vue 强大功能之一，组件可以扩展HTML 元素，封装可用的代码，组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象成一颗组件树。

2．注册全局组件

（1）语法：

全局组件可以在任意多个 Vue 实例中使用

注册组件之后，就可以像使用普通的 HTML 标签一样使用组件，例如：

示例：创建一个全局组件，并使用

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</div>

/**

* 注册全局组件，第一个参数是组件的名称，第二个参数是选项，全局组件可以在任何一个 Vue 实例中使用

Vue.component("usercomp",{

//template 表示组件的模板，也就是该组件要展示的 HTML 内容，注意，如果模板中包含多条 HTML 语句，需要使用 div 包裹起来

});

//调用 Vue 的构造函数，产生一个 Vue 对象 app

var app = new Vue({

//el 定义 Vue 的挂载点，挂载到 #app 上，那么整个 #app 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#app"

});

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm"

});

</script>

</body>

</html>

3．我们也可以定义局部组件，局部组件只能在当前的 Vue 实例中使用

示例：

<!DOCTYPE html>

<head>

</head>

<body>

</div>

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

components: {//局部组件，仅限于当前 Vue 实例能使用，可以定义多个这样的局部组件

//局部组件名

"localcomp":{//选项

template:"<div><h1>我是一个局部组件</h1></div>"

}

});

</script>

</body>

</html>

4．父组件向子组件传值，可以通过组件 props 选项来处理，父组件的数据需要通过属性的方式把数据传递给子组件，子组件需要显式的使用 props 选项来声明属性

示例：将父组件的属性值动态的传给子组件，父组件的属性值发生变化时，子组件对应的属性值跟着变化

<!DOCTYPE html>

<head>

</head>

<body>

<!--父组件是通过属性的方式将值传给子组件，我们这里用了动态属性绑定，将 message 属性的值绑定到了父组件的属性 parentMsg，当

parentMsg 发生变化时，子组件的对应属性值message也会跟着变化-->

</div>

/**

* 注册全局组件，第一个参数是组件的名称，第二个参数是选项，全局组件可以在任何一个 Vue 实例中使用

Vue.component("usercomp",{

/**

* 子组件是通过 props 选项来接收父组件传递过来的属性值，这个属性名是写在一个数组里面，例如：["message"]，可以

* 有多个这样的属性值，这个属性传到子组件之后就作为子组件 Vue 实例的属性，可以用表达式输出 {{message}}

props:["message"],

//template 表示组件的模板，也就是该组件要展示的 HTML 内容，注意，如果模板中包含多条 HTML 语句，需要使用 div 包裹起来

});

//调用 Vue 的构造函数，产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点，挂载到 #vm 上，那么整个 #vm 包括其后辈元素都被 Vue 管理起来，就可以使用 Vue 了

el:"#vm",

data: {

parentMsg: ''

}

});

</script>

</body>

</html>

十二、补充 ES6 语法

1. ES6 模块

（1）export 命令

① 模块功能主要由两个命令构成：export 和 import，export 用于规定模块对外接口，import 命令用于输入其他模块提供的功能

② 一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量，如下：

//profile.js:

export var firstName="Michael";

export var lastName="Jackson";

export var year = 1958;

export 的写法，除了像上面这样，还有另外一种写法：

//profile.js:

var firstName="Michael";

var lastName=""Jackson";

var year = 1958;

export{ firstName, lastName, year};

应该优先考虑这种写法，因为这样就可以在脚本的尾部，一眼就看清楚输出了哪些变量

③ export 除了可以输出变量之外，还可以输出函数或类

export function multiply(x,y){

return x*y;

}

通常情况下，export 输出的变量就是本来的名字，但是可以使用关键字as重命名

function v1(){...}

function v2(){...}

export {

v1 as streamV1,

v2 as streamV2

}

（2）import 命令

① 使用 export 命令定义了模块对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块

//main.js

import {firstName,lastName,year} from "./profile.js";

function setName(ele){

ele.textContent = firstName+"."+lastName;

}

② 如果想为输入的变量重新取一个名字，import 命令要使用 as 关键字，将输入的变量重命名

import {lastName as surName} from './profile.js';

③ import 命令输入的变量都是只读的，因为它本质是输入接口，也就是说，不允许在加载模块的脚本里面，修改接口：

import {a} from './xxx.js';

a = {};//错误

但是，如果a是一个对象，改写a的属性是可以的：

import {a} from './xxx.js';

a.foo = 'hello';

④ 模块的整体加载

除了指定加载某个输出，还可以使用整体加载，即用星号（*）指定一个对象，所有的输出值都加载在这个对象上。

//circle.js

export function area(r){

return Math.PI*r*r;

}

export function cirumference(r){

return 2*Math.PI*r;

}

现在加载这个模块

import {area,cirumference} from './circle';

console.log('圆面积：'+area(4));

console.log('圆周长：'+cirumference(4));

上面的写法是逐一加载的方法，整体加载的方法如下：

import * as circle from './circle';

console.log('圆面积：'+circle .area(4));

console.log('圆周长：'+circle .cirumference(4));

（3）export default 命令

① 从前面的例子我们可以看出，使用 import 命令的时候，用户需要知道加载的变量的名和函数名，否则无法加载，但是，由于我们希望快速上手，未必愿意阅读文档，去了解有哪些属性和方法，为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到 export default 命令，为模块指定默认输出。

//export-default.js

export default function(){

console.log("foo");

}

export default { //导出一个JSON对象

}

上面的代码是一个模块文件 export-default.js，它的默认输出是一个函数，其他模块在加载该模块的时候，import 命令可以为该匿名函数指定名称：

//import-default.js

import customName from './export-default';

customName();//调用函数，输出foo

② export default 命令除了可以用在匿名函数前，也可以用在非匿名函数前。