Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
1.v-if v-else v-show 指令
v-if用来判断是否加载html的DOM
<div id="app">
<div v-if="isLogin">你好：JSPang</div>
<div v-else>请登录后操作</div>
</div>
v-show ：
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
v-if 和v-show的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。
2.v-for指令
模板写法
<li v-for="item in items">
{{item}}
</li>
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
ｄｅｍｏ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.min.js"></script>
<title>V-for 案例</title>
</head>
<body>
<h1>v-for指令用法</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in itemsort">
{{item}}
</li>
</ul>
<ul>
<li v-for="(item,index) in sortStudent">
{{index}} - {{item.name}}:{{item.age}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,5,54,56,41],
students:[
{name:'jspang',age:32},
{name:'Panda',age:52},
{name:'PanPaN',age:5},
{name:'King',age:45}
]
},
computed:{
itemsort(){
return this.items.sort((a,b)=>a>b);
},
sortStudent:function(){
return this.sortByKey(this.students,'age');
}
},
methods:{
sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
console.log(x,y);
return ((x<y)?-1:((x>y)?1:0));
});
},
}
})
</script>
</body>
</html>3.v-text & v-html
<span>{{ message }}</span>=<span v-text="message"></span>
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
<span v-html="msgHtml"></span>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
msgHtml:'<h2>hello Vue!</h2>'
}
})
</script>
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。
注意：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用.。
4.v-on：绑定事件监听器
我们的v-on 还有一种简单的写法，就是用@代替。
<button @click="jianfen">减分</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()函数进行整数转换。
你也可以根据键值表来定义键盘事件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="../assets/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
<textarea cols="30" rows="10" v-model="message"></textarea>
<hr>
<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>
<p>
<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
</p>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
message:"hello,world",
web_Names:[],
sex:''
}
})
</script>修饰符 ｖ－ｍｏｄｅｌ．ｌａｚｙ
- .lazy：取代 imput 监听 change 事件。
- .number：输入字符串转为数字。
- .trim：输入去掉首尾空格。
6.v-bind 指令
v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。
html文件：
|
1
2
3
|
<div
id
=
"app"
>
<img v
-bind
:
src
=
"imgSrc"
width
=
"200px"
>
</div>
|
v-bind 缩写
|
1
2
3
4
|
<!-- 完整语法 -->
<a v
-bind
:
href
=
"url"
>
</a>
<!-- 缩写 -->
<a
:
href
=
"url"
>
</a>
|
绑定CSS样式
在工作中我们经常使用v-bind来绑定css样式：
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
|
1
|
<div
:
class
=
"className"
>
1、绑定classA
</div>
|
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
|
1
|
<div
:
class
=
"{classA:isOk}"
>
2、绑定class中的判断
</div>
|
3、绑定class中的数组
|
1
|
<
div
:
class
=
"[classA,classB]"
>
3、绑定
class中的数组
<
/
div
>
|
<div id="app">
<p :class=[red,fontsize]>hello</p>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
red:'red',
fontsize:'fontsize'
},
methods:{
}
})
</script>4、绑定class中使用三元表达式判断
|
1
|
<
div
:
class
=
"isOk?classA:classB"
>
4、绑定
class中的三元表达式判断
<
/
div
>
|
5、绑定style
|
1
|
<
div
:
style
=
"{color:red,fontSize:font}"
>
5、绑定
style
<
/
div
>
|
6、用对象绑定style样式
|
1
|
<
div
:
style
=
"styleObject"
>
6、用对象绑定
style样式
<
/
div
>
|
|
1
2
3
4
5
6
7
8
9
|
var
app
=
new
Vue
(
{
el
:
'#app'
,
data
:
{
styleObject
:
{
fontSize
:
'24px'
,
color
:
'green'
}
}
}
)
|
７．其他指令
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>
|