live-server使用
npm install live-server -g
live-server
一、v-if & v-show
示例：
v-if
你好！Fang
这里我们在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好！Fang，如果为false时，就显示请登录后操作。
v-show
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
你好：JSPang
v-if 和v-show的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅
二、v-for使用:
基本用法：
-
{{item}}
这是一个最基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，你需要那个html标签循环，v-for就写在那个上边。
数组如何排序：
我们已经顺利的输出了我们定义的数组，但是我需要在输出之前给数组排个序，那我们就用到了Vue的computed:属性。
computed:{
sortItems:function(){
return this.items.sort();
}
}
我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。
若只用sort方法是得不到想要的数据的,我们可以自己编写一个方法sortNumber，然后传给我们的sort函数
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
function sortNumber(a,b){
return a-b
}
依次输出：
18
19
20
23
32
41
54
56
65
对象循环输出：
首先得定义一个数组，数组里边是对象数据
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
在模板中输出
-
{{student.name}} - {{student.age}}
加入索引序号
-
{{index}}：{{student.name}} - {{student.age}}
排序，我们先加一个原生的对象形式的数组排序方法
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((xy)?1:0));
});
}
有了数组的排序方法，在computed中进行调用排序
sortStudent:function(){
return sortByKey(this.students,'age');
}
三、v-text & v-html
{{ message }} =
//如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签
注：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
四、v-model指令
1、一个最简单的双向数据绑定代码：
原始文本信息：{{message}}
文本框
v-model：
v-model.lazy：
v-model.number：
v-model.trim：
//JS
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
输出：
文本框里的内容改变原始文本信息跟着改变
简单双向数据绑定
修饰符
- .lazy：取代 imput 监听 change 事件。
- .number：输入字符串转为数字。
- .trim：输入去掉首尾空格。
2、文本区域加入数据绑定
文本域
//JS
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
输出：
文本域
3、多选按钮绑定一个值
多选框绑定一个值
//JS
var app=new Vue({
el:'#app',
data:{
isTrue: true
}
}
输出：
多选框绑定
4、多选绑定一个数组
多选框绑定数组
//JS
var app=new Vue({
el:'#app',
data:{
webNames:[]
}
}
输出：
多选框绑定数组
5、单选按钮绑定数据
单选框绑定
你选择的性别是：{{sex}}
//JS
var app=new Vue({
el:'#app',
data:{
sex:''
}
}
输出：
单选按钮绑定数据
五、v-on事件监听
两种绑定方法：
- v-on:click
- @click
//html
本场比赛得分：{{count}}
我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。
绑定事件写法：
//绑定到键盘上的回车键
//JS代码
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
可以根据键值表定义键盘事件：点击查看
六、v-bind指令
v-bind是处理HTML中的标签属性的，例如
就是一个标签，![]()
也是一个标签，我们绑定![]()
上的src进行动态赋值。
//html
[图片上传失败...(image-c7ccbb-1524291892651)]
//js
var app=new Vue({
el:'#app',
data:{
imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
}
})
在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。我们在data对象在中增加了imgSrc属性来供html调用。
v-bind 缩写
绑定CSS样式
在工作中我们经常使用v-bind来绑定css样式：
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
1、绑定classA
var app=new Vue({
el:'#app',
data:{
className:'classA
}
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
2、绑定class中的判断
var app=new Vue({
el:'#app',
data:{
isOK:false
}
3、绑定class中的数组
3、绑定class中的数组
var app=new Vue({
el:'#app',
data:{
classA:'classA',
classB:'classB'
}
4、绑定class中使用三元表达式判断
4、绑定class中的三元表达式判断
var app=new Vue({
el:'#app',
data:{
classA:'classA',
classB:'classB'
}
5、绑定style
5、绑定style
var app=new Vue({
el:'#app',
data:{
red:'red',
font:'20px'
}
6、用对象绑定style样式
6、用对象绑定style样式
//js
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
v-pre & v-cloak & v-once指令
v-pre指令
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
{{message}}
这时并不会输出我们的message值，而是直接在网页中显示{{message}}
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
[v-cloak] {
display: none;
}
{{ message }}
v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
{{message}}
{{message}}
上面的div将不会随着input值改变一起改变 只改变下面div