Vue 学习——可直接运行代码（含有变量、if、for、监听、事件处理、表单、组件、ajax）
js：
代码：
01_变量使用
1 <%-- 2 Created by IntelliJ IDEA. 3 User: 13313 4 Date: 2021/4/22 5 Time: 22:54 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <script src="../assets/js/vue.global.prod.js"></script> 11 <script src="../assets/js/axios.min.js"></script> 12 13 <head> 14 <title>Title</title> 15 <script src="../assets/js/vue.min.js"></script> 16 </head> 17 <body> 18 <div id="vue_det"> 19 <h1>site : {{site}}</h1> 20 <h1>url : {{url}}</h1> 21 <%-- <h1>{{details()}}</h1>--%> 22 </div> 23 <%--<script type="text/javascript">--%> 24 <%-- var vm = new Vue({--%> 25 <%-- el: '#vue_det',--%> 26 <%-- data: {--%> 27 <%-- site: "菜鸟教程",--%> 28 <%-- url: "www.runoob.com",--%> 29 <%-- alexa: "10000"--%> 30 <%-- },--%> 31 <%-- methods: {--%> 32 <%-- details: function() {--%> 33 <%-- return this.site + " - 学的不仅是技术，更是梦想！";--%> 34 <%-- }--%> 35 <%-- }--%> 36 <%-- })--%> 37 <%--</script>--%> 38 <script type="text/javascript"> 39 // 我们的数据对象 40 var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000} 41 var vm = new Vue({ 42 el: '#vue_det', 43 data: data 44 }) 45 46 document.write(vm.$data === data) // true 47 document.write("<br>") 48 document.write(vm.$el === document.getElementById('vue_det')) // true 49 </script> 50 </body> 51 </html>
02_v_html_blind学习
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <style> 11 .class1 12 { 13 background: #0b7c3c; 14 color: #0e4cfd; 15 } 16 </style> 17 <head> 18 <title>Title</title> 19 <script src="../assets/js/vue.min.js"></script> 20 </head> 21 <body> 22 <div id="app"> 23 <!-- v-html用于输出html代码--> 24 <h1>{{test_val}}</h1> 25 <div v-html="message"></div> 26 <label for="r1">修改</label><input type="checkbox" v-model="use" id="r1"> 27 <br> 28 <div v-bind:class="{'class1':use}"> 29 修改指令 30 </div> 31 32 </div> 33 <script> 34 new Vue({ 35 el:"#app", 36 data:{ 37 use:false, 38 test_val:"aaa", 39 message:"<h3>周博</h3>" 40 } 41 }) 42 </script> 43 </body> 44 </html>
03_系统基础学习
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <style> 11 .class1 12 { 13 background: #0b7c3c; 14 color: #0e4cfd; 15 } 16 </style> 17 <head> 18 <title>Title</title> 19 <script src="../assets/js/vue.min.js"></script> 20 </head> 21 <body> 22 <div id="app"> 23 {{5+5}}<hr/> 24 {{OK?"True":"FALSE"}}<hr> 25 {{message.split('').reverse().join(' ')}} 26 <div v-bind:id="'list-'+id">{{id}}</div> 27 <h1>if语句</h1> 28 <p v-if="if_test">正确可看</p> 29 <h1>href链接获取</h1> 30 <a v-bind:href=url>博二爷博客园</a> 31 <h1>v-model双向数据绑定</h1> 32 <p>{{message}}</p> 33 <input v-model="message"> 34 <h1>监听click事件</h1> 35 <p>{{message}}</p> 36 <button v-on:click="reverseMessage()">监听click</button> 37 <h1>文件过滤器</h1> 38 {{message|capitalize()}} 39 <h1>缩写语法</h1> 40 <p> 41 v-on:click——》@click<br> 42 v-bind:href——》:href 43 </p> 44 </div> 45 <script> 46 47 new Vue({ 48 el:"#app", 49 data:{ 50 OK:false, 51 message:"RUNOOB", 52 id:1, 53 if_test:true, 54 url:"https://www.cnblogs.com/smartisn/", 55 }, 56 methods:{ 57 reverseMessage:function () { 58 this.message="监听click" 59 } 60 }, 61 filters:{ 62 capitalize:function (value) { 63 if(!value) return '' 64 value=value.toString() 65 return value.charAt(0).toUpperCase().slice(1)//slice数组切片 66 } 67 } 68 69 }) 70 </script> 71 </body> 72 </html>
04_if语句学习
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <head> 11 <title>Title</title> 12 <script src="../assets/js/vue.min.js"></script> 13 </head> 14 <body> 15 <div id="app"> 16 <h3>V-if学习</h3> 17 <p v-if="OK">OK正确可看</p> 18 <h3>V-else学习</h3> 19 <div v-if="Math.random() > 0.5"> 20 Sorry 21 </div> 22 <div v-else> 23 Not sorry 24 </div> 25 <h3>V-ELSE-IF学习</h3> 26 <div v-if="complete_type==='A'"> 27 A 28 </div> 29 <div v-else-if="complete_type==='B'"> 30 B 31 </div> 32 <div v-else> 33 NOTa|B 34 </div> 35 36 </div> 37 <script> 38 39 new Vue({ 40 el:"#app", 41 data:{ 42 OK:false, 43 seen:true, 44 complex_type:"A" 45 }, 46 methods:{ 47 48 } 49 }) 50 </script> 51 </body> 52 </html>
05_for循环
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <head> 11 <title>Title</title> 12 <script src="../assets/js/vue.min.js"></script> 13 </head> 14 <body> 15 <div id="app"> 16 <ul> 17 <li><h3>循环数组</h3></li> 18 <li v-for="site in sites"> 19 {{site.name}} 20 </li> 21 <li><h3>循环对象</h3></li> 22 <li v-for="value in object"> 23 {{value}} 24 </li> 25 <li><h3>循环键值</h3></li> 26 <li v-for="(value,key) in object"> 27 {{key}}: {{value}} 28 </li> 29 <li><h3>循环键值、索引</h3></li> 30 <li v-for="(value,key,index) in object"> 31 {{index}}。 {{key}}: {{value}} 32 </li> 33 <li><h3>迭代整数</h3></li> 34 <li v-for="n in 5"> 35 {{n}} 36 </li> 37 </ul> 38 </div> 39 <script> 40 new Vue({ 41 el:"#app", 42 data:{ 43 sites:[ 44 {name:'a1'}, 45 {name:'a2'} 46 ], 47 object:{ 48 name:'博二爷博客园', 49 url:'https://www.cnblogs.com/smartisn/', 50 slogan:'加油' 51 } 52 }, 53 methods:{ 54 55 } 56 }) 57 </script> 58 </body> 59 </html>
06_计算属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <head> 11 <title>Title</title> 12 <script src="../assets/js/vue.min.js"></script> 13 </head> 14 <body> 15 <div id="app"> 16 <h3>计算属性——computed</h3> 17 <p>原字符串：{{message}}</p> 18 <p>修改后的计算属性：{{reverseMessage}}</p> 19 <h3>Getter Setter 设置</h3> 20 {{name}}<br> 21 {{url}}<br> 22 <p>{{ site }}</p> 23 24 </div> 25 <script> 26 var vm=new Vue({ 27 el:"#app", 28 data:{ 29 message:'Zhou Bo', 30 name:'Google', 31 url:'https://www.cnblogs.com/smartisn/' 32 }, 33 computed:{ 34 reverseMessage:function () { 35 return this.message.split('').reverse().join(" ") 36 }, 37 site: { 38 get:function () { 39 return this.name +this.url 40 }, 41 set:function (newValue) { 42 var names=newValue.split(' ') 43 this.name=names[0] 44 this.url=names[names.length()-1] 45 } 46 } 47 48 } 49 }) 50 // 调用 setter， vm.name 和 vm.url 也会被对应更新 51 vm.site = '菜鸟教程 http://www.runoob.com'; 52 document.write('name: ' + vm.name); 53 document.write('<br>'); 54 document.write('url: ' + vm.url); 55 </script> 56 </body> 57 </html>
07_监听
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <head> 11 <title>Title</title> 12 <script src="../assets/js/vue.min.js"></script> 13 </head> 14 <body> 15 <div id="app"> 16 <h3>计数监听</h3> 17 数目： {{count}}<br> 18 <button @click="count++" >点击添加</button> 19 <!-- 到这一步已经实现了点击添加数据--> 20 <h3>千米、米单位换算</h3> 21 千米：<input type="text" v-model="m1"> 22 米：<input type="text" v-model="m2"> 23 </div> 24 <script> 25 var vm=new Vue({ 26 el:"#app", 27 data:{ 28 message:'Zhou Bo', 29 count:1, 30 m1:0, 31 m2:0 32 }, 33 watch:{ 34 m1:function (val) { 35 this.m1=val; 36 this.m2=this.m1*1000; 37 }, 38 m2:function (val) { 39 this.m2=val; 40 this.m1=this.m2/1000; 41 } 42 } 43 }) 44 /* 45 vm.$watch('count',function (nval,oval) { 46 alert('计数器变化：'+oval+"变为："+nval) 47 }) 48 */ 49 </script> 50 </body> 51 </html>
08_事件处理器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <head> 11 <title>Title</title> 12 <script src="../assets/js/vue.min.js"></script> 13 </head> 14 <body> 15 <div id="app"> 16 <button @click="say('nihao')">点击会话</button> 17 </div> 18 <script> 19 var vm=new Vue({ 20 el:"#app", 21 data:{ 22 message:'Zhou Bo', 23 count:1, 24 m1:0, 25 m2:0 26 }, 27 methods:{ 28 say:function (value) { 29 alert(value); 30 } 31 } 32 }) 33 34 </script> 35 </body> 36 </html>
09_表单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <head> 11 <title>Title</title> 12 <script src="../assets/js/vue.min.js"></script> 13 </head> 14 <body> 15 <div id="app"> 16 <h3>复选框——单个</h3> 17 <input type="checkbox" id="checkbox" v-model="check_one"> 18 <label for="checkbox">{{check_one}}</label> 19 <h3>复选框——多个</h3> 20 <input type="checkbox" id="chec_1" value="a1" v-model="checks"> 21 <label for="chec_1">a1</label> 22 <input type="checkbox" id="chec_2" value="a2" v-model="checks"> 23 <label for="chec_2">a2</label> 24 <input type="checkbox" id="chec_3" value="chec_3" v-model="checks"> 25 <label for="chec_3">chec_3</label> 26 <label>{{checks}}</label> 27 <h3>单选框</h3> 28 <input type="radio" id="o1" value="o1" v-model="radio_1"> 29 <label for="o1">o1</label> 30 <input type="radio" id="o2" value="o2" v-model="radio_1"> 31 <label for="o2">o2</label> 32 <label>{{radio_1}}</label> 33 <h3>列表</h3> 34 <select name="select" v-model="selected"> 35 <option>请选择</option> 36 <option value="网站">网站</option> 37 <option value="NW">NW</option> 38 </select> 39 <label>{{selected}}</label> 40 </div> 41 <script> 42 var vm=new Vue({ 43 el:"#app", 44 data:{ 45 check_one:false, 46 checks:[], 47 radio_1:'Check', 48 selected:[] 49 } 50 }) 51 52 </script> 53 </body> 54 </html>
10_组件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <head> 11 <title>Title</title> 12 <script src="../assets/js/vue.min.js"></script> 13 </head> 14 <body> 15 <div id="app"> 16 <!-- 全局组件--> 17 <Zb_whole></Zb_whole> 18 <!-- 局部组件--> 19 <Zb_self></Zb_self> 20 <h3>使用prop进行传值</h3> 21 <prop_translate message="传送"></prop_translate> 22 </div> 23 <script> 24 Vue.component('Zb_whole',{ 25 template:'<h3>全局组件</h3>' 26 }) 27 var Child={ 28 template:'<h3>局部组件</h3>' 29 } 30 Vue.component('prop_translate',{ 31 props:['message'], 32 template:'<span>{{message}}</span>' 33 }) 34 var vm=new Vue({ 35 el:"#app", 36 data:{ 37 check_one:false, 38 checks:[], 39 radio_1:'Check', 40 selected:[] 41 }, 42 components:{ 43 'Zb_self':Child 44 } 45 }) 46 47 </script> 48 </body> 49 </html>
11_ajax
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <html> 8 <script src="../assets/js/vue.global.prod.js"></script> 9 <script src="../assets/js/axios.min.js"></script> 10 <head> 11 <title>Title</title> 12 <script src="../assets/js/vue.min.js"></script> 13 </head> 14 <body> 15 <div id="app"> 16 INFO: {{info}} 17 </div> 18 <script> 19 var vm=new Vue({ 20 el:"#app", 21 data:{ 22 info:null 23 }, 24 mounted(){ 25 axios 26 // .get('../data/data.json') 27 .post('../data/data.json') 28 .then(response => (this.info =response.data.count)) 29 .catch(function (error){ 30 console.log(error); 31 }); 32 } 33 }) 34 /*执行多个并发请求 35 function getUserAccount() { 36 return axios.get('/user/12345'); 37 } 38 39 function getUserPermissions() { 40 return axios.get('/user/12345/permissions'); 41 } 42 axios.all([getUserAccount(), getUserPermissions()]) 43 .then(axios.spread(function (acct, perms) { 44 // 两个请求现在都执行完成 45 })); 46 */ 47 </script> 48 </body> 49 </html>
