最简单的非模块化的vue笔记(转) · 武功秘籍大全

``` <!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="/css/bootstrap.min.css"> <script src="/js/vue.js"></script> <script src="/js/vue-router.js"></script> <script src="/js/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">  <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>  <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>  <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">×</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>  <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> ```