|
|
@@ -0,0 +1,53 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <button @click="change()">修改</button>
|
|
|
+ <h2>姓:{{firstName}}</h2>
|
|
|
+ <h2>名:{{lastName}}</h2>
|
|
|
+ <h2>姓名:{{fullName}}</h2>
|
|
|
+ </div>
|
|
|
+ <script src="vue.js"></script>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el:'#app',
|
|
|
+ data:{
|
|
|
+ firstName:'zhang',
|
|
|
+ lastName: 'san'
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ change(){
|
|
|
+ this.firstName = 'li'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ fullName: function(){
|
|
|
+ return this.firstName + this.lastName
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ firstName: function(){
|
|
|
+ console.log(111)
|
|
|
+ },
|
|
|
+ lastName: function(){
|
|
|
+ console.log(222)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ /*
|
|
|
+ 在Vue中,watch和computed都是用来观察数据变化的
|
|
|
+ 他们的作用是不同的
|
|
|
+ watch是响应数据的变化并进行相应的操作
|
|
|
+ computed是用来计算一些基于响应式数据的数据
|
|
|
+ computed 是带有缓存的 当响应式数据没有变化的时候
|
|
|
+ computed不会重新计算
|
|
|
+ */
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
zsydgithub