|
|
@@ -0,0 +1,102 @@
|
|
|
+<!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">
|
|
|
+ <!-- v-text v-html v-model -->
|
|
|
+ <div>
|
|
|
+ 姓:<input type="text" v-model="firstName" />
|
|
|
+ <br />
|
|
|
+ 名:<input type="text" v-model="lastName" />
|
|
|
+ <br />
|
|
|
+ <!-- 1.插值模板 -->
|
|
|
+ 我的名字是:{{firstName + lastName}}
|
|
|
+ <br />
|
|
|
+ <!-- 2.methods -->
|
|
|
+ 我的名字是:{{getName()}}
|
|
|
+ <br>
|
|
|
+ <!-- 3.计算属性 -->
|
|
|
+ 计算属性:{{myName}}
|
|
|
+ <br>
|
|
|
+ 计算属性:{{fullName}}
|
|
|
+ <br>
|
|
|
+ <!-- 4.侦听器 -->
|
|
|
+ 侦听器：{{full}}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ var app = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ // 数据
|
|
|
+ data: {
|
|
|
+ firstName: "张",
|
|
|
+ lastName: "三",
|
|
|
+ newName: "李",
|
|
|
+ oldName: "四",
|
|
|
+ full:"",
|
|
|
+ aaa:""
|
|
|
+ },
|
|
|
+ // 生命周期
|
|
|
+ created() {},
|
|
|
+ // 方法
|
|
|
+ methods: {
|
|
|
+ getName() {
|
|
|
+ return this.firstName + this.lastName;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 计算属性 computed
|
|
|
+ /**
|
|
|
+ * 原理：通过数据劫(object.defineProperty)，获取数据，通过getter和setter去修改获得数据
|
|
|
+ * methods 和 computed在初始使用时 并没有区别
|
|
|
+ * 但时当页面涉及数据计算量大时 计算属性可以减少性能消耗
|
|
|
+ * 同步操作
|
|
|
+ */
|
|
|
+ computed: {
|
|
|
+ myName:{
|
|
|
+ get() {
|
|
|
+ return this.newName + this.oldName
|
|
|
+ },
|
|
|
+ // 点击事件后补充
|
|
|
+ set() {
|
|
|
+ this.newName = "天气";
|
|
|
+ this.oldName = "真好";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fullName() {
|
|
|
+ return this.aaa = "周三"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * watch 侦查器 监听器
|
|
|
+ * 异步操作
|
|
|
+ */
|
|
|
+ watch:{
|
|
|
+ // 初次进入页面不执行 只有数据发生变化后才会进行操作
|
|
|
+ firstName(newValue,oldValue) {
|
|
|
+ this.full = newValue + this.lastName;
|
|
|
+ },
|
|
|
+ lastName(newValue,oldValue) {
|
|
|
+ console.log(newValue,'1')
|
|
|
+ console.log(oldValue,'2')
|
|
|
+ this.full = this.firstName + newValue;
|
|
|
+ },
|
|
|
+ // 补充知识点
|
|
|
+ // newName:{
|
|
|
+ // immediate:true, 立即开始
|
|
|
+ // deep: true, 深度监听
|
|
|
+ // handler(){
|
|
|
+ // 方法....
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e