|
|
@@ -0,0 +1,100 @@
|
|
|
+<!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">
|
|
|
+ 姓：<input v-model="firstName" type="text">
|
|
|
+ 名：<input v-model="lastName" type="text">
|
|
|
+ <br><br>
|
|
|
+ <!-- 1. 插值模板-->
|
|
|
+ 我的姓名是：{{firstName + lastName}}
|
|
|
+ <br>
|
|
|
+ <!-- 2.方法 -->
|
|
|
+ 我的姓名是：{{getName()}}
|
|
|
+ <br>
|
|
|
+ <!-- 3.计算属性 -->
|
|
|
+ 我的姓名是：{{myName}}{{full}}
|
|
|
+ <button @click="changeMain">修改</button>
|
|
|
+ <!-- 4.侦听器 / 监听器 -->
|
|
|
+ <br>
|
|
|
+ 我的姓名是：{{fullName}}
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ var app = new Vue({
|
|
|
+ data:{
|
|
|
+ firstName:"孙",
|
|
|
+ lastName:"悟空",
|
|
|
+ part1: "娃",
|
|
|
+ part2: "哈哈",
|
|
|
+ fullName:"哈哈哈"
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getName() {
|
|
|
+ return this.firstName + this.lastName
|
|
|
+ },
|
|
|
+ changeMain() {
|
|
|
+ this.myName = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 计算属性 computed
|
|
|
+ * 原理：通过Object.defineProperty()中getter和setter 获取数据 修改数据
|
|
|
+ * methods 和 computed 初始化使用时没有什么区别
|
|
|
+ * 当数据发生改变 会执行代码进行处理 减少性能消耗
|
|
|
+ * 同步操作
|
|
|
+ * 有缓存
|
|
|
+ */
|
|
|
+ computed:{
|
|
|
+ myName:{
|
|
|
+ get() {
|
|
|
+ return this.part1 + this.part2
|
|
|
+ },
|
|
|
+ set() {
|
|
|
+ this.part1 = '百'
|
|
|
+ this.part2 = '岁山'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ full() {
|
|
|
+ return this.aaa = '111';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * watch 侦听器 监听器
|
|
|
+ * immediate 立即监听
|
|
|
+ * deep 深度监听
|
|
|
+ * handle(newValue,oldValue) {执行语句}
|
|
|
+ * 异步操作
|
|
|
+ * 没有缓存
|
|
|
+ */
|
|
|
+ watch:{
|
|
|
+ firstName(newValue,oldValue) {
|
|
|
+ // console.log(newValue,oldValue)
|
|
|
+ this.fullName = newValue + this.lastName
|
|
|
+ },
|
|
|
+ lastName(newValue,oldValue) {
|
|
|
+ // console.log(newValue,oldValue)
|
|
|
+ this.fullName = this.firstName + newValue
|
|
|
+ },
|
|
|
+ fullName:{
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(newValue,oldValue) {
|
|
|
+ console.log(newValue,'new')
|
|
|
+ console.log(oldValue,'oldValue')
|
|
|
+ // if(newValue) {
|
|
|
+ // alert(newValue)
|
|
|
+ // } else {
|
|
|
+ // alert("请输入姓名")
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).$mount("#app");
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e