vue框架
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue框架相关的知识，希望对你有一定的参考价值。
1.声明方法：
new Vue({
......
})
一、在Vue对象中有很多常用的选项，
1.el 表示Element，用于控制Vue指定的元素。
2.data vue的所有的数据都是放在data里面的，data的内容也是对象,通过data里面的数据可以实现双向绑定。
data:{
}
3.method method用于存放方法，它的内容也是对象，需要将对象声明称方法。常见的情况就是用来处理事件函数。
<div v-on="doSth"></div>
<script>
new Vue({
el:"#app",
data:{
message:"hello"
},
method:{
doSth:function(){
......
}
}
})
</script>
在这里通过一个指令，也就是v-on来绑定了一个点击事件，也可以通过缩写"@click"来绑定事件。
4.watch 可以用来监听，当监听的对象改变时，watch就会执行。
watch:{
‘a‘:function(){
......
}
}
二、模板指令
1.v-text，v-html：用于数据渲染，二者的区别与jQuery中的.html和.text相似。
2.v-if,v-show：用于控制模块显示和隐藏。不同的是，v-if直接移除元素，v-show通过display：none来隐藏元素。
3.v-for：渲染循环列表，通过in关键字，类似于加强版的for循环，v-for="book in books"，这里，book是循环时使用的变量，books是在
data中定义的数据。
4.v-on（@）：绑定事件。
5.v-bind：属性绑定。比较常用在class和src上，所以这两个属性可以简写，:class,:src="{key:code}:如果以对象的形式写，前面的key值就是
class本身的值，后面用于判断这个class是否展现，如果以数组的形式，则显示data中的数据。
总结：new一个vue对象的时候，可以设置它的属性，最常用的属性是data，method和watch
data代表vue对象的数据，method是vue对象的方法，watch设置了对象的监听方法。
vue对象里面的设置通过html指令进行关联。
常用的指令包括：v-text渲染数据
v-if控制显示
v-on绑定事件
v-for循环渲染等。<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> <input v-model="message"/> </div> <div id="app2"> <span v-bind:title="message">
<!--通过bind将message和title绑定在一起，当message改变时，title属性值也会改变，当鼠标悬浮在下面这段话上面时，会自动显示当前的系统时间-->
Hover your mouse over me for a new seconds to see my dynamically bound title </span> </div> <div id="app3"> <p v-if="seen">Now you see me</p> </div> <div id="app4"> <p v-show="show">Now you see me</p> </div> </body> <script> var demo = new Vue({ el:"#app", data:{ message:"hello world" } }); var app2 = new Vue({ el:"#app2", data:{ message:‘You loaded this page on‘ + new Date() } }); var app3 = new Vue({ el:"#app3", data:{ seen:false } }); var app4 = new Vue({ el:"#app4", data:{ show:false } }); </script> </html>
在这个例子中使用了基本的数据渲染，双向绑定和模块显示/隐藏。这里要注意v-if和v-show的区别，v-if会直接隐藏元素，并且元素的位置也会消失，v-show通过display:hidden;的方法来隐藏模块。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script> <style> </style> </head> <body> <div id="book"> <ul id="books" v-for="book in books"> <li>{{book.id}}</li> <li>{{book.name}}</li> <li>{{book.author}}</li> <li>{{book.price}}</li> </ul> <div id="addBook"> <h1>添加书籍</h1> <div class="name"> <label for="">书名</label><br/> <input type="text" v-model="book.name"/> </div> <div class="author"> <label for="">作者</label><br/> <input type="text" v-model="book.author"/> </div> <div class="price"> <label for="">价格</label><br/> <input type="text" v-model="book.price"/> </div> <input type="button" id="add" @click="addBooks" value="添加"/> <input type="button" id="remove" value="删除" @click="remove(book)"/> </div> </div> </body> <script> new Vue({ el:"#book", data:{ book:{ id:0, author:‘‘, name:‘‘, price:‘‘ }, books:[ { id:1, author:"曹雪芹", name:"红楼梦", price:32.0 },{ id:2, author:"施耐庵", name:"水浒传", price:30.0 },{ id:3, author:"罗贯中", name:"三国演义", price:24.0 },{ id:4, author:"吴承恩", name:"西游记", price:20.0 } ] }, methods:{ addBooks:function(){ this.book.id = this.books.length + 1; this.books.push(this.book); this.book = ‘‘; }, remove: function (book) { this.books.$remove(this.books[0]); } } }); </script> </html>
这个例子中，首先使用v-for来进行循环渲染，循环输出books中的数据，通过v-model将data中的book与input的内容进行了双向绑定，这样在我们改变input框中的内容时，数据会同时更新到book中，然后在vue的methods属性中，定义了addBooks方法，首先计算出新添加的书的id，然后通过push方法将当前的book添加到books数组中，然后将book清空，以便下一次添加操作。在删除按钮中有一个特殊符号"$"这是代表接下来的remove是数组的自带方法，不是data数据。
以上是关于vue框架的主要内容，如果未能解决你的问题，请参考以下文章