一、vue的概述及vue的入门小实例
vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。
特性:
1.Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。
2.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
3.前端组件化:一个组件相当于一个小的区域/模块(或者简单的理解成是一个w3c未提供给我们的标签)
4.Vue.js的核心是一个响应的数据绑定系统它让数据与DOM保持同步非常简单。
补充知识:
最常见的客户端架构有三种:
- MVC: Model-View-Controller
- MVP: Model-View-Presenter
- MVVM: Model-View-ViewModel(面向数据M层)
在 MVC 里面,Model 是数据模型;View 是视图或者说就是我们的软件界面需要去展示的东西;Controller 是用来控制Model的读取、存储,以及如何在 View上 展示数据,更新数据的逻辑控制器。vm=C=P
下面我们用vue的独立版本/将vue.js下载到本地 在引入到项目中:
vue.js官网:https://cn.vuejs.org/v2/guide/
<!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
或者:
<!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> |
1.vue简单入门实例:
每一个vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例:
一个Vue实例其实就是一个MVVM模式中所描述的ViewModel,因此在文档中经常会使用app这个变量名。
//vue根实例
var app = new Vue({
//选项
})
下面用一个简单的实例来体验vue的特性:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
</body>
//引入我们本地的vue.js
<script src="js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#vue_det',//挂载到html标签上的dom上还可以用类的形式绑定……
data: exampleData,//将我们上面的对象赋值给vue实例中的data
methods: {
details: function() {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
})
</script>
</html>
详解:
el:挂载到dom元素上
data: 用于定义数据/属性,实例中有三个属性分别为:site、url、alexa。
methods 用于定义的函数,可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
使用Vue的过程就是定义MVVM各个组件组成部分的过程的过程。
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
- 定义View
- 定义Model
- 创建一个Vue实例或"ViewModel",它是连接View和Model的桥梁内部已经封装好不需要过多的理解
2.构建vue热处理的项目
live-server使用(独立版本在浏览器中热运行html项目)
用npm进行全局安装
npm install live-server -g
cd xxx进入项目中在项目目录中打开(获取浏览器本机访问网址)
live-server
二、vue的内部指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。
1.输出指令 v-text & v-html & {{}}
我们已经会在html中输出data中的值了,我们已经用的是{{xxx}},这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码:
|
<span>{{ message }}</span>=<span v-text="message"></span> |
如果在javascript中写有html标签,用v-text是输出不出来的,这时候我们就需要用v-html标签了。
|
<span v-html="msgHtml"></span> |
双大括号会将数据解释为纯文本/函数返回值,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。
v-text/{{}}都是向页面中输出纯文本
v-html可以解析html标签
需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>muzidigbig</p>
<div id="box" >
<p>{{meg}}</p>
<p v-text="megId"></p>
<p v-html="megClass"></p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
meg:"木子大大",
megId:'muzidigbig',
megClass:"<h2>木子大大</h2>"
};
var app = new Vue({
el:'#box',
data:dataObj
})
</script>
</html>
2.样式指令 v-bind:样式类型="data中的属性名"
v-bind
指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class="";简写 :class=""
a.v-bind是处理HTML中的标签属性的,例如<div></div>就是一个标签,<a>也是一个标签,我们绑定<a>上的href进行动态赋值。
<body>
<p>muzidigbig</p>
<div id="box" >
<a v-bind:href="attrA">muzidigbig的博客</a>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
attrA:'https://blog.csdn.net/muzidigbig'
};
var app = new Vue({
el:'#box',
data:dataObj
})
</script>
b.v-bind处理css样式(样式的绑定需要先在vue实例中进行添加)
第一种,直接绑定css样式
<p v-bind:class="vp1">点击下面链接查看更多学习资料</p>
第二种,数组绑定
<p v-bind:class="[vp1,vp2,……]">点击下面链接查看更多学习资料</p>
第三种,绑定对象(在实例中的data样式是一个对象的形式)
<p v-bind:class="vObj">obj点击下面链接查看更多学习资料</p>
绑定p2并进行判断,在isOK为true时显示样式,在isOk为false时不显示样式。
<p v-bind:class="{p2:isOk}">objIf点击下面链接查看更多学习资料</p>
第四种,绑定数组中包含对象[样式,样式对象,……]
<p v-bind:class="[vp1,vObj]">obj点击下面链接查看更多学习资料</p>
第五种,绑定class中,根据条件切换列表中的class使用三元表达式判断
<p v-bind:class="isOk?vp2:vp1">绑定class中的三元表达式判断</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.p1{
color: #5c4033;
font-size: 30px;
text-indent: 2em;
}
.p2{
text-shadow: 5px 5px 2px #000;
}
.p3{
transform: rotate(45deg);
color: pink;
}
</style>
</head>
<body>
<p>muzidigbig</p>
<div id="box" >
<!--直接绑定css样式-->
<p v-bind:class="vp1">点击下面链接查看更多学习资料</p>
<!--数组绑定css样式-->
<p v-bind:class="[vp1,vp2]">点击下面链接查看更多学习资料</p>
<!--对象绑定css样式-->
<p v-bind:class="vObj">obj点击下面链接查看更多学习资料</p>
<!--对象绑定css样式的另一种形式(对样式进行判断)-->
<p v-bind:class="{p2:isOk}">objIf点击下面链接查看更多学习资料</p>
<!--数组中包含对象绑定css样式-->
<p v-bind:class="[vp1,vObj]">数组中包含对象绑定css样式</p>
<!--绑定class中的三元表达式判断-->
<p v-bind:class="isOk?vp2:vp1">绑定class中的三元表达式判断</p>
<a v-bind:href="attrA">muzidigbig的博客</a>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
attrA:'https://blog.csdn.net/muzidigbig',
vp1:'p1',
vp2:'p2',
isOk:true,
vObj:{
'p2':true,
'p3':true
}
};
var app = new Vue({
el:'#box',
data:dataObj
})
</script>
</html>
c.v-bind处理行内样式style
需要注意的是添加style样式遵循驼峰命名
第一种,添加对象
<p v-bind:style="styleObj">muzidigbig</p>
var dataObj = { styleObj:{ background:'pink', fontSize:'20px' } }; var app = new Vue({ el:'#box', data:dataObj })
第二种,添加数组对象
<p v-bind:style="[styleObj,styleObj1]">muzidigbig</p>
var dataObj = { styleObj:{ background:'pink', fontSize:'20px' }, styleObj1:{ transform:'translateX(20px) skew(20deg)' } }; var app = new Vue({ el:'#box', data:dataObj })
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<p>muzidigbig</p>
<div id="box" >
<!--对象添加style样式-->
<p v-bind:style="styleObj">muzidigbig</p>
<!--数组对象添加style样式-->
<p v-bind:style="[styleObj,styleObj1]">muzidigbig</p>
<a v-bind:href="attrA">muzidigbig的博客</a>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
attrA:'https://blog.csdn.net/muzidigbig',
styleObj:{
background:'pink',
fontSize:'20px'
},
styleObj1:{
transform:'translateX(20px) skew(20deg)'
}
};
var app = new Vue({
el:'#box',
data:dataObj
})
</script>
</html>
3.判断指令 v-if v-else v-show
v-if:
v-if:是vue 的一个内部指令,指令用在html标签中。
v-if用来判断是否加载html的DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<p>muzidigbig</p>
<div class="box" >
<p>{{meg}}</p>
<p v-if="isOk">{{text}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
meg:'是否加载下面的p中的dom',
text:'我3秒中后消失',
isOk:true
};
var app = new Vue({
el:'.box',
data:dataObj
});
setTimeout(function () {
dataObj.isOk = false
},3000)
</script>
</html>
这里我们在vue的data里定义了isOk的值,当它为true时,网页就会显示:我3秒钟后消失,3秒钟后isOk为false时,就会消失。
v-show (显示/隐藏):
调整css中display属性,DOM已经加载,只是CSS控制没有显示出来。
1 |
<div v-show="isLogin">你好:JSPang</div>
isLogin:true/false |
v-if 和v-show的区别:
- v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
- v-show:调整css dispaly属性,可以使客户端操作更加流畅。
案例:
<body>
<p>muzidigbig</p>
<div class="box" >
<p>{{meg}}</p>
<p v-if="isOk">{{text}}</p>
<p v-else>{{text}}</p>
<p v-show="isOk">{{text}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
meg:'是否加载下面的p中的dom',
text:'我3秒中后消失',
isOk:true
};
var app = new Vue({
el:'.box',
data:dataObj
});
setTimeout(function () {
dataObj.isOk = false
},3000)
</script>
4.v-on:事件='函数' 绑定事件监听器
v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码。两中事件监听器(无参,有参);事件的行内调用
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<p>muzidigbig</p>
<div class="box" >
<button v-on:click="add()">+1</button>
<button v-on:click="substrack()">-1</button>
<p>{{count}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
count:5
};
var app = new Vue({
el:'.box',
data:dataObj,
methods:{
add:function () {
return this.count++;
},
substrack:function () {
return this.count--;
}
}
});
</script>
</html>
我们的v-on 还有一种简单的写法,就是用@代替。
1 |
<button @click="substrack">减分</button> |
我们除了绑定click之外,我们还可以绑定其它事件,比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框,然后绑定回车事件,回车后把文本框里的值加到我们的count上。
绑定事件写法:
1 |
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount"> |
javascript代码:
1 2 3 |
onEnter:function(){ this.count=this.count+parseInt(this.secondCount); } |
因为文本框的数字会默认转变成字符串,所以我们需要用parseInt()函数进行整数转换。
5.双向绑定指令v-model="数据"
v-model指令,我理解为绑定数据源。就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定,但有一个前提是需要借助Vue实例来管理
v-model仅限以下三种标签使用: <input> <select> <textarea>
这里运用到的原理是:获取同一个数据源,进行双向绑定获取
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<p>muzidigbig</p>
<div class="box">
<input type="text" v-bind:placeholder="meg" v-model="meg">
<p>{{meg}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
meg:'初始数据'
};
var app = new Vue({
el:'.box',
data:dataObj
});
</script>
</html>
指令修饰符
- .lazy:取代 input 监听 change 事件。
- .number:输入字符串转为数字。
- .trim:输入去掉首尾空格。
多选按钮绑定一个值
1 2 3 |
<h3>多选按钮绑定一个值</h3> <input type="checkbox" id="isTrue" v-model="isTrue"> <label for='isTrue'>{{isTrue}}</label> |
多选绑定一个数组
1 2 3 4 5 6 7 8 9 10 |
<h3>多选绑定一个数组</h3> <p> <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names"> <label for="JSPang">JSPang</label><br/> <input type="checkbox" id="Panda" value="Panda" v-model="web_Names"> <label for="JSPang">Panda</label><br/> <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names"> <label for="JSPang">PanPan</label> <p>{{web_Names}}</p> </p> |
6.v-for指令 :解决模板循环问题
v-for指令是循环渲染一组data中的数组,v-for 指令需要以 item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名(即数组中每项的别名)。
这是一个最基础的循环,先在js里定义了items数组,然后在模板中用v-for循环出来,需要注意的是:你需要给哪个html标签循环,v-for就写在那个标签上边。
其中我们也可以把in
换成of
作为分隔符,因为它是最接近JavaScript迭代器的语法。
<body>
<p>muzidigbig</p>
<div class="box">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
items:['木','子','大','大']
};
var app = new Vue({
el:'.box',
data:dataObj
});
</script>
在自定义组件里,也可以像任何普通元素一样用v-for
。
<my-component v-for="item in items" :key="item.id"></my-component>
2.2.0+ 的版本里,当在组件中使用 v-for
时,key
现在是必须的。
然而他不能自动传递数据到组件里,因为组件有自己独立的作用域。为了传递迭代数据到组件里,我们要用 props
:
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
></my-component>
排序
我们已经顺利的输出了我们定义的数组,但是我需要在输出之前给数组排个序,那我们就用到了Vue的computed:属性。
1 2 3 4 5 |
computed:{ //计算完属性后返回的新数据属性sortItems sortItems:function(){ return this.items.sort(); } } |
我们在computed里新声明了一个对象sortItems,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象。
注意:computed中操作data里面的数据源不能起同样的名称要定义不同的名称区别开来
如果不重新声明报错:
<body>
<p>muzidigbig</p>
<div class="box">
<!--计算完属性后的值为-->
<p>{{sortItems}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
items:[19,67,3,5,6,745]
};
var app = new Vue({
el:'.box',
data:dataObj,
computed:{
sortItems:function(){
return this.items.sort();
}
}
});
</script>
如果一切顺利的话,你已经看到了结果,但是这个小程序还是有个小Bug的,现在我把数组修改成这样:
我们可以自己编写一个方法sortNumber,然后传给我们的sort函数解决这个Bug。
1 2 3 |
function sortNumber(a,b){ return a-b } |
用法
1 2 3 4 5 |
computed:{ sortItems:function(){ return this.items.sort(sortNumber); } } |
<script>
var dataObj = {
items:[19,67,3,5,6,745]
};
var app = new Vue({
el:'.box',
data:dataObj,
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
});
function sortNumber(a,b){
return a-b
}
</script>
对象循环输出
我们上边循环的都是数组,那我们来看一个对象类型的循环是如何输出的。
我们先定义个数组,数组里边是对象数据
1 2 3 4 5 6 |
students:[ {name:'pang',age:32}, {name:'Panda',age:30}, {name:'PanPaN',age:21}, {name:'King',age:45} ] |
<body>
<p>muzidigbig</p>
<div class="box">
<ul>
<li v-for="student in students" :key="student.id">
{{student.name}}----{{student.age}}
</li>
</ul>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
students:[
{name:'pang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
};
var app = new Vue({
el:'.box',
data:dataObj,
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
});
</script>
加入索引序号:
1 2 3 4 5 |
<ul> <li v-for="(student,index) in students"> {{index}}:{{student.name}} - {{student.age}} </li> </ul> |
排序,我们先加一个原生的对象形式的数组排序方法:
1 2 3 4 5 6 7 8 |
//数组对象方法排序: function sortByKey(array,key){ return array.sort(function(a,b){ var x=a[key]; var y=b[key]; return ((x<y)?-1:((x>y)?1:0)); }); } |
有了数组的排序方法,在computed中进行调用排序
1 2 3 |
sortStudent:function(){ return sortByKey(this.students,'age'); } |
注意:vue低版本中 data里面的items和computed里面可以一样,但是高版本,是不允许相同名称。有很多小伙伴踩到了这个坑,这里提醒学习的小伙伴,根据自己版本的不同,请修改代码。
7.其他内部指令(v-pre & v-cloak & v-once)
v-pre指令
在模板中跳过vue的编译,直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了,直接将他译为文本。
1 |
<div v-pre>{{message}}</div> |
这时并不会输出我们的message值,而是直接在网页中显示{{message}}
v-cloak指令
在vue渲染完页面后指定的整个DOM后才进行显示。它必须和CSS样式一起使用,
1 2 3 |
[v-cloak] { display: none; } |
1 2 3 |
<div v-cloak> {{ message }} </div> |
v-once指令
在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程(不显示修改的)。
1 2 |
<div v-once>第一次绑定的值:{{message}}</div> <div><input type="text" v-model="message"></div> |
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<p>muzidigbig</p>
<div class="box">
<!--不进行数据驱动-->
<p v-pre>{{meg}}</p>
<!--在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程(不显示修改的)-->
<p v-once>{{meg}}</p>
<p v-cloak>{{meg}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var dataObj = {
meg:'初始数据'
};
var app = new Vue({
el:'.box',
data:dataObj
});
</script>
</html>
若有不足请多多指教!希望给您带来帮助!