Start

在JavaScript中声明app

​ el代表元素,绑定到id为app之上

​ data可存放数据,其中前为声明后为赋值

1
2
3
4
5
6
7
8
var app = new Vue({
el:'#app',
data:{
name:'Sw',
age:'20',
sex:'nan'
}
});

在html中显示出js绑定的数据

使用 根据js的data中相应的赋予对应的值

1
2
3
<div id="app">
<span>你的名字是:{{name}}</span><br>
</div>

将值指向属性

将input元素输入的值实时响应

在input中使用 v-model=”属性名” 指向

1
2
3
4
5
6
   <div id="app">
<div>
<!-- v-model把当前属性指向值-->
<input type="text" v-model="name">
<span>你的名字是:{{name}}</span><br>
</div>

若没有值 隐藏元素

v-show=”属性” 当该属性没有值的时候将隐藏元素

v-if=”属性” 当属性没有值将删除本元素

1
<span v-show="sex">你的性别是:{{sex}}</span><br>

迭代器for

在data 定义集合后 使用v-for=”局部属性 in 定义的data”

在花括号中可以写一些简单的运算

集合添加 list.push()

1
2
3
<ul>
<li v-for="food in foodlist ">{{food}}</li>
</ul>

属性与变量

绑定数据和元素属性

v-bind:将变量绑定到值上

1
2
<a v-bind:href="url">link</a>
<img v-bind:src="src"/>

使用v-bind来控制class

{要添加的类: 在什么时候添加}

1
<p v-bind:class"{active: isActive}"></p>

isActive为true时 将active绑定到p的类上

使用 : class 与 v-bind:class 意义相同

v-model使用场景

实现一些效果的时务必给value属性赋值

  • input

    • radio单选框

      在使用v-model绑定单选框代替name,可以更清晰的选择默认值而不去使用传统的checked

    • checkbox多选框

      将v-model对应的data更改为空数组[ ],即可在选中的同时生成到数组里,也可在数组中存放值,也会将对应的checkbox打勾

  • textarea

    与input-text相同效果

  • select

    将v-model绑定到下拉框可实现默认选择项的效果,例如data中对应的是1则选择value相同的一项,如选择其他项,data中的值也会变更

事件与方法

绑定事件

在vue中绑定事件使用v-on即可

具体用法 v-on:事件名=”方法名”

1
2
3
<form v-on:submit="onSubmit">
<button v-on:click="onClick">clickMe</button>
</form>

方法定义在methods属性中

1
2
3
4
5
6
7
8
9
var app = new Vue({
el:'#app',
methods:{
onclick:function () {
alert('message');
}
}

});

给一个元素绑定多个事件

1
<button v-on="{mounseenter: onEnter,mouseleave: onOut}">clickMe</button>

注意:方法一定要存在,否则报错

传递事件对象

1.使用传递参数

1
2
3
 <form v-on:submit="onSubmit($event)"> 
<button v-on:click="onClick">clickMe</button>
</form>

2.使用vue封装的方法

1
2
3
 <form v-on:submit.prevent="onSubmit"> 
<button v-on:click="onClick">clickMe</button>
</form>
1
2
3
4
5
methods:{
onSubmit:function (e) {
e.preventDefault();
}
}

判断输入回车

1
 <input v-on:keyup.enter="onEnter" type="text"/>

v-model修饰符

惰性更新

不会及时更新,当鼠标失去input焦点时才更新值

用处:当用户输入完后表单验证

1
<input type="text" v-model.lazy="name">

去除前后空格

1
<input type="text" v-model.trim="name">

分情况使用,password为了准确性不要使用

为了数字

在一般情况下提交会自动提交字符串类型,使用.number会自动转换成数字类型,省去转换过程

1
<input type="text" v-model.number="price">

控制流与计算

条件判断

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<div v-if="role == 'admin' || role == 'superadmin' ">
管理员你好
</div>
<div v-else-if="role == 'hr' ">
待查看建立列表:
.....
</div>
<div v-else>
您没有权限访问
</div>
</div>

计算属性

由于一些程序中要有总分或平均分的需求,故使用compact

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var app = new Vue({
el: '#app',
data:
num1: 10,
num2: 20
},
compact: {
sum: function () {
return this.match + this.num1 + this.num2;
},
avarage:function () {
return Math.random(this.sum/2)
}
}

})

调用:

1
<h1>{{sum}}</h1>

Tips:为何不用methods?

因为如果使用方法调用都要重新计算,计算属性不需要。

Tips:使用计算属性时,最好使用前先学过的v-model.number先转换为数字,或在return时使用parseFloat以确保数字准确。

组件

全局组件

将经常使用的封装起来。

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue.component('alert',{
template:'<button @click="on_click">clickMe!</button>',
methods:{
on_click:funcation(){
alert('hi');
}
}
});

//指定component的域
new Vue({
el:'#app',
});

组件应该放到对应的域中

1
2
3
<div id="app">
<alert></alert>
</div>

局部组件

1
2
3
4
5
6
7
8
9
10
11
12
13
new Vue({
el: '#app',
comments: {
alert: {
template: '<button @click="on_click">clickMe!</button>',
methods: {
onclick: function () {
alert('hello')
}
}
}
}
});

声明组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Alert = {
template: '<button @click="on_click">clickMe!</button>',
methods: {
onclick: function () {
alert('hello')
}
}
}

new Vue({
el: '#app',
comments: {
alert:Alert;
}
});

组件每用一次都会新实例化出一个对象

组件data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Vue.component('alert',{
template:'<button @click="on_click">clickMe!{{like_count}}</button>',
data:funcation(){
return{
like_count:10,
liked:false,
}
},
methods:{
on_click:funcation(){
if(!this.liked){
this.like_count++;
else
this.like_count--;

this.liked = !this.liked;
}
}
}
});


分离template

1
2
3
<template id="like-component">
<button @click="on_click">clickMe!{{like_count}}</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Vue.component('alert',{
template:'#like-componet',
data:funcation(){
return{
like_count:10,
liked:false,
}
},
methods:{
on_click:funcation(){
if(!this.liked){
this.like_count++;
else
this.like_count--;

this.liked = !this.liked;
}
}
}
});

特别感谢:表严肃