最简单的非模块化的vue笔记

来源：互联网发布：西瓜影音mac 编辑：程序博客网时间：2024/06/05 21:17
用了vue,vue-router,axios,会持续更新
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>demo</title>    <link rel="stylesheet" href="../lib/bower_components/bootstrap/css/bootstrap.min.css">    <script src="../vue/vue.js"></script>    <script src="../vue/vue-router.js"></script>    <script src="../vue/axios.min.js"></script></head><body><div class="container mt-2" id="app">    <router-link to="/home" class="btn btn-danger">Home</router-link>    <router-link to="/phone" class="btn btn-primary">Phone</router-link>    <router-link to="/student" class="btn btn-dark">Students</router-link>    <router-link to="/request" class="btn btn-info">HTTP</router-link>    <router-view></router-view></div><div id="tempate">    <!--home template-->    <template id="home">        <div>            <h1>Home</h1>            <div class="card card-block">                <h4 class="card-title">Home Message</h4>                <div class="card-text"><p>{{msg}}</p></div>                <div class="form-inline">                    <input type="text" class="form-control" id="new_home_msg" v-model="new_home_msg">                    <button class="btn btn-link" @click="change_msg">更改</button>                </div>            </div>        </div>    </template>    <!--phone template-->    <template id="phone">        <div>            <h1>Phone</h1>            <div class="card card-block">                <h4 class="card-title">{{name}}</h4>                <ul>                    <li v-for="brand in brands">{{brand}}</li>                </ul>                <div class="form-inline">                    <input type="text" class="form-control" v-model="input_brand_value">                    <button class="btn btn-outline-primary" @click="add_brand">添加品牌</button>                </div>            </div>        </div>    </template>    <!--student temlpate-->    <template id="student">        <div>            <h1>Student</h1>            <div class="card card-block">                <h4 class="card-title">{{name}}</h4>                <ul>                    <li v-for="(student,index) in students">{{student}} <span @click="del(index)" style="cursor: pointer">&times;</span></button></li>                </ul>                <div class="form-inline">                    <input type="text" class="form-control" v-model="input_student_value">                    <button class="btn btn-primary" @click="add_student">添加学生</button>                </div>            </div>        </div>    </template>    <!--request temlpate-->    <template id="request">        <div>            <h1>Request</h1>            <div class="card card-block">                <h4 class="card-title">{{name}}</h4>                <div class="card-text">                    {{content}}                </div>                <div class="card-footer">                    <button class="btn-dark btn" @click="send">发送请求</button>                </div>            </div>        </div>    </template></div></body></html><script>    var Home = Vue.component('home', {        template: '#home',        data: function () {            return {                msg: 'hello world',                new_home_msg: ''            }        },        methods:{            change_msg:function () {                this.msg = this.new_home_msg            }        }    });    var Phone = Vue.component('phone', {        template: '#phone',        data: function () {            return {                name: 'phone',                brands: ['Samsung', 'Apple', 'Nokia'],                input_brand_value:''            }        },        methods:{            add_brand:function () {                this.brands.push(this.input_brand_value)            }        }    });    var Student = Vue.component('student', {        template: '#student',        data: function () {            return {                name: 'student',                students: ['xiaoming', 'zhangsan', 'lisi'],                input_student_value:''            }        },        methods:{            add_student:function () {                this.students.push(this.input_student_value)            },            del:function (index) {                this.students.splice(index,1)            }        }    });    var Request = Vue.component('request',{        template:'#request',       data:function () {           return {               name:'Request',               content:''           }       },        methods:{            send:function () {                let self = this;                axios.get('http://httpbin.org/get').then(function (response) {                    self.content = JSON.stringify(response.data.headers)                })            }        }    });    var routes = [        {path:'/',redirect:'/home'},        {path: '/home', component: Home},        {path: '/phone', component: Phone},        {path: '/student', component: Student},        {path:'/request',component:Request}    ];    const router = new VueRouter({        routes    });    new Vue({        router,        el: '#app'    })</script>
阅读全文
0 0