文档章节

Vue.js第三波,直接上代码

甄佰匠人
 甄佰匠人
发布于 2016/10/20 10:29
字数 957
阅读 42
收藏 0

Vue.js第三波,直接上代码

必须要写代码才能快速熟悉,学到 v-if 的时候就把我整蒙了,看教程还要问度娘,多方面寻找答案,才能真正了解框架性能。

html部分 ↓ 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <div class="col-md-8 col-md-offset-3">
                <h1>Vue demo</h1>
                <div id="app">
                    <div>{{message + 'Vue is awesome'}}</div>
                    <div>{{message.split('').reverse().join('')}}</div>
                    <input type="text" v-model="message"/>
                    <br />
                    <select v-model="selected"  multiple>
                        <option selected>a</option>
                        <option>b</option>
                        <option>c</option>
                    </select>
                    <br />
                    <span>Selected: {{ selected | json }}</span>
                    <br />
                    <table class="table table-striped text-right">
                        <tr class="info">
                            <td>序号</td>
                            <td>书名</td>
                            <td>作者</td>
                            <td>价格</td>
                            <td>操作</td>
                        </tr>
                        <tr class="success" v-for="book in books ">
                            <td>{{book.id}}</td>
                            <td>{{book.name}}</td>
                            <td>{{book.author}}</td>
                            <td>{{book.price}}</td>
                            <td><button class="btn btn-danger" @click="delBook(book)">删除</button></td>
                        </tr>
                    </table>
                    <button class="btn btn-success" @click="doSomething">doSomething</button>
                    <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>
                        <br />
                        
                    </div>
                    <input type="text" v-model="newTodo" @keyup.enter="addTodo"/>
                    <ul>
                        <li v-for="todo in todos">
                            <span>{{ todo.text }}</span>
                            <button @click="removeTodo($index)">X</button>
                        </li>
                    </ul>
                    <div>
                        a = {{ a }}, b = {{ b }}
                    </div>
                    <input type="text" v-model="a"/>
                    <div>
                        {{ fullName }}
                    </div>
                    <div>
                        {{ allName }}
                    </div>
                    <div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }">
                        对象语法,传对象
                    </div>
                    <div v-bind:class="classObject">
                        对象语法,绑定数据里的对象
                    </div>
                    <div v-bind:class="[classA,classB]">
                        数组语法,传数组
                    </div>
                    <div v-bind:class="[classA, isA ? classB : '']">
                        数组语法,三元表达式
                    </div>
                    <div v-bind:class="[classA, { 'classB': isA, 'classC': isA }]">
                        当有多个条件class时,可以在数组语法中使用对象语法
                    </div>
                    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
                        绑定内联样式,对象语法
                    </div>
                    <div :style="styleObject">
                        绑定内联样式,对象语法直接绑定一个样式对象
                    </div>
                    <div :style="[styleObjectA, styleObjectB]">
                        绑定内联样式,数组语法,多个样式对象应用到一个元素上
                    </div>
                    {{#if ok}}
                    <h1>Hello</h1>
                    {{if}}
                    <h1 v-if="ok">Yes</h1>
                    <h1 v-else>No</h1>
                    
                    <template v-if="ok">
                      <h1 :style="[styleObjectB]">Title</h1>
                      <p :style="[styleObjectB]">Paragraph 1</p>
                      <p :style="[styleObjectB]">Paragraph 2</p>
                    </template>
                    
                    <h1 v-show="ok">Hello!</h1>
                    
                    <div v-if="Math.random() > 0.5">
                      Sorry
                    </div>
                    <div v-else>
                      Not sorry
                    </div>
                    <custom-component v-show="condition">警告组件</custom-component>
                    <p v-show="!condition" class="btn btn-primary btn-block">这可能也是一个警告组件</p>
                    <ul>
                      <li v-for="item in items" :style="styleObject">
                        {{ item.message }}
                      </li>
                    </ul>
                    <h1>v-for遍历对象,用$index</h1>
                    <ul>
                      <li v-for="item in items">
                        {{ parentMessage }} - {{ $index }} - {{ item.message }}
                      </li>
                    </ul>
                    <div v-for="(index, item) in items">
                        {{ index }} {{ item.message }}
                    </div>
                    <div v-for="item of items">
                        {{ index }} {{ item.message}}
                    </div>
                    <ul>
                      <template v-for="item in items" track-by="id">
                        <li>
                            {{ item.message }}
                            <button class="btn btn-danger" @click="removeItem(item)">删除</button>
                        </li>
                        <li class="divider"></li>
                      </template>
                    </ul>
                    <h1>v-for遍历对象,除了$index,还可以用$key</h1>
                    <ul>
                        <li v-for="value in uname">
                            {{ $key }} : {{ value }}
                        </li>
                    </ul>
                    <div>
                        <h1>值域v-for</h1>
                        <span v-for="n in 10" :style="styleObjectB">{{ n }}</span>
                    </div>
                    
                </div>
            </div>
        </div>
        <script src="http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>


js部分 ↓

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello vue.js',
        a: 1,
        isA: true,
        isB: false,
        classObject: {
            'class-a': false,
            'class-b': true
        },
        classA: 'class-a',
        classB: 'class-b',
        classC: 'class-c',
        firstName: 'Foo',
        lastName: 'Bar',
        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
        }],
        newTodo: '',
        todos: [{
            text: 'Add some todos'
        }],
        activeColor: 'red',
        fontSize: 30,
        styleObject: {
            color: 'blue',
            fontSize: '12px',
            listStyle: 'none'
        },
        styleObjectA: {
            background: '#f1f1f1'
        },
        styleObjectB: {
            textAlign: 'center',
            color: '#7eccf3',
            fontWeight: 'bold'
        },
        ok: true,
        items: [
            { id: 1, message: '列表渲染' },
            { id: 2, message: 'Foo' },
            { id: 3, message: 'Bar' }
        ],
        parentMessage: 'Parent',
        uname: {
            firstName: 'John',
            lastName: 'Doe',
            age: 30
        }
        
    },
    methods: {
        doSomething: function () {
            window.location.href= 'http://www.jinxiaowang.cn'
        },
        addBook: function () {
            this.book.id = this.books.length + 1;
            this.books.push(this.book);
            this.book = '';
        },
        delBook: function (book) {
            this.books.$remove(book);
        },
        addTodo: function () {
            var text = this.newTodo.trim();
            if(text){
                this.todos.push({text:text});
                this.newTodo = '';
            }
        },
        removeTodo: function (index) {
            this.todos.splice(index,1);
        },
        removeItem: function (item) {
            this.items.$remove(item)
        }
    },
    created: function () {
        console.log('a is: ' + this.message);
    },
    computed: {
        b: function () {
            var x = parseInt(this.a, 10) + 2;
            return x;
        },
        fullName: function () {
            return this.firstName + ' ' + this.lastName;
        },
        allName: {
            get: function () {
                return this.firstName + ' ' + this.lastName;
            },
            set: function (nameValue) {
                var names = nameValue.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length - 1]
            }
        }
    }
    
});

//vm.$watch('firstName', function (val) {
//    this.fullName = val + ' ' + this.lastName;
//});
    
//vm.$watch('lastName',function (val) {
//    this.fullName = val + ' ' + this.firstName;
//});

//vm.items = vm.items.filter(function (item) {
//    return item.message.match(/Foo/)
//})
    
 

© 著作权归作者所有

甄佰匠人
粉丝 3
博文 154
码字总数 86632
作品 0
浦东
程序员
私信 提问
React与Vue模板使用比较(一、vue模板与React JSX比较)

前言 本人原为React开发者,现在转战Vue。在这些天接触Vue的日子里,说说自己的感觉:同样的登山活动,React就像父亲,给你必要的登山工具就让你出发了;Vue就像母亲,在你登山之前为你准备好...

barretem
03/05
0
0
TypeScript+Vue 插件vue-property-decorator的使用总结

首先 下载 一梭子直接干; 其次,咱来说说它们的区别与联系: vue-property-decorator社区出品;vue-class-component官方出品 vue-class-component提供了Vue、Component等; vue-property-d...

南山有台
2018/12/06
3K
0
【大型干货】手拉手带你过一遍vue部分源码

本文希望可以帮助那些想吃蛋糕,但又觉得蛋糕太大而又不知道从哪下口的人们。 一、如何开始第一步 将源码项目下来后,按照CONTRIBUTING中的中的顺序,逐个执行下来 学会看package.json文件,...

a独家记忆
2018/06/29
0
0
Vue响应式----数据响应式原理

前言 Vue的数据响应主要是依赖了,那么整个过程是怎么样的呢?以我们自己的想法来走Vue的道路,其实也就是以Vue的原理为终点,我们来逆推一下实现过程。 本文代码皆为低配版本,很多地方都不...

王兴欣
2018/10/29
0
0
vue、webpack 学习日志

github源码 通过一个小产品总结过去一段时间的学习。 vue 框架 webpack 打包单页面应用程序 产品效果 需求分解 第一页组件, 显示载入数据按钮点击之后显示第二页组件。 第二页嫌疑人详细信息...

Leon_Werth的技能树
2018/07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MainThreadSupport

MainThreadSupport EventBus 3.0 中的代码片段. org.greenrobot.eventbus.MainThreadSupport 定义一个接口,并给出默认实现类. 调用者可以在EventBus的构建者中替换该实现. public interface ...

马湖村第九后羿
27分钟前
2
0
指定要使用的形状来代替文字的显示

控制手机键盘弹出的功能只能在ios上实现,安卓是实现不了的,所以安卓只能使用type类型来控制键盘类型,例如你要弹出数字键盘就使用type="number",如果要弹出电话键盘就使用type="tel",但这...

前端老手
37分钟前
3
0
总结:Raft协议

一、Raft协议是什么? 分布式一致性算法。即解决分布式系统中各个副本数据一致性问题。 二、Raft的日志广播过程 发送日志到所有Followers(Raft中将非Leader节点称为Follower)。 Followers收...

浮躁的码农
44分钟前
3
0
Flask-admin Model View字段介绍

Model View字段介绍 can_create = True 是否可以创建can_edit = True 是否可以编辑can_delete = True 是否可以删除list_template = 'admin/model/list.html' 修改显......

dillonxiao
今天
5
0
从AnnotationTransactionAspect开始rushSpring事务

0. Spring 事务 with LTW 0.1. Spring 事务 With LTW的原因: Pure Proxy-base mode有缺陷,其失效原因分析及使用方法及运行机制(LoadTimeWeaverBeanDefinitionParser和 AspectJWeavingEnable......

Aruforce
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部