Vue笔记

第一章:Vue环境搭建

1.搭建Vue环境

vue 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    1.引入Vue.js-->
    <script src="1.vue.js"></script>
</head>
<body>


<script type="text/javascript">
    Vue.config.productionTip=false//阻止Vue在启动时 生成生产提示
</script>



</body>
</html>

2.helloWorld(插值语法)

vue 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  1.引入Vue.js-->
  <script src="1.vue.js"></script>
</head>
<body>



<!--2.准备好一个容器-->
<div id="root">

<!--  使用插值语法:插入一个值  两组花括号-->
  <h1>hello  {{name}} </h1>
</div>


<script>

  Vue.config.productionTip=false;//设置关闭生产者提示


//  全局多了Vue这个构造函数  因此可以 使用new去用

  const i=new Vue({
    el:"#root",  //对象第一个属性:匹配容器和实例  el用于指定当前vue实例为那个容器服务  值通常为css选择器字符串


  // el:document.getElementById("root")//也可以这样子
    data:{
    //  在来个对象  对象里面可以存任意数据类型的对象

      /*    因此data中用来存储数据 数据提供给data使用
      *           值  我们先暂时写成对象的形式 {}
      * 
      * */
      
      name:'计算机科学与技术'

    }

  })//创建Vue实例  参数传递一个  叫做配置对象
  
</script>
</body>
</html>
vue 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


<!--    Vue2.0练习-->

<!--    1.先引入Vue文件-->
    <script src="../1.Vue教程/1.vue.js">
    </script>

</head>
<body>

<!--2.准备一个容器   注意空格数据需要使用插值语法-->
<h1 id="root">你好  {{data}} </h1>


<!--3.准备script-->
<script>

<!--    生成一个vue实例 构造函数里面需要传递参数  只有一个参数 叫做配置对象-->
    let vue = new Vue(
        {
            el:"#root",//注意在js中 对象值之间使用逗号连接  注意这里只能是el  按照教程来

        //    接着书写数据 因为数据是要放在标签中显示的 因此最好使用对象
            data:{
                name: "计算机科学与技术"

            }

        }

    );


</script>


</body>
</html>
vue 复制代码
1.创建一个Vue实例 传递一个配置对象
2.root容器中的代码依然符合html代码规范 只不过混入一些特殊的Vue
3.root容器代码称为Vue模板
4.Vue的实例和容器是一一对应的
5.在开发中 只有一个Vue实例 并且配合着组件一起使用
6.{{XXX}} XXX是js中语句  对象.属性  直接写对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../1.Vue教程/1.vue.js"></script>

</head>
<body>


<h1 class="root">你好 !{{name}}  {{address}} {{day}}</h1>


<script>

  new Vue({

    el:".root",

    data: {
      name: "计算机科学与技术",
      address: "云南 昆明",
      day: "星期一!"


    }
  })
  
</script>
</body>
</html>
vue 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../1.Vue教程/1.vue.js"></script>

</head>
<body>


<h1 class="root">你好 !{{name.name1}}  {{address}} {{day.age}}</h1>


<script>

  new Vue({

    el:".root",

    data: {
      name: {
        name1:"无邪"

      },
      address: "云南 昆明",
      day: {
        age:18
  },


    }
  })

</script>
</body>
</html>

3.模板语法

vue 复制代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--1.引入Vue文件-->

  <script src="../1.Vue教程/1.vue.js"></script>

</head>
<body>


<!--准备一个容器-->
<div id="root">

  <h1>插值语法</h1>
  <h2>你好 {{data}}  {{data}} </h2>

  <hr>


  <h1>指令语法</h1>
<!--  把跳转地址写死了  因此使用指令语法!-->
<!--  <a href="www.baidu.com">进入</a>-->

<!--  v-bind:  可以动态指定属性-->
  <a v-bind:href="url"  v-bind:x="dta()">进入</a>

<!--v-bind:X    为X动态绑定  Vue实例中的方法或属性对象  使用v-bind会把标签属性的值变为js语句  当做js中的语句来执行-->

</div>

<script>

<!--  创建一个Vue实例-->
  new Vue({
    el:"#root",

    data:{

      name:"无邪",
      url:"www.baidu.com",

      dta(){
        console.log("你好!")

      }

    }


  })

/*      Vue模板语法有两大类:
              --1.插值语法:
                    功能:用于解析 标签体内容
                        写法 {{xxx}}}  xxx是js的表达式 且可以直接读取到data中的所有属性
*             --2.指令语法:
*                     功能:用于解析标签 包括 标签属性 标签体内容 绑定事件...
                        v-bind:href="xxx" 或简写为 :href="xxx" xxx同样要写为js表达式
*                         且可以直接读取到data中的所有属性
                  备注:Vue中有很多的指令 且形式都是:  v-???
*
*
*
*
* */

</script>


</body>
</html>

4.数据绑定

vue 复制代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据</title>

  <script src="1.vue.js"></script>

</head>
<body>



<div id="root">


<!--  使用v-bin  就是把vue实例中的data对象 中的name语句赋值给value
              v-bind中最大的特点的就是单向数据绑定    从输入框中修改数据在控制台里面不会出现  从控制台输入则不会 这就是单向数据绑定

       使用v-model  就是把vue实例中的data对象 中的name语句赋值给value
              v-model中最大的特点的就是双向数据绑定    从输入框中修改数据在控制台里面会出现  从控制台输入也会修改 这就是双向数据绑定
                    注意:v-model 只能适用于表单类的标签   v-model就是针对 value属性操作
-->
  单向数据绑定 <input type="text"  v-bind:value="name"> <br>
<!--  双向数据绑定 <input type="text" v-model:value="name"> <br>-->


<!--    采用简写属性-->
    双向数据绑定 <input type="text" v-model="name"> <br>
</div>

<script>


<!--  创建一个VUe实例-->
      new Vue({
        el:"#root",

        data:{
          name:"计算机科学与技术学院"
        }



      })
/*
*           1.单向数据绑定-   v-bind  数据只能从data流向页面
*           2.双向绑定     v-model  数据不仅能从data流向页面  还可以从页面流向data
*                   注意:
*                           1.双向绑定一般应用在表单类因素上  input select上
*                           2.v-model:value 可以简写为 v-model  因为v-model默认收集的就是value
*
*
*
*
*
*
*
*
*
*
* */

</script>

</body>
</html>

5.el和data的两种写法

vue 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


  <script src="1.vue.js"></script>

</head>
<body>
<div id="root">
  <h1>{{name}}</h1>
</div>


<script>

/*
  let vue = new Vue({

    // el:"#root",  第一种写法
    data:{
      name:"计算机"
    }

  })
*/

  //第二种写法  把vue实例挂载到id属性为root的容器上
  // v.$mount("#root")

  //来个定时器  1秒后执行回调函数里面的代码
 /* setTimeout(()=>{

    v.$mount("#root")
  },1000)*/



/*  console.log(vue);*/



new Vue({

  el:"#root",
   /* data的第一种写法:  data:{
      name:"计算机"
    }*/

//    data的第二种写法:函数式

  /*  data:function () {

        return{
            name:'计算机'
        }
    }
*/

    data(){
        return{
            name:"计算机"
        }

    }

})


/*
*           1.el有两种写法
*                       --1.new Vue的时候 配置el属性
*                       --2.先创建Vue实例 随后在通过vm.$mount('#root')指定el属性
*            2.data的两种写法:
*                       --1.对象式
*                       --2.函数式
*
*               3.注意:由Vue管理的函数  一定不要书写箭头函数 一旦写了箭头函数 this就不再是Vue实例了 而是Window
*
*
*
*
*
*
*
*
*
* */

</script>




</body>
</html>

6.MVVM实例

vue 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM实例</title>


<!--  1.引入vue文件-->
  <script src="1.vue.js"></script>
</head>
<body>
<div id="root">
      <h1>学校名称:{{name}}</h1>
      <h1>地址:{{address}} {{$options}}</h1>
</div>


<script>

  /*    MVVM模型:
  *           1.M(Model) data中的诗句
  *           2.V:视图(View) 模板代码
  *            3.VM  视图模型(ViewModel)  Vue实例
  * 
  *       1.data中的诗句最终也出现在了VM身上
  *       2.vm身上的所有的属性  及vue原型上所有的属性 在vue模板中都可以直接使用
  * 
  * 
  * */
  
  const vm=new Vue({
    el:"#root",

    data:{

      name:"大学",
      address:"云南",
      a:12

    }
  })

  console.log(vm)
</script>

</body>
</html>

7.数据代理

vue 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
</head>
<body>


<script>
  let person={
    name:"吴邪",
    sex:'男',
  }

  Object.defineProperty(person,'age',{
   /* value:18,
    enumerable:true,//可列举  控制属性是否可以枚举  默认值为FALSE
    writable:true,//控制属性是否能被修改  默认值为false
    configurable:true,//控制属性是否能够删除*/


    get:function () {
    //  当有人读取person中的age属性时  get函数就会被调用 且返回值就是age的值

      return '计算机科学'
    },
    set(value){
      
    //  当有人修改person的age属性时  set函数就会被调用 且会受到=修改掉的具体值
        
      
    }


  })//第一个参数是要添加的对象  第二个是要添加对象的属性名 第三个是配置项
  console.log(person)

</script>

</body>
</html>
复制代码
数据代理:通过一个对象对另一个对象中属性的操作 读/写  -->
vue 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
</head>
<body>

<script>



  let obj1={x:100}

  let obj2={y:200}

//  通过修改obj2;来修改obj1

  Object.defineProperty(obj2,'x',{
    get(){
      return obj1.x
    },

    set(value){
obj1.x=value
      console.log()
    }

  })
  
//  通过obj2来改变obj1的值



</script>



</body>
</html>

8.Vue中的数据代理

vue 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script src="1.vue.js"></script>

</head>
<body>

<div id="root">

  <h2>学校名称{{name}}</h2>
  <h2>地址{{address}}</h2>

</div>



<script>


  let vue = new Vue({
    el:"#root",
    data:{
      name:"计算机",
      address:'昆明'

    }


  });
  console.log(vue._data.name)

/*
*     1.Vue中的数据代理:
                     通过vm对象来代理data对象中属性的操作(读/写)
            2.Vue中数据代理的好处:
                     更加方便的操作data中的数据
            3.基本原理:
                     通过Object.defineProperty()把data对象中所有属性添加到vm上。
                     为每一个添加到vm上的属性,都指定一个getter/setter。
                     在getter/setter内部去操作(读/写)data中对应的属性。
*
*
*
*
* */

</script>


</body>
</html>

第二章:Vue事件

1.Vue中的事件处理(点击双击事件)

vue 复制代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="1.vue.js">
    </script>

</head>
<body>
<div class="root">
    <h1>{{name}}</h1>

<!--    当我点击这个按钮的时候 我就去寻找函数名为showInfo的函数事件去使用-->
    <button v-on:click="showInfo">提示</button>

<!--    简写 v-on 与@等价  -->
    <button @click="showInfo2">确定</button>
</div>

<!--事件的基本使用:
                     1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
                     2.事件的回调需要配置在methods对象中,最终会在vm上;
                     3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
                     4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
                     5.@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参;-->

<script>

    new Vue(
        {

            el:".root",

            data:{
                name:"计算机"

                /*      在Vue中给标签绑定事件需要使用一个指令:
                *               v-on:click
                *
                *
                *
                *
                * */

            },

        //    使用配置项目 把回调函数放在vue实例中
            methods:{
                 showInfo1(event){
                 //    对象里面配方法 因此把function关键字去掉
                     console.log(event)
                     // document.write("你好 同学!")
                 //    event这个参数就是鼠标
                     alert("你好!")

                 },
                showInfo2(){
                     alert("你好 计算机科学与技术")
                }

            }


        }


    )

</script>



</body>
</html>

2.事件修饰符

vue 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
				Vue中的事件修饰符:
						1.prevent:阻止默认事件(常用);
						2.stop:阻止事件冒泡(常用);
						3.once:事件只触发一次(常用);
						4.capture:使用事件的捕获模式;
						5.self:只有event.target是当前操作的元素时才触发事件;
						6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件(常用) -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡(常用) -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次(常用) -->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件; -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行,无需等待事件回调执行完毕; -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好!')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

3.键盘事件(keydown和keyup)

vue 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中常用的按键别名:
							回车 => enter
							删除 => delete (捕获"删除"和"退格"键)
							退出 => esc
							空格 => space
							换行 => tab (特殊,必须配合keydown去使用)
							上 => up
							下 => down
							左 => left
							右 => right

				2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

				3.系统修饰键(用法特殊):ctrl、alt、shift、meta
							(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
							(2).配合keydown使用:正常触发事件。

				4.也可以使用keyCode去指定具体的按键(不推荐)

				5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

第三章:计算属性和监视属性

1.计算属性(computed)

vue 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_插值语法实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓:<input type="text" v-model="firstName"> <br/><br/>
			名:<input type="text" v-model="lastName"> <br/><br/>
			全名:<span>{{firstName}}-{{lastName}}</span>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			}
		})
	</script>
</html>
vue 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_methods实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓:<input type="text" v-model="firstName"> <br/><br/>
			名:<input type="text" v-model="lastName"> <br/><br/>
			全名:<span>{{fullName()}}</span>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {
				fullName(){
					console.log('@---fullName')
					return this.firstName + '-' + this.lastName
				}
			},
		})
	</script>
</html>
复制代码
属性就是data里面的数据
方法(函数)就是methods里面的方法

el用来绑定标签里面的类名或id  data用来存放 标签里面要显示的内容 插值语法  methods用来存放对应的事件触发代码内容 
computed用来存放计算属性
vue 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			计算属性:
					1.定义:要用的属性不存在,要通过已有属性计算得来。
					2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
					3.get函数什么时候执行?
								(1).初次读取时会执行一次。
								(2).当依赖的数据发生改变时会被再次调用。
					4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
					5.备注:
							1.计算属性最终会出现在vm上,直接读取使用即可。
							2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			姓:<input type="text" v-model="firstName"> <br/><br/>
			名:<input type="text" v-model="lastName"> <br/><br/>
			测试:<input type="text" v-model="x"> <br/><br/>
			全名:<span>{{fullName}}</span> <br/><br/>
			<!-- 全名:<span>{{fullName}}</span> <br/><br/>
			全名:<span>{{fullName}}</span> <br/><br/>
			全名:<span>{{fullName}}</span> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
			computed:{
				fullName:{
					//get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
					//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>
</html>

2.计算属性的简写

vue 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓:<input type="text" v-model="firstName"> <br/><br/>
			名:<input type="text" v-model="lastName"> <br/><br/>
			全名:<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				/* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				//简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>
</html>

3.监视属性

vue 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
		})
	</script>
</html>
复制代码
	get(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				},
				set(value){
					console.log('set',value)
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			} */
			//简写
			fullName(){
				console.log('get被调用了')
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>

```

3.监视属性

vue 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
		})
	</script>
</html>
相关推荐
慧一居士29 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead31 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
陈洪奇6 小时前
注册中心学习笔记整理
笔记·学习
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js