VUE-03 数据响应
一、基本数据类型
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 head> 7 <body> 8 <div id="app"> 9 10 11 {{msg}} 12 13 14 <div v-text="msg">div> 15 16 17 <div v-once> 18 {{msg}} 19 <h2>{{msg}}h2> 20 div> 21 22 24 <div v-html="p">div> 25 26 div> 27 28 <script src="./node_modules/vue/dist/vue.js">script> 29 <script> 30 let vm = new Vue({ 31 el:'#app', 32 data:{ 33 msg:'hello,world!', 34 p:'html段落
' 35 } 36 37 }); 38 39 script> 40 body> 41 html>
二、对象{}
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>对象{}title> 6 head> 7 <body> 8 <div id="app"> 9 10 {{a.school}} 11 {{a.age}} 12 div> 13 14 <script src="./node_modules/vue/dist/vue.js">script> 15 <script> 16 // vue 会循环data中的数据（数据劫持） 依次的增加getter和setter 实现数据的响应变化 17 let vm = new Vue({ 18 el:'#app', 19 data:{ 20 a:{school:''} // 1、使用变量时先初始化，否则新加载的属性不会导致页面刷新 21 } 22 23 }); 24 // 2、此方法可以给对象添加属性，发生响应式的变化 25 vm.$set(vm.a,'age',1); 26 // 3、替换原对象 27 vm.a = {name:'高考',age:18,school:'一中'} 28 29 script> 30 body> 31 html>
三、数组[]
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数组[]title> 6 head> 7 <body> 8 <div id="app"> 9 {{arr}} 10 {{arr[1]}} 11 div> 12 13 <script src="./node_modules/vue/dist/vue.js">script> 14 <script> 15 let vm = new Vue({ 16 el:'#app', 17 data:{ 18 arr:[1,2,3,4,5] 19 } 20 21 }); 22 // 去改变数组中的某一项是监控不到的,也不能适用改变数组长度的方法 23 // 错误：vm.arr[0] = 100; vm.arr.length -= 2; 24 // 变异方法：pop push shift unshift sort reverse splice 改变数组 25 vm.arr.reverse(); 26 // 赋予新值 27 vm.arr = vm.arr.map(item => item*=3); 28 script> 29 body> 30 html>
循环 v-for
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数组的循环title> 6 head> 7 <body> 8 9 10 <div id="app"> 11 12 <ul> 13 14 15 <li v-for="(fruit,index) in fruits">{{index+1}}.{{fruit.name}} 16 <ul> 17 <li v- v-for="c,i in fruit.color">{{index+1}}.{{i+1}}{{c}}li> 18 ul> 19 li> 20 ul> 21 22 <div v-for="l in 'abc'">{{l}}div> 23 <div v-for="n in 10">{{n}}div> 24 <div v-for="v,k,i in obj">{{i}}:{{k}}:{{v}}div> 25 div> 26 27 <script src="./node_modules/vue/dist/vue.js">script> 28 <script> 29 let vm =new Vue({ 30 el:'#app', 31 data:{ 32 obj:{name:'小明',age:10}, 33 fruits:[ 34 {name:'香蕉',color:['yellow']}, 35 {name:'苹果',color:['red','green','pink']}, 36 {name:'葡萄',color:['purple','green']} 37 ] 38 } 39 }) 40 41 script> 42 body> 43 html>