第十四周学习笔记和总结

2018-09-07 本文已影响0人水水壶

前段时间回老家办事，也算偷个懒，这周开始接触 Vue ，以及 Vue-router。

一、 Vue

1. 概述

原生 js 要改变页面上的数据，需要两步，先选中 Dom 对象然后修改值，而我们最终目的只是改变页面上的数据，vue可以一步完成，vue 将视图和数据绑定，我们只需要改变数据，页面就会自动刷新。

2. vue 基本用法

之前在 node 里用过 ejs 模板引擎，vue 部分功能和模板引擎很像，也可以在 html 里直接写变量，可以在 html 里写 if 判断和 for 循环。

变量赋值

<div id="app">
        <p>{{ message }}</p>
 </div>

<script>
 var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
</script>

属性绑定

<span v-bind:title="message"></span>      加上 v-bind 前缀，这里的 message 是个变量
<span title="message"></span>               这里的 message 是个字符串
title 属性：当鼠标移入元素上，显示 title 属性的值。

if 判断

<p v-if="seen">现在你看到我了</p>     
这里的 seen 是个变量，变量值为 true 元素就显示，变量值为 false 元素就不显示

for 循环

<li v-for="item in items">{{ item }}</li>    循环

事件监听

<div id="app">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
 var app = new Vue({
            el: '#app',       // el  =>   element
            data: {             // 放数据
                message: 'Hello Vue.js!'
            },
            methods: {          // 放方法
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
</script>

双向绑定
一般只有表单元素才会用双向绑定，从视图向数据，从数据向视图。

 <div id="app">
        <p>{{ message }}</p>
        <input v-model="message">
        
        <input type="radio" name="sex" value="男" v-model="sex">男
        <input type="radio" name="sex" value="女" v-model="sex">女
        <input v-if="sex === '女'" type="text" placeholder="请输入三维">
</div>
<script>
        // 把视图和数据绑定
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                sex: '男'
            }
        })
</script>

3. vue 定义组件

之前用 jquery 和 react 都写过一个表格组件，这里用 vue 也写了一个表格组件。

vue写的表格组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
    <div id="app" class="container">
        <yml-table class="table table-bordered" v-bind:thead="thead" v-bind:tbody="tbody"></yml-table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('yml-table', {
            props: ['thead', 'tbody'],
            template: `
                <table>
                    <thead>
                        <tr>
                            <th v-for='item in thead'>{{ item.title }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for='item in tbody'>
                            <td v-for='item2 in thead'>{{ item[item2.index] }}</td>
                        </tr>
                    </tbody>
                </table>
            `
        })

        var app = new Vue({
            el: '#app',
            data: {
                thead: [
                   { title: '口红', index: 'kouhong' },
                   { title: '手机', index: 'shouji' },
                ],
                tbody: [
                    { kouhong: '迪奥', shouji: '小米' },
                    { kouhong: '圣罗兰', shouji: '华为' },
                    { kouhong: 'ysl', shouji: '苹果' },
                ]


            }
        })
    </script>

</body>
</html>

二、vue-router

阅读 vue 官方文档的时候，点击左边某个标题，右边会显示该标题对应的文章，用vue-router 可以很方便的实现这个功能。左边标题就相当于 a 标签，点击会改变浏览器地址栏的最后一部分，如下图红框就是路由，右边显示该路由对应页面。

用 vue-router 写的一个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>路由</title>
    <style>
     *{
         margin: 0px;
         padding: 0px;
     }   
    .container{
        display: flex;
        height: 100vh;
        padding-top: 50px;
    }
    .left{
        width: 5vw;
    }
    .right{
        
    }ul{
        height: 120px;
        width: 100%;
        text-align: center;
    }
    li{
        list-style: none;
        margin-bottom:10px; 
        width: 100%;


    }
    router-link{
        text-decoration: none;
        font-size: 15px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <ul>
                <li>
                    <router-link to="/pic">图片</router-link>//相当于 <a href="/foo">Go to Foo</a>，跳转链接
                </li>
                <li>
                    <router-link to="/mine">简介</router-link>
                </li>
            </ul>
        </div>
        <div class="right">
                <router-view></router-view> // 路由对应的那个组件会替换router-view所在的位置
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
        const roters = new VueRouter({
            routes: [
                { path:'/pic', component:{ template:`<div><h1>这是图片</h1></div>` }},
                { path:'/mine', component:{ template:`<div><h1>这是介绍</h1></div>` }},
            ]
        })

        new Vue({
            el: '.container',
            router: roters
        })
    </script>
</body>
</html>