vue使用

目录

安装

创建实例

数据绑定

事件处理

计算属性

侦听器

绑定样式

条件渲染

列表渲染

---

安装

项目中如何安装vue，推荐第一种方法

1.使用cdn

使用最新版本

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

使用指定版本

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

生产环境替换成min压缩的版本

 

2 npm

npm install vue

 

3.vue cli

 

创建实例

1.首先的初始化vue对象我们才能调用vue里的强大功能，在我们的js文件中使用如下的方法new一个vue对象

var vm = new Vue({

el:'#app',

data:{

name:''

}

})

 

使用 new Vue创建vue实例，实例里面包含

el：渲染的dom的id

data：属性字段

methods：方法

created：实例创建以后的钩子函数

computed：计算属性

watch：侦听器

template：组建模板

 

数据绑定

vue的一个基础的功能就是数据绑定，即将html页面中如一个<input>的val值绑定为一个vue对象中的字段，这样我们就可以通过修改vue的字段来动态修改input的val值了。

vue中可以使用{{}}和v-model做数据绑定

{{msg}}

<input v-model="msg" />

当修改msg值时，dom里面渲染的msg值也会改变，vue的数据绑定是响应式的。

如果不希望msg值改变时页面渲染的数据发生改变，可以使用v-once

<p v-once>{{msg}}</p>

 

使用v-html可以渲染html元素

<p v-html="htmlval"></p>

 

data: {

msg: 'test123',

htmlval:'<p style="color:red;">html string 123</p>'

}

渲染html建议使用组件，直接的html渲染容易出现xss

 

绑定dom元素的属性可以使用v-bind （缩写为 : ）

<p v-bind:id="id" v-bind:title="title">v-bind id</p>

<p :id="id" :title="title">v-bind id</p>

除了写死的的指定属性，还可以使用动态属性的绑定

<p v-bind:[patrr]="title">v-bind dynamic atrr</p>

data: {

title: 'this is title',

patrr:'title'

}

 

事件处理

事件处理也是vue中的一个基本功能，我们可以将一个按钮的click事件绑定到vue对象中的一个方法如下

使用v-on绑定事件，v-on缩写为@:

<button v-on:click.prevent="add">add</button>

<button @:click.prevent="add">add</button>

 

methods: {

add: function (name) {

this.msg += name;

}

}

 

v-on绑定事件可以添加如下的事件修饰符

prevent：阻止默认事件

<form v-on:submit.prevent="add" action="Privacy">

<input type="submit" value="submit" />

</form>

上面将阻止form的默认提交action和页面的刷新动作，只执行add方法

 

stop：阻止事件继续传播

<div v-on:click="add('div1')" style="border:1px solid red;height:100px;width:100px;">

<div v-on:click.stop="add('div2')" style="border:1px solid blue;height:30px;width:30px;"></div>

</div>

上面点击div2时，将不会向上传播触发div1的click事件

 

self：只有当前元素才能触发事件，而不是内部传播的触发的事件

<div v-on:click.self="add('div1')" style="border:1px solid red;height:100px;width:100px;">

<div v-on:click="add('div2')" style="border:1px solid blue;height:30px;width:30px;"></div>

</div>

上面点击div2后，传播触发div1的click事件时将判断是不是div1自身触发的，不是则不触发

 

once：只触发一次事件

<div v-on:click.once="add('div1')" >

 

capture：内部传播的事件，先处理自身的事件，然后才处理内部的事件（正常会先处理内部的事件，才向上传播触发父级元素的事件）

<div v-on:click.capture="add('div1')" style="border:1px solid red;height:100px;width:100px;">

<div v-on:click="add('div2')" style="border:1px solid blue;height:30px;width:30px;"></div>

</div>

当点击div2时，将首先触发div1的click事件，让后再触发div2的click事件

 

passive：相对于prevent，不是不禁止默认事件，和prevent一起使用时prevent将不起作用

 

v-on添加键盘修饰符

<input v-on:keyup.delete="keymethod"/>

 

enter：回车键

tab

delete：删除/退格键

esc

space：空格键

up

down

left

right

 

v-on添加系统修饰符

同时按下alt+c键触发

<input v-on:keyup.alt.c="keymethod"/>

 

ctrl

alt

shift

meta：windows系统的windows键，mac体统的command键

exact：精确指定由那些按键触发事件（多个或少个键都不会触发）

<input v-on:keyup.alt.enter.exact="keymethod"/>

上面只能同时按下alt+enter键才触发事件

 

v-on添加鼠标按钮修饰符

<input v-on:click.right="keymethod"/>

右键点击触发事件

 

left：左键

right：右键

middle：中间滚轮

 

计算属性

计算属性用在当一个值需要通过一些逻辑运行才能得到的时候，在computed中定义计算属性

computed: {

aftermsg: function () {

var result = this.msg.split('').reverse().join('');

console.log('excute aftermsg: ' + result);

return result;

}

}

 

<p>

msg:<input v-model="msg"/>

</p>

<p>

computed msg:{{aftermsg}}

</p>

上面aftermsg就是一个计算属性，当msg改变时，aftermsg将重新计算得到新的值（即msg是aftermsg的响应式依赖值，当响应式依赖的值发生改变时，计算属性也将改变，而如果aftermsg中没有依赖的值时，aftermsg将不会改变，比如使用Date.now()），如果msg的值没改变则使用缓存的aftermsg的值

 

可以给计算属性设置setter方法，给计算属性赋值

computed: {

aftermsg: function () {

get:function(){

return this.msg1+this.msg2;

},

set:function(val){

var arr = val.split(' ');

this.msg1=arr[0];

this.msg2=arr[1];

}

}

}

 

侦听器

侦听器用在需要做耗时的运算和异步请求的时候使用，另外可以设置中间的状态

<p>

qustion: <input v-model="qustion" />

</p>

<p>

answer: {{answer}}

</p>

 

var vm = new Vue({

el: "#scMain",

data: {

qustion: '',

answer: 'enter u qustion'

},

created: function () {

//_.debounce` 是一个通过 Lodash 限制操作频率的函数。

this.getAnswerGate = _.debounce(this.getAnswer, 500);

},

watch: {

qustion: function () {

this.answer = 'waiting for answer...';

this.getAnswerGate();

}

},

methods: {

getAnswer: function () {

axios.get('home/getanswer?qustion=' + vm.qustion)

.then(function (response) {

vm.answer = response.data.msg;

})

.catch(function (error) {

vm.answer = 'get answer error';

console.log(error);

});

}

}

})

上面watch里面侦听qustion字段，当qustion改变时，将给answer字段赋值，在等待最终的结果时，可以给answer赋中间状态的值

 

绑定样式

样式绑定是一个非常有用的功能，我们可以将一个html元素的css属性绑定到vue对象的一个字段，和数据绑定类似，我们修改vue字段就可以动态改变html元素的css样式

vue绑定元素样式可以使用v-bind:class 和 v-bind:style

 

v-bind:class的用法如下

使用data中的字段定义css class，并绑定到dom元素上

 

<style>

.divClass{

color:red;

}

</style>

<div v-bind:class="cssObj">123</div>

var vm = new Vue({

el: '#scMain',

data: {

cssObj: {

divClass: true

}

}

})

 

如果需要计算改变css class，则可以绑定计算属性<div>

<input type="checkbox" v-model.lazy="checked"/>

<div v-bind:class="computeCss">123</div>

 

var vm = new Vue({

el: '#scMain',

data: {

cssObj: {

divClass: true

},

checked: false

},

computed: {

computeCss: function () {

return { divClass: this.checked };

}

}

})

上面当勾选复选框时，将divClass添加到div上，取消勾选则移除

 

v-bind:style 的用法如下

使用data中的字段定义style，并绑定到dom元素

 

<div v-bind:style="styleObj">123</div>

var vm = new Vue({

el: '#scMain',

data: {

styleObj: {

color:'yellow'

}

}

})

 

如果需要计算则使用计算属性进行绑定

<div>

<input type="checkbox" v-model.lazy="checked"/>

</div>

<div v-bind:style="computeStyle">123</div>

 

var vm = new Vue({

el: '#scMain',

data: {

},

computed: {

computeStyle: function () {

if (this.checked === true) {

return { color: 'yellow' };

}

}

}

})

 

 

条件渲染

使用v-if，v-else-if，v-else来判断是否渲染元素

<input v-model.number="flag" />

 

<p v-if="flag===1">item111</p>

<p v-else-if="flag===2">item222</p>

<p v-else-if="flag===3">item333</p>

<p v-else>no item</p>

 

var vm = new Vue({

el: '#scMain',

data: {

flag:0

}

})

上面例子根据flag的值来选择渲染哪个元素，v-if 指令只有在满足条件时才渲染，与之相对的是v-show，v-show相当于修改css 的display样式，在加载的时候不论是否为true都会渲染元素

<p v-show="isShow">v-show item</p>

 

另外如果需要同时选择判断渲染多个元素是，可以将v-if添加到<template>中，<template>元素不会被渲染出来，只渲染里面包含的元素。v-show不能作用在<template>元素上面

<template v-if="isShow">

<p>template p 1</p>

<p>template p 2</p>

</template>

 

vue会服用已有的元素，如果需要不复用元素，每次判断后重新渲染，则可以给元素加上key属性

<p v-if="flag===1">

<label>use user name:</label>

<input type="text" placeholder="enter name" key="username" />

</p>

<p v-else>

<label>use user email:</label>

<input type="text" placeholder="enter email" key="email"/>

</p>

上面的例子，如果input没有添加key的情况下，当flag值改变切换元素时，lable，input都会复用，input中已经输入的值将不会被自动清除。而加上key以后，input在切换时，每次都会重新渲染，里面已经输入的值也会被自动清除

 

列表渲染

使用v-for 循环渲染列表

<ul>

<li v-for="(item,index) in foodlist" v-bind:key="item.id">

{{index}}-{{item.id}}-{{item.name}}

</li>

</ul>

 

var vm = new Vue({

el: '#scMain',

data: {

foodlist: [

{ id: "id1", name: "food111" },

{ id: "id2", name: "food222" },

{ id: "id3", name: "food333" }

]

}

})

 

上面在li元素中使用v-for循环foodlist集合，item是集合的项，index是集合的索引下标

 

v-for还可以循环对象

<ul>

<li v-for="(value,name,index) in userinfo">

{{index}}-{{name}}-{{value}}

</li>

</ul>

 

var vm = new Vue({

el: '#scMain',

data: {

userinfo: {

name: "leslie",

age: "22",

phone:"13612345678"

}

}

})

 

index表示索引下标，value表示对象里字段的值，name是字段的名称

 

操作vue中集合的方法如下，使用方法而不直接改变集合项的值更符合vue响应式的设计，值的改变将触发视图的更新

push：插入值到集合末尾

pop：删除集合末尾元素

shift：删除集合第一个元素

unshift：插入元素到集合头

splice：替换/删除元素，splice(集合，要删除的元素下标，删除后插入的新元素)

sort：排序

reverse：集合元素反转

 

使用set方法修改特定下标的值

Vue.set(vm.foodlist, index, { id: "id2", name: "newfood123" });

vm.$set(vm.foodlist, index, { id: "id2", name: "newfood123" });

//splice也可以修改指定下标项的值

vm.foodlist.splice(index, 1, { id: "id2", name: "newfood123" });

 

splice还可以修改集合的长度，修改的长度比原来的长度大测试并没有什么效果

vm.foodlist.splice(2);

 

set除了修改集合的值，像userinfo这样的对象也可以修改，没有则添加

Vue.set(vm.userinfo, 'age', 33);

vm.$set(vm.userinfo, 'age', 33);

 

修改多个值

vm.userinfo = Object.assign({}, vm.userinfo, {

age: '12',

name: 'leslie123'

})

 

上面是变异方法，调用上面的方法将修改元素集合的值，相对还有下面的非变异方法，使用这些方法将生成新的集合，将新的集合赋值给原来的集合变量，页面上也将重新渲染元素。重新渲染不代表重新构建新的元素，vue将会最大限度的重用已经渲染过的元素。

filter：过滤

slice：截取数组

concat：合并数组

 

<ul>

<li v-for="(item,index) in newFoodList" v-bind:key="item.id">

{{index}}-{{item.id}}-{{item.name}}

</li>

</ul>

 

var vm = new Vue({

el: '#scMain',

data: {

foodlist: [

{ id: "id1", name: "food111" },

{ id: "id2", name: "food222" },

{ id: "id3", name: "food333" }

]

},

computed: {

newFoodList: function () {

return this.foodlist.filter(function (food) {

return food.id === 'id2';

})

}

}

})