|
|
@@ -0,0 +1,67 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <div>姓: <input type="text" v-model="firstName"></div>
|
|
|
+ <div>名: <input type="text" v-model="lastName"></div>
|
|
|
+ <div>
|
|
|
+ <!-- 1.{{firstName + lastName}} -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 2.{{getName()}}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 3.{{myName}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ var app = new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ firstName:"胡",
|
|
|
+ lastName:"图图"
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getName() {
|
|
|
+ console.log("1")
|
|
|
+ return this.firstName + this.lastName;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ myName:{
|
|
|
+ get() {
|
|
|
+ console.log('2')
|
|
|
+ return this.firstName + this.lastName
|
|
|
+ },
|
|
|
+ set() {
|
|
|
+ this.firstName = '懒';
|
|
|
+ this.lastName = '羊羊';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // xxx:{
|
|
|
+
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ firstName(newValue,oldValue) {
|
|
|
+ console.log(newValue,oldValue,'watch')
|
|
|
+ },
|
|
|
+ lastName:{
|
|
|
+ immediate: true, //立即监听
|
|
|
+ deep: true, //深度
|
|
|
+ handler(newValue,oldValue) {
|
|
|
+ console.log(newValue,oldValue,'深度')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // app.myName = ''
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
zheng