|
|
@@ -0,0 +1,125 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .size {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ margin: 200px auto;
|
|
|
+ border: 1px solid darksalmon;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <div :class="['size']">
|
|
|
+ 姓:
|
|
|
+ <input type="text" v-model="firstName">
|
|
|
+ <br>
|
|
|
+ 名:
|
|
|
+ <input type="text" v-model="lastName">
|
|
|
+ <br>
|
|
|
+ <!-- 1.插值语法 -->
|
|
|
+ 我叫: {{firstName + lastName}}
|
|
|
+ <br>
|
|
|
+ <!-- 2.methods方法 -->
|
|
|
+ 我叫:{{getName()}}
|
|
|
+ <br>
|
|
|
+ <!-- 3.计算属性：computed -->
|
|
|
+ 我叫：{{fullName}}
|
|
|
+ <br>
|
|
|
+ 新名字:{{myName}}
|
|
|
+ <br>
|
|
|
+ <!-- 4.侦听器 -->
|
|
|
+ 我叫：{{fulls}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--
|
|
|
+ 原理：通过数据劫持(Object.defineproperty) 通过getter(get)和setter(set)实现获取数据 修改数据操作
|
|
|
+ methods 与 computed 大致相同
|
|
|
+ 但是：大量的计算数据 需要在计算属性中进行操作
|
|
|
+ 计算数据写在computed里 性能较快 同步操作
|
|
|
+ watch 异步操作
|
|
|
+ -->
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ //
|
|
|
+ var app = new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ firstName:"胡",
|
|
|
+ lastName:"图图",
|
|
|
+ news:"喜",
|
|
|
+ old:"羊羊",
|
|
|
+ fulls:""
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getName() {
|
|
|
+ return this.firstName + this.lastName
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 计算属性
|
|
|
+ computed:{
|
|
|
+ fullName() {
|
|
|
+ return this.firstName + this.lastName;
|
|
|
+ },
|
|
|
+ // myName() {
|
|
|
+ // // get() {},
|
|
|
+ // // set() {}
|
|
|
+ // }
|
|
|
+ myName: {
|
|
|
+ get() {
|
|
|
+ return this.news + this.old;
|
|
|
+ },
|
|
|
+ set() {
|
|
|
+ this.news = '灰';
|
|
|
+ this.old = '太郎'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ // firstName(newValue,oldValue) {
|
|
|
+ // this.fulls = newValue + this.lastName
|
|
|
+ // },
|
|
|
+ // lastName(newValue, oldValue) {
|
|
|
+ // this.fulls =this.firstName + newValue;
|
|
|
+ // },
|
|
|
+ // 补充知识点：
|
|
|
+ // myName:{
|
|
|
+ // immediate: true,
|
|
|
+ // deep: true,
|
|
|
+ // handler(a) {
|
|
|
+ // // 方法
|
|
|
+ // console.log(a,'aaaa')
|
|
|
+ // return this.fulls = a;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ firstName:{
|
|
|
+ // 开启立即监听
|
|
|
+ immediate: true,
|
|
|
+ // 开启深度监听
|
|
|
+ deep: true,
|
|
|
+ handler(e) {
|
|
|
+ // 方法
|
|
|
+ console.log(e,'aaaa')
|
|
|
+ return this.fulls = e + this.lastName;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lastName:{
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(e) {
|
|
|
+ // 方法
|
|
|
+ console.log(e,'aaaa')
|
|
|
+ return this.fulls = this.firstName + e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // app.myName = ''
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e