ZUI易入门前端四、vue

技术2024-10-26 21

以前我们用JSDom或者JQuery写网站的时候，经常要进行html字符串拼接，而且还要清楚的了解dom结构、事件监听等，非常复杂且难以维护。

Vue.JS、Angular、React等框架让我们编写网页不再进行html字符串拼接，而是以一种MVC的模式去开发，结构更清晰。这节我们讲VueJS，其他用法大同小异。

Vue有VueJS和Vue-ClI两种用法，Vue-ClI是给对于NodeJS等前端专业知识比较熟的人，初学者用VueJS用法即可。

（一）vue简介

在Dom或者JQuery时代，我们需要自己进行Html的拼接等，比如：

VueJs官网文档地址：https://cn.vuejs.org/v2/guide/

下载Vue.js添加到项目中或者直接引用他们官网提供好的

而用了VueJS就简单很多了。看看怎么用VueJS实现加载表格。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<thead>

</thead>

<tbody>

</tbody>

</table>

</div>

</body>

var vue = new Vue({

el:"#app",

data:

{

persons:[{id:1,name:'baidu',age:8},{id:2,name:'QQ',age:18},{id:3,name:'淘宝',age:12}]

}

});

</script>

</html>

跟Dom或者jQuery版相比看看差异。

注意，VueJS2.x比1.x变化了很多，看文档别搞乱了。

（二）MVVM

MVC是：模型（Model）、视图（View）、控制器（Controller）

Model负责在View和控制器之间进行数据的传递：用户输入的内容封装为Model对象，发给Controller；要显示的数据由Controller放到Model中，然后扔给View去显示。Controller不直接和View进行交互。

说通俗的就是：Model是数据，Model和View绑定，控制器通过操作Model间接和界面交互。

MVVM是MVC的升级版，没有多复杂，初学者暂时理解成MVC就行。

模型（Model）、视图（View）、控制器（Controller）、viewModel(视图模型)

viewModel：简单讲解是vue实例（vm），也就是vue

（三）Vue入门

<!DOCTYPE html>

<html>

<head>

</head >

<body>

<input type="text" v-model="i1"/>+

</div>

//要写到元素的后面，当然也可以写到window.onload中

var app = new Vue({

el: '#app',

data:

{

i1: 0, i2: 0, i3: 0

methods:

{

calcAdd: function ()

{

this.i3 = parseInt(this.i1) + parseInt(this.i2);

}

});

</script>

</body>

</html>

如果显示还是占位符，一定是有语法错误。

使用的时候注意控制台中的报错

controler中访问model中的数据的时候一定要带this.

做好View和属性绑定之后，我们只要写业务逻辑就可以，不需要在代码中再去操作Dom。

new Vue({el: '#app'});这是创建Vue的“势力范围”，在el指定选择器范围内的元素都受Vue控制。很显然new Vue({el: '#app'});要放到html元素之后或者放到window.onload中。

el不能是body或者html节点。

Vue的data段中定义了模型数据，这些数据可以绑定到视图上，methods段中定义了事件处理的函数。

v-model是用来把输入控件和model中某个属性进行绑定的VueJS自定义的属性，这样这个输入控件的值就会和模型的属性值进行“双向绑定”（model变了界面会变，界面中输入变化了model中也会变）。

如果只是简单的显示，那么就用{{i3}}就行了

v-on:click="calcAdd"表示当点击这个按钮的时候执行methods中名字为calcAdd的方法。注意不要加括号

在Vue的methods段中定义的方法中this.i1表示当前Vue对象的data模型中的i1，不能不写this。注意给data模型赋值的时候不能给data属性重新赋值，只能给data中的成员赋值。

Vue中所谓的data、methods都是符合标准JS语法的，因此不能写错了。

（四）绑定

再体会一下双向绑定（View和Model的改变可以影响对方）：

增加一个按钮：

在methods中增加changei1方法（时刻注意符合js语法）：

changei1: function ()

{

this.i1 = 666;

}

想一下上面的代码如果用JSDom去写要多么复杂？

数据绑定的几种方式

1）双向绑定用<input type="text" v-model="i1"/> ，双向绑定只限于input、textarea、select控件。对于input（text、password）type绑定的是value属性，对于input(radio、checkbox)绑定的是checked。

2）只是显示的话用{{i1}}，这种方式比较灵活。但是注意属性值不能直接设置，下面的代码不会如愿：

要改成：

<span v-bind:title="i3">{{i3}}</span> 表示title属性绑定到i3。注意v-bind里的值不用双大括号，v-bind后的名为标签的属性名。v-bind是模型到view的单向绑定。

3）尽管我们不应该在js中再去拼接html，但是有时候我们会通过其他一些途径拿到一些html格式的内容要显示到网页中。比如data中增加一项msg:"<a href='http://www.rupeng.com'>rupeng</a>"

如果这样显示<span>{{msg}}</span> 会发现显示到页面上进行了Html转义，主要是为了防止XSS。

如果想强制不转义显示那么使用v-html，如下：<span v-html="msg"></span>

表示：把msg属性的值作为这个span的innerHtml。

（五）如何控制元素的显示

绑定v-show属性。比如在data中增加 isVip:true，然后<div v-show="isVip">老子是vip</div>

然后通过按钮切换isVip的值试一试。

也可以使用v-if实现同样的效果，区别是：v-if是动态增减节点，v-show只是控制样式显示隐藏。

v-show、v-if也支持运算表达式，比如：<div v-show="i1>2">老子是vip</div> 这样输入改变i1的时候就会切换div的显示。

v-if 和 v-show 区别：

v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。

v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。

（六）v-for 用来遍历生成节点

<ul>

<li v-for="person in persons">Id:{{person.id}} name:{{person.name}} age:{{person.age}}</li>

</ul>

</div>

var app = new Vue({

el: '#app',

data:

{

persons: [{ id: 1, name: 'lidapeng', age: 18 }, { id: 22, name: 'tom', age: 22 }, { id: 36, name: 'jerry', age: 8 }]

}

});

</script>

（七）动态添加元素

动态给集合添加元素（比如ajax动态加载），要往data对象中添加，不能覆盖data中的对象：

<ul>

<li v-for="person in persons">Id:{{person.id}} name:{{person.name}} age:{{person.age}}</li>

</ul>

<div>

id:<input type="text" v-model="pId"/>

Name:<input type="text" v-model="pName" />

Age:<input type="text" v-model="pAge" />

</div>

var app = new Vue({

el: '#app',

data:

{

pId:'',pName:'',pAge:'',

persons: [{ id: 1, name: 'yzk', age: 18 }, { id: 22, name: 'tom', age: 22 }, { id: 36, name: 'jerry', age: 8 }]

methods:

{

addNew: function () {

this.persons.push({ id: this.pId, name: this.pName, age: this.pAge });

}

});

</script>

（八）事件获取值

如何在for里面的元素事件里获得当前元素的信息，比如点击li的时候alert显示当前用户的名字：

<li v-for="person in persons" v-on:click="personClick(person)">Id:{{person.id}} name:{{person.name}} age:{{person.age}}</li>

在vue的methods里面增加一个函数：

personClick: function (p)

{

alert(p.name);

}

（九）计算函数

根据输入自动对显示的数据进行过滤或者排序：

使用计算函数，在Vue中的computed中定义的函数，可以当成数据一样用（其实也可以定义在methods中，但是定义在computed中可以利用缓存）

computed:

{

test1: function ()

{

return "hello" + this.searchName;

test2: function ()

{

return [{ name: 'tom', imgSrc: '1.jpg' }, { name: 'jack', imgSrc: '2.jpg' }];

}

然后html中：

test2:

<ul>

</ul>

test1:{{test1}}

Vue能够感知出来test1的计算依赖于searchName，这样当我们在输入框中输入的时候{{test1}}的内容就会跟着变化。而如果个test1的方法实现改为return “hell0”+new Date()则不会重新调用刷新。

案例，用computed实现实时人员搜索和排序：

<ul>

<li v-for="person in filterPersons">Id:{{person.id}} name:{{person.name}} age:{{person.age}}</li>

</ul>

computed中增加filterPersons函数：

filterPersons: function () {

var searchName = this.searchName;

return this.persons

.sort(function (p1, p2) { return p1.age - p2.age; })

.filter(function(p){

return p.name.indexOf(searchName) >= 0;

});

}

外界如何调用Vue的方法或者数据？尽量不要直接操作数据，而通过定义的函数来操作，这样才满足“封装”的原则。

（十）mounted

VueJS中如何在窗口加载完成后执行代码？放到mounted段中。

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

var vm = new Vue({

el:"#example1",

data:{

name:'jack',

age:12,

city:'北京'

created:function(){

var x = document.getElementById("name")//第一个

console.log(x.innerHTML);

mounted:function(){

var x = document.getElementById("name")//第二个命令台输出的结果

console.log(x.innerHTML);

}

});

（十一）watch

如果想在数据变化时执行一些代码，就要用watch，比如计算器程序监控i1变化：

watch:

{

i1:function(val)

{

alert("i1变化为"+val);

}

（十二）nextTick

VueJs不可能封装所有Dom操作，一些特殊场景还要直接操作Dom，如果需要对数据的变化更新到Dom后执行和Dom相关的代码，一定要放到Vue.nextTick(callback)中，比如计算器例子中，如果计算完成后直接alert(document.getElementById("span1").innerHTML);会显示0，要如下：

Vue.nextTick(function(){

alert(document.getElementById("span1").innerHTML);

});

比如输入聊天消息附加到列表中，并且滚动到底部：

当消息添加到消息列表中滚动到底部，要使用watch监控数据变化，然后在nextTick中chatbox.scrollTop = chatbox.scrollHeight;滚动到底部。

<!DOCTYPE html>

<html>

<head>

<style>

#divChat

{

width:300px;

height:100px;

overflow-y:scroll;

}

</style>

</head >

<body>

</div>

</div>

var vue = new Vue({

el:"#app",

data:{items:['a','b','c','d','e','f','g'],words:''},

methods:

{

send:function()

{

this.items.push(this.words);

this.words='';

}

watch:

{

items:function()

{

Vue.nextTick(function(){

var divChat = document.getElementById("divChat");

divChat.scrollTop = divChat.scrollHeight;//滚动到最底下

});

}

});

</script>

</body>

</html>

Processed: 0.011, SQL: 9

ZUI易入门前端 四、vue

（一）vue简介

（二）MVVM

（三）Vue入门

（四）绑定

（五）如何控制元素的显示

（六）v-for 用来遍历生成节点

（七）动态添加元素

（八）事件获取值

（九）计算函数

（十）mounted

（十一）watch

（十二）nextTick

ZUI易入门前端四、vue