一、初识Vue
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>初识Vue</title>
6 <script type="text/javascript" src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="root">
10 <h1>hello,{{name}}</h1>
11 </div>
12 </body>
13 <script>
14 // const x = new Vue({
15 // el:'#root',
16 // data:{
17 // name:"张三1"
18 // }
19 // })
20
21 // 1、el的两种写法
22 // const v = new Vue({
23 // // el:'',
24 // data:{
25 // name:"张三2"
26 // }
27 // })
28 // console.log(v)
29 //
30 // setTimeout(() => {
31 // v.$mount('#root')
32 // },1000);
33
34 // v.$mount('#root')
35
36 // 2、data的两种写法
37 // new Vue({
38 // el:'#root',
39 // data:{
40 // name:"张三3"
41 // }
42 // })
43
44 new Vue({
45 el: '#root',
46 data: function () {
47 console.log('@@@', this) //this是Vue实例对象
48 return {
49 name: "张三4"
50 }
51 }
52 })
53
54 </script>
55 </html>
二、模板语法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>初识Vue</title>
6 <script type="text/javascript" src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="root">
10 <h1>插值(标签体)</h1>
11 <h1>hello,{{name}}</h1>
12 <hr/>
13 <h1>指令(标签属性、标签体内容、绑定事件)</h1>
14 <a v-bind:href="school.url.toUpperCase()">学习{{school.name}}1</a>
15 <a :href="school.url">学习{{school.name}}2</a>
16 </div>
17 </body>
18 <script>
19 new Vue({
20 el: '#root',
21 data: {
22 name: "张三",
23 school: {
24 name: "李四",
25 url: "http://www.baidu.com/"
26 }
27 }
28 })
29
30 </script>
31 </html>
三、数据绑定
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>数据绑定</title>
6 <script type="text/javascript" src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="root">
10 <h1>普通写法</h1>
11 <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>-->
12 <!-- 双向数据绑定：<input type="text" v-model:value="name"><br/>-->
13 <h2>简写</h2>
14 单向数据绑定：<input type="text" :value="name"><br/>
15 双向数据绑定：<input type="text" v-model="name"><br/>
16 <!--v-model仅使用在表单数据中-->
17
18 </div>
19 </body>
20 <script>
21 new Vue({
22 el: '#root',
23 data: {
24 name: "张三",
25 }
26 })
27
28 </script>
29 </html>
四、数据代理
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>数据代理</title>
6 // vm(_data{name,address})
7 // 不用数据代理->{{_data.name}}}
8 // 用数据代理->{{name}}} 本质是getter和setter方法
9 // 通过vm对象代理data对象中属性的操作！！！！！！！！！！！
10 </head>
11 <body>
12
13 </body>
14 <script>
15 let number = 18
16
17 let person = {
18 name: "张三",
19 sex: "男"
20 }
21
22 Object.defineProperty(person, "age", {
23 // value:18,
24 // enumerable:true, // 是否枚举
25 // writable:true, // 是否修改
26 // configurable:true, //是否删除
27
28 get() {
29 console.log("读取age属性")
30 return number
31 },
32
33 set(value) {
34 console.log("修改age属性", value)
35 number = value
36 }
37
38 })
39 // for (let key in person) {
40 // console.log(person[key])
41 // }
42 console.log(person)
43 </script>
44
45 </html>
五、事件处理
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>事件处理</title>
6 <script src="js/vue.js"></script>
7 <style>
8 *{
9 margin-top: 20px;
10 }
11
12 .demo1{
13 height: 50px;
14 background-color: skyblue;
15 }
16
17 .box1{
18 padding: 5px;
19 background-color: skyblue;
20 }
21
22 .box2{
23 padding: 5px;
24 background-color: orange;
25 }
26 .list{
27 width: 200px;
28 height: 200px;
29 background-color: peru;
30 overflow: auto;
31 }
32 li{
33 height: 100px;
34 }
35
36 </style>
37
38
39 </head>
40 <body>
41 <div id="root">
42 <h1>你好，{{name}}</h1>
43 <button v-on:click="show1()">提示信息1（不传参）</button>
44 <button @click="show2($event,66)">提示信息2（传参）</button>
45
46 <!-- ################################################################ -->
47 <!-- 阻止默认时间 -->
48 <a href="http://www.baidu.com" @click.prevent="show3()">提示信息3</a>
49 <!-- 阻止事件冒泡 -->
50 <div class="demo1" @click="show3()">
51 <button @click.stop="show3()">提示信息3-1</button>
52 </div>
53 <!-- 事件只触发一次 -->
54 <button @click.once="show3()">提示信息3-2</button>
55 <!-- 使用事件的捕获模式 -->
56 <div class="box1" @click.capture="showMsg(1)">
57 div1
58 <div class="box2" @click="showMsg(2)">
59 div2
60 </div>
61 </div>
62 <!-- 只有event.target是当前操作的元素时才触发事件 -->
63 <div class="demo1" @click.self="show4()">
64 <button @click="show4()">提示信息4</button>
65 </div>
66 <!-- 事件的默认行为立即执行，无需等待事件回溯执行完毕 -->
67 <ul @wheel.passive="demo()" class="list"> // @scroll="demo()"
68 <li>1</li>
69 <li>2</li>
70 <li>3</li>
71 <li>4</li>
72 </ul>
73
74 </div>
75 </body>
76 <script>
77 const vm = new Vue({
78 el:'#root',
79 data:{
80 name:"张三",
81 },
82 methods:{
83 show1(){
84 // console.log(event.target)
85 // console.log(event.target.innerText)
86 alert("提示信息1（不传参）")
87 },
88 show2(event,number){
89 console.log(event,number)
90 alert("提示信息2（传参）")
91 },
92 show3(){
93 alert("提示信息3")
94 },
95 showMsg(msg){
96 console.log(msg)
97 },
98 show4(){
99 // console.log(event.target)
100 alert("提示信息4")
101 },
102 demo(){
103 for (let i = 0; i < 10000; i++) {
104 console.log("@")
105 }
106 console.log("累")
107 },
108
109 }
110 })
111 </script>
112 </html>
六、计算属性
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>计算属性</title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="root">
10 姓：<input type="text" v-model="firstName"> <br><br>
11 名：<input type="text" v-model="lastName"> <br><br>
12 全名：<span>{{fullName}}</span><br><br>
13 全名：<span>{{fullName2}}</span><br><br> // 简写，不需要括号，不是函数！！！！！！！
14 </div>
15 </body>
16 <script>
17 const vm = new Vue({
18 el:'#root',
19 data:{
20 firstName:"张",
21 lastName:"三"
22 },
23 computed:{
24 //与methods相比，computed存在缓存机制
25 fullName:{
26 // get什么时候调用？
27 // 1、初次读取fullName时 2、所依赖的数据发生变化时
28 get(){
29 return this.firstName+"-"+this.lastName;
30 },
31 // set什么时候调用？ 当fullName被修改时
32 set(value){
33 // console.log(value)
34 const arr = value.split("-")
35 this.firstName = arr[0]
36 this.lastName = arr[1]
37 }
38 },
39 fullName2(){ //简写
40 return this.firstName+"-"+this.lastName;
41 }
42 }
43 })
44
45 </script>
46
47 </html>
七、监视属性
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>监视属性</title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="root">
10 <h2>今天天气很{{info}}</h2>
11 <!-- <button @click="flag = !flag">点击切换</button>-->
12 <button @click="changeWeather">点击切换</button>
13 <br>
14 <h3>a的值是{{number.a}}</h3>
15 <button @click="number.a++">点击一下a++</button>
16 <h3>b的值是{{number.b}}</h3>
17 <button @click="number.b++">点击一下b++</button>
18 </div>
19 </body>
20 <script>
21 const vm = new Vue({
22 el:'#root',
23 data:{
24 flag:true,
25 number:{
26 a:1,
27 b:1,
28 }
29 },
30 computed:{
31 info(){
32 return this.flag ? "炎热":"凉爽"
33 }
34 },
35 methods:{
36 changeWeather(){
37 return this.flag = !this.flag;
38 }
39 },
40 watch:{
41 flag:{ //正常写法
42 // immediate:true, //初始化时让handler调用一下
43 handler(newValue,oldValue){ // flag发生改变时调用
44 console.log("flag被修改了",newValue,oldValue)
45 }
46 },
47
48 // flag(newValue,oldValue){ //简写(不能配置其他)
49 // console.log("flag被修改了",newValue,oldValue)
50 // },
51
52 "number.a":{ // 多级结构
53 handler(newValue,oldValue){ // flag发生改变时调用
54 console.log("a被修改了",newValue,oldValue)
55 }
56 },
57
58 number: { //所有属性变化
59 deep:true,
60 handler(newValue,oldValue){
61 console.log("number被修改了",newValue,oldValue)
62 }
63 }
64
65 }
66 })
67
68 // vm.$watch("flag",{ //正常写法
69 // immediate:true, //初始化时让handler调用一下
70 // handler(newValue,oldValue) { // flag发生改变时调用
71 // console.log("flag被修改了",newValue,oldValue)
72 // }
73 // })
74
75 // vm.$watch("flag",function (newValue, oldValue) { //简写(不能配置其他)
76 // console.log("flag被修改了",newValue,oldValue)
77 // })
78
79 </script>
80 </html>
八、计算属性与监视
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>计算属性与监视</title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="root">
10 姓：<input type="text" v-model="firstName"> <br><br>
11 名：<input type="text" v-model="lastName"> <br><br>
12 全名：<span>{{fullName}}</span><br><br>
13 </div>
14 </body>
15 <script>
16 // computed能完成的功能，watch都可以完成；watch能完成的功能，computed不一定能完成
17 // Vue管理的函数最好写成普通函数；不被Vue管理的函数（定时器）最好写成箭头函数！！！！！！！！！
18 const vm = new Vue({
19 el:'#root',
20 data:{
21 firstName:"张",
22 lastName:"三",
23 fullName:"张-三"
24 },
25 watch:{
26 firstName(val){
27 setTimeout(()=>{
28 this.fullName = val + "-" + this.lastName
29 },1000)
30 },
31 lastName(val){
32 this.fullName = this.firstName + "-" + val
33 }
34 }
35 })
36
37 </script>
38 </html>
九、绑定样式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绑定样式</title>
6 <script src="js/vue.js"></script>
7 <style>
8 .basic{
9 width: 400px;
10 height: 100px;
11 border: 1px solid black;
12 }
13 .happy{
14 border: 4px solid red;;
15 background-color: rgba(255, 255, 0, 0.644);
16 background: linear-gradient(30deg,yellow,pink,orange,yellow);
17 }
18 .sad{
19 border: 4px dashed rgb(2, 197, 2);
20 background-color: gray;
21 }
22 .normal{
23 background-color: skyblue;
24 }
25
26 .at1{
27 background-color: yellowgreen;
28 }
29 .at2{
30 font-size: 30px;
31 text-shadow:2px 2px 10px red;
32 }
33 .at3{
34 border-radius: 20px;
35 }
36 </style>
37 </head>
38 <body>
39
40 <div id="root">
41 <!--绑定class样式-->
42 <!-- 字符串写法，适用于样式类名不确定，需动态获取-->
43 <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br> <br>
44 <!-- 数组写法，适用于绑定样式个数不确定，名字不确定-->
45 <div class="basic" :class="classArr">{{name}}</div> <br> <br>
46 <!-- 对象写法，适用于绑定样式个数确定，名字确定，但要动态决定-->
47 <div class="basic" :class="classObj">{{name}}</div> <br> <br>
48
49 <!--绑定style样式-->
50 <!-- 对象写法 -->
51 <div class="basic" :style="styleObj">{{name}}</div> <br> <br>
52 <!-- 数组写法 -->
53 <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> <br> <br>
54 </div>
55 </body>
56
57 <script>
58 new Vue({
59 el:'#root',
60 data:{
61 name:'哈哈',
62 mood:'normal',
63 classArr:['at1','at2','at3'],
64 classObj:{
65 at1:false,
66 at2:false
67 },
68 styleObj:{
69 fontSize:'40px', //font-size
70 color:"red"
71 },
72 styleObj2:{
73 backgroundColor:"orange"
74 }
75 },
76 methods:{
77 changeMood(){
78 const arr = ['happy','sad','normal']
79 this.mood = arr[Math.floor(Math.random()*3)]
80 }
81 }
82 })
83 </script>
84 </html>
十、条件渲染
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>条件渲染</title>
6 <script src="js/vue.js"></script>
7 </head>
8 <body>
9
10 <div id="root">
11 <h2>当前的n值为{{n}}</h2>
12 <button @click="n++">点击我n+1</button>
13 <!-- v-show会使页面代码存在-->
14 <!-- <div v-show="false">欢迎来到{{name}}</div>-->
15 <!-- <div v-show="1===1">欢迎来到{{name}}</div>-->
16
17 <!-- v-if会使页面代码消失-->
18 <!-- <div v-if="false">欢迎来到{{name}}</div>-->
19 <!-- <div v-if="1===1">欢迎来到{{name}}</div>-->
20
21 <!-- <div v-if="n===1">Angular</div>-->
22 <!-- <div v-if="n===2">React</div>-->
23 <!-- <div v-if="n===3">Vue</div>-->
24
25 <!-- <div v-if="n===1">Angular</div>-->
26 <!-- <div v-else-if="n===1">React</div>-->
27 <!-- <div v-else-if="n===3">Vue</div>-->
28 <!-- <div v-else>哈哈</div>-->
29
30 <template v-if="n===1">
31 <div>Angular</div>
32 <div>React</div>
33 <div>Vue</div>
34 </template>
35 </div>
36 </body>
37 <script>
38 new Vue({
39 el:'#root',
40 data:{
41 n:0,
42 name:'中国',
43 }
44 })
45 </script>
46 </html>