vue.js入门实例

（1）页面模板vue.js--快速入门DemoVue demo.......new Vue({el:'#app',data:''})

时光足迹

7693人浏览 · 2016-10-11 15:03:33

时光足迹 · 2016-10-11 15:03:33 发布

（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() {
		//计算书的id
		this.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:''
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^