note_2：vue.js深入浅出_2

Vue.js_2参考网易云课堂：Vue深入浅出（从入门到开发）官网：jsonplaceholdergithub：多页面vue目录Vue.js_2DEMO：简单用户管理1. 创建新组件2. 初始化3. 管理用户信息（1）展示用户信息（2）添加用户信息（3）删除用户信息（4）补充新样式4. 添加路由（1）安装vue-router（2）设置路...

Champagne&Caviar

3797人浏览 · 2018-04-29 18:17:30

Champagne&Caviar · 2018-04-29 18:17:30 发布

Vue.js深入浅出_2

参考

Vue.js深入浅出_2
- DEMO：简单用户管理

DEMO：简单用户管理

1. 创建新组件

components目录下创建Users.vue
将Test.vue里面的内容拷过去，删除部分的代码剩下空白项目

在Test.vue中，

<template>
    <div class="users">
        <h1>Users</h1>
    </div>
</template>

<script>
    export default {
        name: "users",
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style scoped>
</style>

修改App.vue

在App.vue中，

<template>
    <div id="app">
        <users></users>
    </div>
</template>

<script>

import Test from './components/test'
import Users from './components/users'

export default {
    name: 'app',
    components: {
        Test,Users
    }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2. 初始化

在Users.vue里面添加用户数据

data中添加users数组

data() {
    return {
        // 数组对象
        users:[
            {
                name:"Hemiah Wu",
                email:"hemiah@gmail.com",
                contacted:false
            },
            {
                name:"Henry Wu",
                email:"genry@gmail.com",
                contacted:false
            },
            {
                name:"Emily Wu",
                email:"emily@gmail.com",
                contacted:false
            }
        ]
    }
}

3. 管理用户信息

（1）展示用户信息

用到note_1的v-for

<!-- 展示用户信息 -->
<!-- 用到http时利用jsonplaceholder中的users -->

<ul>
    <li v-for="user in users">
        {{user.name}} : {{user.email}}
    </li>
</ul>

（2）添加用户信息

利用form表单和v-on:submit事件
利用v-model绑定用户信息，包括name和email

<!-- 添加用户信息（表单） -->
<form v-on:submit="addUser">
    <input type="text" v-model="newUser.name" placeholder="Enter name">
    <input type="text" v-model="newUser.email" placeholder="Enter email">

    <!-- methods里面要取消submit的默认事件 -->
    <input type="submit" value="Submit">
</form>

data里面要增加newUser，否则console会报错
添加的newUser只要是空的对象就可以的，因为v-model是自动绑定input框里输入的数据，然后将对应的name和email放到对象newUser里面。

// 用来绑定新的数据
newUser:{}

methods里面要添加新方法addUser
要取消submit的默认提交事件，否则看不到console log打印的hello
addUser拿到newUser的name和email并放入users数组里。
放入数组的方法可以用push()。
获取当前newUser需要用到this.newUser

addUser:function(e) {
    //console.log("hello");
    // 数组内加入新元素
    this.users.push({
        name:this.newUser.name,
        email:this.newUser.email,
        contacted:false
    });

    // 取消默认事件
    e.preventDefault();
},

（3）删除用户信息

添加删除按钮
v-on:click点击事件
要传递对象user给deleteUser()，以便后续的删除

<!-- 展示用户信息 -->
<!-- 用到http时利用jsonplaceholder中的users -->
<ul>
    <li v-for="user in users">
        {{user.name}} : {{user.email}}
        <button v-on:click="deleteUser(user)">x</button>
    </li>
</ul>

methods里面也要添加deleteUser()
为了获取当前点击的要删除的user，要用到this.users。
删除users里面的特定元素，可以利用splice()方法。
要获得users的下标就要用到indexOf()。

deleteUser:function(user) {
    // console.log("hello");
    this.users.splice(this.users.indexOf(user), 1);
}

（4）补充新样式

给用户信息栏加上新样式
在每条信息前面加上checkbox，只要点击checkbox就会更改contacted的值
需要v-model和contacted绑定
只要contacted 的值变成true，就会有横线划过信息
所以span需要绑定一个class样式，当值为真的时候，样式会成立，否则没有。

<!-- 展示用户信息 -->
<ul>
    <li v-for="user in users">
        <input type="checkbox" class="toggle" v-model="user.contacted">
        <!-- span绑定class用冒号 -->
        <span :class="{contacted:user.contacted}">
            {{user.name}} : {{user.email}}
            <button v-on:click="deleteUser(user)">x</button>
        </span>
    </li>
</ul>

样式也要进行更改，和css类似，.contacted表示class，属性text-decoration设置横线从中间划过

<!-- 分域 -->
<style scoped>
    .contacted {
        text-decoration: line-through;
    }
</style>

4. 添加路由

因为当前有Test.vue和Users.vue，需要用到路由来链接页面

（1）安装vue-router

开cmd或者gitbash或者别的

$ npm install vue-router --save

脚手架：详情见Folder Structure

（2）设置路由

在main.js中

为了让路由起效，所以要引入路由模块vue-router
引入的时候，如果不是自己创建而是系统创建好的话，就可以直接写from 'vue-router'，否则要加上文件路径from './.../vue-router'

// 如果是引用系统本身的话就直接引入
// 如果是自己另外建的包就要像之前那样用'./'
import VueRouter from 'vue-router'

还需要使用中间件Vue.use()

Vue.use(VueRouter)

创建VueRouter对象
mode用于地址栏上的./...跳转
base用于记录当前路径，所以用__dirname表示当前路径
routes对象是一个数组，包含path
path里面填写\...和component，意味着所到的路径执行哪一个组件

// 设置路由
const router = new VueRouter({
    mode:'history',
    base:__dirname,
    routes:[
        // component写执行的主件:Users或Test
        {path:"/", component:Users},
        {path:"/test", component:Test}
    ]
})

修改new Vue
router是为了包含这个对象，对应const router，否则程序运行时系统会报错找不到对象
原本的el:'#app'表示元素，可以删除，并把#app绑定到Vue后
原本的template: '<App>'是指直接进入到App里面，起不到路由的作用，所以这里直接改掉。
中间'``'符号是es6的语法，是一种模板语法，在里面写对应的标签而不用拼接。
router-link要填写路由的路径，和前面设置路由的routes里面的path填写的一样。相当于<a>，可以通过点击显示的Users或Test来跳转到特定的页面。
<router-view></router-view>是指触发之后执行，跟之前写的<users></users>和<test></test>是一样的用法。

/* eslint-disable no-new */
new Vue({
    router,
    // 不能直接用App，因为这里进入路由
    // router-view是触发路由之后让它可以执行
    // router-link相当于a标签，告诉它路由到哪里
    template: `
        <div id="app">
            <ul>
                <li>
                    <router-link to="/">Users</router-link>
                    <router-link to="/test">Test</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    `
}).$mount("#app")
// 有了路由之后，网页上必须要有可点击的东西
// 所以删掉原本Vue里面的el，把#app写到后面绑定上

需要引入Users和Test组件，否则程序无法找到这两个组件，无法运行
components已经可以删掉了，因为前面写了引入组件，也写了路由来执行，所以不需要写components来执行。

import Users from './components/Users'
import Test from './components/Test'

运行后会发现，页面上方会出现Users和Test，页面的内容为Users的内容。
当点击Users时会跳转到Users页面，点击Test时会跳转到Test页面，对应<router-link>。

5. 使用HTTP请求

（1）安装vue-resource

开cmd或者gitbash或者别的

$ npm install vue-resource --save

脚手架：详情见Folder Structure

（2）设置VueResource

和添加路由的步骤类似，先引入vue-router模块和Vue.user()

// http时要用到的模块
import VueResource from 'vue-resource'
Vue.use(VueResource)

在Users.vue中使用HTTP请求

可以不用Users.vue里面的data数据，而改用网上提供好的数据jsonplaceholder的/users，里面已经提供了10条相关数据
为了拿到数据，要在export default里面再引入属性created
created:function(){}是可以直接自己执行的，不需要手动写代码调用
get后面写的是需要获取数据的地址，也就是jsonplaceholder/user
then()表示请求完之后再调用这个方法，这里then(function(){})中的function(){}是一个回调函数
从控制台中可以看到，用户的信息都被打印出来了（id，name，username……），所以我们需要拿到这十个对象里面的相关数据response.data，并且赋值给users

// 不需要调用，它可以直接执行
created:function() {
    // console.log("Hello World!!!!");
    this.$http.get("http://jsonplaceholder.typicode.com/users").then(function(response) {
    // 从控制台上可以看到我们要的数据出现在data里
    //console.log(response.data);
    // 要把拿下来的十个object赋值给users
    this.users = response.data;
    })
}