您的位置：首页 > 产品设计 > UI/UE

VueJS方法

2017-03-14 00:00 183 查看

1、Vue.js

vue.js是一个提供数据双向绑定的js框架，通过使用vueJS，可以实现DOM数据和数据绑定实时更新。
vue.js以数据驱动和组件化思想构建。

相比AngularJS，VueJS的语法更加简洁。

2、Vue绑定数据

<body>
<div id="v_ele">
//message为和绑定的数据，用{{}}括起
{{message}}
</div>
<button id="btn">点击更换</button>
<script src="jquery-3.1.1.js"></script>
<script src="dist/vue.js"></script>
<script>

//创建一个对象用来存储数据，我们如果需要改变页面中的数据，只需要更改该对象里面的数据即可
var exaStr = {message:"Hello World!"};
//创建一个Vue对象，对象里面el代表了选中的页面元素，选择格式和CSS选择器规则一致，
//data里面写需要加到页面的数据
var vuedata=new Vue({
el:"#v_ele",
data:exaStr
})
//我们也可以将创建出来的vue实例化对象打印到控制台，查看其内容
console.log(vuedata);

//给页面按钮注册点击事件，当点击按钮时，exaStr里面的数据被更改；
//这时候我们可以看到，当exaStr里面的数据被更改时，其绑定的元素的内容也被更改了，这就是vue的基本用法
$("#btn").click(function () {
if(exaStr.message == "Hello World!"){
exaStr.message="The world is change!";
}
else{
exaStr.message="Hello World!";
}
})

</script>
</body>

3、Vue绑定表单元素

<body>

<div id="app">
<p>{{message}}</p>
<input type="text" id="text" v-model="message"/>
</div>

<script src="dist/vue.js"></script>
<script src="jquery-3.1.1.js"></script>
<script>
//    利用绑定相同的view，再给input定义一个v-model,从而实现了input和文本的数据绑定
//    同时，给message一个初始值
var exampleData={message:""}
var vuedata=new Vue({
el:"#app",
data:exampleData
})
//    onchange事件，在表单内容发生改变，且失去了焦点的时候即触发
$("#text").on("change", function () {
console.log(vuedata.message);
})

//
</script>
</body>

4、常用vue指令

(1)、v-if

<body>

<div id="exaData">
<h1 v-if="accept">呀呀呀呀呀</h1>
<h2 v-if="deny">哇哇哇哇哇</h2>
<h3 v-if="num<=30">哦哦哦哦哦</h3>
<h4 v-if="str.indexOf('ok')>=0">咦咦咦咦咦</h4>
</div>

<script src="dist/vue.js"></script>
<script src="jquery-3.1.1.js"></script>
<script>
var exam = new Vue({
el:"#exaData",
data:{
accept:true,
deny:false,
num:25,
str:"yesookk"
}
})
//直接操作点方法即可改变data内部的值
//例如exam.num = 30;
//v-if后面接判断语句，判断语句调用data里面的数据，
//判断完成根据结果的true或false判断该元素是否出现在页面中

</script>
</body>

(2)、v-show

<body>

<div id="exam">
<h1 v-show="accept">1</h1>
<h1 v-show="deny">2</h1>
7fe0

<h1 v-show="num<=40">3</h1>
<h1 v-show="str.indexOf('ok')>= 0">4</h1>
</div>

<script src="jquery-3.1.1.js"></script>
<script src="dist/vue.js"></script>
<script>
var exam = new Vue({
el:"#exam",
data:{
accept:true,
deny:false,
num:32,
str:"okkkkkokokokoko"
}
})
//v-show跟v-if类似，后面也接判断句，根据计算的boolean来判断该元素是否显示出来；
//v-show和v-if的区别在于，
//      show方法无论条件是否成立，该元素都在DOM中存在；
//      而if条件如果不成立，该元素不会出现在DOM中；

</script>

</body>

(3)、v-else

<body>
<!--当v-if或v-show的条件不成立的时候，v-else的条件成立，显示v-else绑定的内容-->
<div id="exam">
<h1 v-if="accept">00000001</h1>
<h1 v-if="error">此时为true，00000002</h1>
<h1 v-else>此时为false，00000003</h1>
<h1 v-show="num<=30">此时num<=30，00000004</h1>
<h1 v-else>此时num>30，00000005</h1>
</div>

<script src="jquery-3.1.1.js"></script>
<script src="dist/vue.js"></script>
<script>
var exam = new Vue({
el:"#exam",
data:{
accept:true,
error:false,
num:40
}
})
//v-else,当if或者show的结果为false时，显示else的元素
//一般和if或show配合使用
</script>

</body>

(4)、v-for

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 500px;
height: 200px;
margin:100px auto;
}
th,td{
width: 120px;
height: 50px;
border:1px solid #f0ad4e;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr v-for="key in obj">
<td>{{key.name}}</td>
<td>{{key.age}}</td>
<td>{{key.gender}}</td>
</tr>
</tbody>
</table>
</div>
<script src="dist/vue.js"></script>
<script>
var exam = new Vue({
el:"#box",
data:{
obj:[{
name:"jack",
age:18,
gender:"male"
},{
name:"rose",
age:20,
gender:"female"
},{
name:"LinearLaw",
age:"1",
gender:"male"
}]
}
})
</script>
</body>
</html>

(5)、v-bind

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li{
list-style: none;
text-align: center;
}
a{
text-decoration: none;
width: 50px;
height: 50px;
border:1px solid lime;
border-radius: 8px;
color: #000;
float: left;
}
.active{
background-color: lime;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<ul class="pagination">
<li v-for="n in Count">
<a href="#" v-bind:class="actNum === n ? 'active' : ''">{{ n  }}</a>
</li>
</ul>
</div>
<script src="dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
actNum:1,
Count:10
}
})
//n从1开始遍历，一直到10结束
//v-bind后面接冒号，可以接一些判断语句，用来决定属性名是否可用
</script>
</body>
</html>

(6)、v-on

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#exam>div{
width: 50px;
height: 50px;
border:1px solid #f0ad4e;
margin:100px auto;
background-color: lime;
border-radius: 8px;
}
</style>
</head>
<body>

<div id="exam">
<div v-on:click="say()"></div>
<div v-on:click="speak('Oh!')"></div>
</div>

<script src="dist/vue.js"></script>
<script>
var exam = new Vue({
el:"#exam",
data:{
message:"you say what?"
},
methods:{
say:function(){
alert("This is say method");
},
speak: function (msg) {
alert(msg+"No!");
}
}
})
//        methods存放方法数据，
//        v-on用来给元素绑定事件
//        用法——→v-on:事件类型=事件名称
</script>

</body>
</html>

tips：v-if和v-show的区别在于，
v-if中的判断条件不成立的时候，页面中不会出现该元素，即该元素不在DOM中出现，
而v-show中的判断条件无论是否成立，其页面中都会出现该元素，判断条件只控制该元素的display属性，判断条件为false则display：none；

v-else则是if和show的一个互补，当if或show不成立，else的元素显示出来；

v-for一般用来生成多个元素，将一组数据循环生成到页面；

v-bind一般用来给元素绑定class属性，可以加判断条件；

v-on用来给元素添加事件；

tips：v-on和v-bind可以进行缩写

<a href="#" :class="actNum === n ? 'active' : ''">{{ n  }}</a>
<div @click="speak('Oh!')"></div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vue.js JavaScript Options

相关文章推荐

新的分享

章节导航