vue.js入门实例

来源：互联网发布：手机腾讯视频网络错误1 编辑：程序博客网时间：2024/04/29 14:28

（1）页面模板

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>vue.js--快速入门Demo</title>    <script src="js/vue.min.js"></script>    <script src="js/vue-resource.js"></script>    <link href="css/bootstrap.min.css" rel="stylesheet"></head><body>    <div class="container"><div class="col-md-6 col-md-offset-3">    <h1>Vue demo</h1>    <div id="app">               .......    </div></div>    </div>    <script>        new Vue({            el:'#app',            data:''        })    </script></body></html>

(2)添加表格内容：v-for

        <div id="app">               <div class="table-responsive">                    <table class="table table-striped table-bordered table-hover table-condensed">                        <caption>基本的表格布局</caption>                        <thead>                            <tr>                                <th>序号</th>                                <th>书名</th>                                <th>作者</th>                                <th>价格</th>                                <th>操作</th>                            </tr>                        </thead>                        <tbody>                            <tr v-for="book in books">                                <td class="active">{{book.id}}</td>                                <td class="success">{{book.name}}</td>                                <td class="warning">{{book.author}}</td>                                <td class="danger">{{book.price}}</td>                                <td class="text-center">                                    <button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>                                </td>                            </tr>                        </tbody>                    </table>                </div></div>

 new Vue({            el:'#app',            data: {              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: {//方法                   delBook:function(book){                    /...../                }                            }        });    </script>

(3) 删除按钮的事件:v-on:click或者@click

  methods: {                               delBook:function(book){                    this.books.$remove(book);                }           }

（4）删除按钮单双行样式不同：template,v-if

 <template v-if="book.id%2==0"><!--模板-->         <td class="text-center">           <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>         </td> </template><template v-else>        <td class="text-center">          <button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>        </td></template>

(5)添加图书：v-model

<div id="add-book">                     <legend>添加书籍</legend>                     <div class="form-group">                          <label for="">书名</label>                          <input type="text" class="form-control" v-model="book.name">                     </div>                     <div class="form-group">                           <label for="">作者</label>                           <input type="text" class="form-control" v-model="book.author">                     </div>                     <div class="form-group">                             <label for="">价格</label>                             <input type="text" class="form-control" v-model="book.price">                      </div>                      <button class="btn btn-primary btn-block" @click="addBook()">添加</button> </div>

methods: {addBook: function() {//计算书的idthis.book.id = this.books.length + 1;this.books.push(this.book);//将input中的数据重置this.book = '';}}

(6)过滤器，添加自定义排序功能：filter

<tr v-for="book in books|orberBy sortparam"> <th class="text-right" @click="sortBy('id')">序号</th> <th class="text-right" @click="sortBy('name')">书名</th> <th class="text-right" @click="sortBy('author')">作者</th> <th class="text-right" @click="sortBy('price')">价格</th>

data: {    sortparam: '' },methods:{sortBy: function(sortparam) {        this.sortparam = sortparam;     }}

(7)vue-resource:通过 XMLHttpRequest 或 JSONP 发起请求并处理响应

new Vue({            el:'#app',            ready: function() {//页面加载完成时就去请求                               this.$http.get('json/book.json').then(function(response){                    // 响应成功回调                     this.$set('books',response.data);                }, function(response){                    // 响应错误回调                    console.log('fail');                });            }, data:{          books:''}

1 0