vue.js javascript

Vue.js实战案例

最新推荐文章于 2022-09-23 10:24:36 发布

转载最新推荐文章于 2022-09-23 10:24:36 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mellen/blog/845349

文章标签：

#javascript #json #ViewUI

本文通过一个具体的示例展示了Vue.js的基本用法，包括双向数据绑定、条件渲染、列表渲染及组件化等特性，并介绍了如何使用Vue-resource进行HTTP请求，实现与后端的数据交互。

为什么80%的码农都做不了架构师？>>>

相比 angular js react 来说，vue.js 是轻量化，容易上手，这对于普通公司来说是节约成本的。新人老人都上手快，新人老人之间互相交流更容易。

做产品一要可用二要低成本。不一定要大而全的如angular js。适用就好。

摘录例子可看出便捷之处

<!DOCTYPE html>

<html>

            <fieldset>
                <legend>
                    Create New Person
                </legend>
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" v-model="newPerson.name"/>
                </div>
                <div class="form-group">
                    <label>Age:</label>
                    <input type="text" v-model="newPerson.age"/>
                </div>
                <div class="form-group">
                    <label>Sex:</label>
                    <select v-model="newPerson.sex">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                </div>
                <div class="form-group">
                    <label></label>
                    <button @click="createPerson">Create</button>
                </div>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="person in people">
                    <td>{{ person.name }}</td>
                    <td>{{ person.age }}</td>
                    <td>{{ person.sex }}</td>
<td :class="'text-center'"><button @click="deletePerson($index)">Delete</button></td>
                </tr>
            </tbody>
        </table>
        </div>
    </body>

</html>

---------------------------------------服务端交互

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script type="text/javascript" src='http://cdnjsnet.b0.upaiyun.com/vue-resource/0.1.9/vue-resource.min.js'></script>
<div id='app'></div>
<script>
new Vue({
    el: '#app',
    ready: function() {
        this.$http.get('test.json', function(data) {
            this.$set('json', data);
        }).error(function(data, status, request) {
            console.log('fail' + status + "," + request);
        })
    },
    data: {
    }
});
</script>

GET请求

var demo = new Vue({

el: '#app',

data: {

gridColumns: ['customerId', 'companyName', 'contactName', 'phone'],

gridData: [],

apiUrl: 'http://211.149.193.19:8080/api/customers'

},

ready: function() {

this.getCustomers()

},

methods: {

getCustomers: function() {

this.$http.get(this.apiUrl)

.then((response) => {

this.$set('gridData', response.data)

})

.catch(function(response) {

console.log(response)

})

}

})

JSONP请求

getCustomers: function() {

this.$http.jsonp(this.apiUrl).then(function(response){

this.$set('gridData', response.data)

})

}

POST请求

var demo = new Vue({

el: '#app',

data: {

show: false,

gridColumns: [{

name: 'customerId',

isKey: true

}, {

name: 'companyName'

}, {

name: 'contactName'

}, {

name: 'phone'

}],

gridData: [],

apiUrl: 'http://211.149.193.19:8080/api/customers',

item: {}

},

ready: function() {

this.getCustomers()

},

methods: {

closeDialog: function() {

this.show = false

},

getCustomers: function() {

var vm = this

vm.$http.get(vm.apiUrl)

.then((response) => {

vm.$set('gridData', response.data)

})

},

createCustomer: function() {

var vm = this

vm.$http.post(vm.apiUrl, vm.item)

.then((response) => {

vm.$set('item', {})

vm.getCustomers()

})

this.show = false

}

})

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>vue js</title>

<style>

.completed {

text-decoration: line-through;

}

.something {

color: red;

}

</style>

</head>

<body>

<div class="container">

<div id="app">

<task-app :list="tasks">

</task-app>

</div>

<template id="task-template">

<ul>

<li v-for="task in list">

{{ task.id }} | {{ task.author }} | {{ task.name }} | {{ task.price }}

</li>

</ul>

</template>

<script src="vue.js"></script>

<script src="vue-resource.js"></script>

<script>

Vue.component('task-app', {//要应用的标签

template: '#task-template',//模板id

props: ['list']//请求的json

})

</script>

<script>

var demo = new Vue({

el: '#app',

data: {

tasks: '' //为空，可以是null

},

ready: function() {

this.getCustomers()

},

methods: {

getCustomers: function() {

this.$http.get('resourse.json')

.then(function(response) { //response传参，可以是任何值

this.$set('tasks', response.data)

})

.catch(function(response) {

console.log(response)

})

}

})

</script>

</body>

</html>

转载于:https://my.oschina.net/mellen/blog/845349