Vue.js深入浅出_2

---

参考

• 网易云课堂：Vue深入浅出（从入门到开发）
• 官网：jsonplaceholder
• github：多页面vue

---

目录

---

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;
    })
}

• 保存后（刷新）会发现页面上显示出十条用户数据
• 但是因为jsonplaceholder拿下来的数据里没有contacted，所以点击checkbox之后不会有横线划过信息，style里面的设置失效。

---