代码块放上来后，代码缩进有点问题，还请谅解，将就看看就好。
1. v-if & v-else &v-show 条件判断
<!DOCTYPE html>
<html>
<head>
<title>v-if</title>
</head>
<body>
<h1>v-if</h1>
<hr>
<div id="app">
<div v-if="isLogin">v-if 是判断是否加载</div>
<div v-else>请登录</div>
<div v-show="isLogin">
v-show 只是判断是否显示，无论布尔值是什么都是加载状态
</div>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isLogin: true
}
})
</script>
</body>
</html>2.v-for 列表循环
<!DOCTYPE html>
<html>
<head>
<title>v-for 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-for 实例</h1>
<hr>
<div id="app">
<ol>
<li v-for="item in soreItem">{{item}}</li>
</ol>
<ul>
<li v-for="(student,index) in soreStudents">
{{index+1}}.姓名：{{student.name}}，成绩{{student.score}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
items: [1996,03,25,22],
students:[
{name:"小明",score:68},
{name:"小红",score:84},
{name:"小伟",score:59},
{name:"小付",score:100}
]
},
computed:{
soreItem(){
return this.items.sort(sortNumber).reverse();
},
soreStudents(){
return sortByKey(this.students,'score');
}
}
})
//数组排序
function sortNumber(n,m){
return n - m
}
//数组对象方法排序:
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));
});
}
</script>
</body>
</html>
3.v-text & v-html 渲染
<!DOCTYPE html>
<html>
<head>
<title>v-text & v-html</title>
</head>
<body>
<h1>v-text & v-html</h1>
<hr>
<div id="app">
<div v-text="mesText"></div>
<div v-html="msgHtml"></div>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
mesText:"这段文字由v-text输出",
msgHtml:'<div style="color:red;">这段文字由v-html输出<div>'
}
})
</script>
</body>
</html>4.v-on事件监听
<!DOCTYPE html>
<html>
<head>
<title>v-on事件监听器</title>
</head>
<body>
<h1>v-on事件监听器</h1>
<hr>
<div id="app">
<div>本厂产量：{{count}}</div>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">减分</button>
<button @click="reset">清空</button>
<hr>
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
</div>
<!-- v-on 还有一种简单的写法 @click-->
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
count:0,
secondCount:''
},
methods:{
jiafen(){
this.count++
},
jianfen(){
this.count--
},
onEnter(){
this.count = this.count+parseInt(this.secondCount)
this.secondCount = ''
},
reset(){
this.count = 0
}
}
})
</script>
</body>
</html>5.v-model 数据绑定
<!DOCTYPE html>
<html>
<head>
<title>v-model 实例</title>
</head>
<body>
<h1>v-model 实例</h1>
<hr>
<div id="app">
<div>绑定消息：{{message}}</div>
<p>v-model <input type="text" v-model="message"></p>
<hr>
<!--
.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。
用法： v-mode.lazy="",在v-model后面接上修饰符即可
-->
<h1>多选按钮绑定一个值</h1>
<input type="checkbox" v-model="isTrue" id="isTF">
<label>{{isTrue}}</label>
<hr>
<h1>多选按钮绑定一个值</h1>
<div>
<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>
</div>
<hr>
<h1>单选按钮绑定数据</h1>
<div>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label><br>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>您选择的性别是：<span v-text="sex"></span></p>
</div>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"",
isTrue:true,
web_Names: [],
sex:''
}
})
</script>
</body>
</html>6.v-bind属性绑定
<!DOCTYPE html>
<html>
<head>
<title>v-bind实例</title>
<style type="text/css">
.className{
color: red;
}
.classNameA{
background: #FFEB3B;
}
</style>
</head>
<body>
<h1>v-bind实例</h1>
<hr>
<div id="app">
<p>v-bind 可以绑定标签属性</p>
<!-- 简写是直接冒号属性:src -->
<div><img v-bind:src="srcImg"></div>
<div :class="className">绑定calss</div>
<div :style="styleName">绑定style对象</div>
<div :style="{color:white,background:blue}">绑定style</div>
<div :class="{className:isOK}">绑定class并判断</div>
<div :class="[className,classNameA]">绑定class中的数组</div>
<div :class="isOK?className:classNameA">绑定class中使用三元表达式</div>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好，世界！",
srcImg:'../assets/img/1.jpg',
className:'className',
styleName:{
color:'blue',
fontSize:'20px'
},
isOK:false,
classNameA:"classNameA",
white:"white",
blue:"blue"
}
})
</script>
</body>
</html>7.其他内部指令(v-pre & v-cloak & v-once)
<!DOCTYPE html>
<html>
<head>
<title>v-pre & v-cloak & v-once</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<h1>v-pre & v-cloak & v-once</h1>
<hr>
<div id="app">
<div v-pre>v-pre:跳过vue编译，直接输出原始值：{{vPre}}</div>
<div v-cloak>v-cloak:渲染完指定的整个DOM后才显示。它必须和css样式一起使用:{{vCloak}}
</div>
<div v-once>第一次绑定的值：{{vOnce}}</div>
<div><input type="text" v-model="vOnce"></div>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
vPre:"原始值",
vCloak:"v-cloak",
vOnce:"第一次的值"
}
})
</script>
</body>
</html>