一、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>若有不足请多多指教！希望给您带来帮助！