|
|
@@ -0,0 +1,106 @@
|
|
|
+<!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>
|
|
|
+ <p>
|
|
|
+ 姓：<input type="text" v-model="newName">
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 名：<input type="text" v-model="liName">
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p @click="getName()">姓名是: {{myName}}</p>
|
|
|
+ </div>
|
|
|
+ <p>名字是:{{firstName + lastName}}</p>
|
|
|
+ <p>我们的名字是:{{ getFullName() }}</p>
|
|
|
+ <p>{{full}}</p>
|
|
|
+ <!--
|
|
|
+ 计算属性
|
|
|
+ -->
|
|
|
+ <h1 style="color: red;">我们的名字是:{{fullName}}</h1>
|
|
|
+ <p>
|
|
|
+ 1.最好大量的去使用计算属性 计算属性有缓存 同步操作 处理计算量不大的数据
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 2.像数据进行更新(衍生数据),最好使用计算属性
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 3.如果计算量大 消耗性能 异步操作 使用侦听器(watch)
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 4.watch 不进行缓存 计算量大的操作 异步操作
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ var vm = new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ firstName: '卢勃玮',
|
|
|
+ lastName: '张振博',
|
|
|
+ full: '马琛',
|
|
|
+ newName: '马',
|
|
|
+ liName: '琛',
|
|
|
+
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ fullName() {
|
|
|
+ console.log("获取get的值")
|
|
|
+ // 抛出数据 return 返回值；
|
|
|
+ return this.firstName + this.lastName + this.full;
|
|
|
+ },
|
|
|
+ myName:{
|
|
|
+ // 走的是getter 实际get方法
|
|
|
+ get(){
|
|
|
+ console.log(this.newName,'获取1');
|
|
|
+ console.log(this.liName,'获取2');
|
|
|
+ return this.newName + '-' + this.liName;
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ console.log(value,'获取set值');
|
|
|
+ const arr = value.split('-');
|
|
|
+ this.newName = arr[1];
|
|
|
+ this.liName = arr[0];
|
|
|
+ console.log("set设置")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ // 初次进入页面 并不监听 发生更改才会开启监听
|
|
|
+ newName(newValue,oldValue) {
|
|
|
+ this.full = newValue + this.liName;
|
|
|
+ },
|
|
|
+ liName(newValue,oldValue) {
|
|
|
+ this.full = this.newName + newValue;
|
|
|
+ },
|
|
|
+ // 如果我们想 初始化页面进行监听
|
|
|
+ // 补充知识点
|
|
|
+ // newValue: {
|
|
|
+ // // 开启监听 ， 深度监听
|
|
|
+ // immediate:true,
|
|
|
+ // deep: true,
|
|
|
+ // handler() {
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 自定义的方法
|
|
|
+ methods: {
|
|
|
+ getFullName() {
|
|
|
+ // this => Vue实例
|
|
|
+ return this.firstName + this.lastName + this.full;
|
|
|
+ },
|
|
|
+ getName() {
|
|
|
+ console.log(this.newName);
|
|
|
+ console.log(this.liName);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e