From c731ae7ca67f8a6a9ecce4c33901931971e585b2 Mon Sep 17 00:00:00 2001
From: lhx <781131860@qq.com>
Date: Sat, 29 May 2021 17:32:31 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BB=8A=E5=A4=A9=E7=9A=84=E4=B8=80?=
 =?UTF-8?q?=E5=B0=8F=E7=82=B9=E7=AC=94=E8=AE=B0=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../note2021-5-29-01.md"                      | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 "\346\236\227\351\270\277\351\221\253/note2021-5-29-01.md"

diff --git "a/\346\236\227\351\270\277\351\221\253/note2021-5-29-01.md" "b/\346\236\227\351\270\277\351\221\253/note2021-5-29-01.md"
new file mode 100644
index 0000000..0cad1b6
--- /dev/null
+++ "b/\346\236\227\351\270\277\351\221\253/note2021-5-29-01.md"
@@ -0,0 +1,60 @@
+# Vue的第四课
+
+## 模板语法
+
+### 文本
+
+通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定
+
+例子：
+
+    <div id="app">
+    <span> Message:{{msg}} </span>
+    <span v-once>这个将不会改变: {{ msg }}</span>
+        </div>
+
+
+    <script>
+    var app = new Vue({
+        el:'#app',
+        data(){
+            return{
+                msg:'6060'
+            }
+        }
+    })
+        </script>
+
+
+结果：当你插入app.msg='游海水哦'是
+ 是这样：
+
+    Message:游海水哦 这个将不会改变: 6060
+
+
+### 原始 HTML
+双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html
+
+    <div id="app">
+            <p>Using mustaches: {{ rawHtml }}</p>
+            <p>Using v-html directive: <span v-html="rawHtml"></span></p>
+        </div>
+      
+        <script>
+            var app = new Vue({
+                el: '#app',
+                data() {
+                    return {
+                        rawHtml: '<h1>我的世界</h1>'
+                    }
+                }
+            })
+        </script>
+
+输出是这样的：
+
+    Using mustaches: <h1>我的世界</h1>
+
+    Using v-html directive:
+
+    我的世界
\ No newline at end of file
-- 
Gitee


From 2a54417bb7823bbdc23ca00911bbadf6203c4c0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cglinhongxin?= <781131860@qq.com>
Date: Sat, 29 May 2021 21:57:28 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BB=8A=E6=97=A5=E7=AC=94=E8=AE=B0?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../note2021-5-29-01.md"                      | 212 +++++++++++++++++-
 1 file changed, 210 insertions(+), 2 deletions(-)

diff --git "a/\346\236\227\351\270\277\351\221\253/note2021-5-29-01.md" "b/\346\236\227\351\270\277\351\221\253/note2021-5-29-01.md"
index 0cad1b6..48948da 100644
--- "a/\346\236\227\351\270\277\351\221\253/note2021-5-29-01.md"
+++ "b/\346\236\227\351\270\277\351\221\253/note2021-5-29-01.md"
@@ -1,4 +1,4 @@
-# Vue的第四课
+# Vue的第四次课
 
 ## 模板语法
 
@@ -57,4 +57,212 @@
 
     Using v-html directive:
 
-    我的世界
\ No newline at end of file
+    我的世界
+
+ 
+### Attribute
+
+Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind:
+
+    div v-bind:id="dynamicId"></div>
+
+对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
+
+    <div id="app">
+            <button v-bind:disabled="isButtonDisabled">Button</button>
+            
+        </div>
+    
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+        <script>
+            var app = new Vue({
+                el:'#app',
+                data(){
+                return{
+                    isButtonDisabled:true
+                }
+                }
+            })
+        </script>
+
+如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。
+在后端直接执行  isButtonDisabled:false
+该按钮就可以用！
+
+### 使用 JavaScript 表达式
+Vue.js 都提供了完全的 JavaScript 表达式支持。
+
+{{ number + 1 }}
+
+{{ ok ? 'YES' : 'NO' }}
+
+{{ message.split('').reverse().join('') }}
+
+<div v-bind:id="'list-' + id"></div>
+这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
+
+    <div id="app">
+            <p> {{ number + 1 }}
+            </p>
+            <br>
+            <p>{{ ok ? 'YES' : 'NO' }}</p>
+            <br>
+            <p> {{ message.split('').reverse().join('') }}</p>
+
+            <br>
+
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+        <script>
+            var app = new Vue({
+                el: '#app',
+                data() {
+                    return {
+                        number: 10,
+                        ok: 1,
+                        message: "vue"
+
+                    }
+                }
+            })
+        </script>
+
+结果输出：
+
+11
+
+
+YES
+
+
+euv
+
+## 指令
+
+### 参数
+
+例如，v-bind 指令可以用于响应式地更新 HTML attribute：
+
+<a v-bind:href="url">...</a>
+在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
+
+另一个例子是 v-on 指令，它用于监听 DOM 事件：
+
+    <div id="app">
+            <a v-bind:href="url">...</a>
+
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+        <script>
+            var app = new Vue({
+                el: '#app',
+                data() {
+                    return {
+                    url:'https://www.baidu.com/'
+                    }
+                }
+            })
+        </script>
+
+输出点击就可以跳转到指定页面了
+
+### 动态参数
+2.6.0 新增
+
+从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
+
+<!--
+注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
+-->
+<a v-bind:[attributeName]="url"> ... </a>
+这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
+
+同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
+
+<a v-on:[eventName]="doSomething"> ... </a>
+在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
+
+对动态参数的值的约束
+动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
+
+对动态参数表达式的约束
+动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：
+
+<!-- 这会触发一个编译警告 -->
+<a v-bind:['foo' + bar]="value"> ... </a>
+变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
+
+在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
+
+<!--
+在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
+除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
+-->
+<a v-bind:[someAttr]="value"> ... </a>
+
+### 修饰符
+修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
+
+    
+<form v-on:submit.prevent="onSubmit">...</form>
+在接下来对 v-on 和 v-for 等功能的探索中，你会看到修饰符的其它例子。
+
+## 缩写
+
+v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
+
+v-bind 缩写
+<!-- 完整语法 -->
+<a v-bind:href="url">...</a>
+
+<!-- 缩写 -->
+<a :href="url">...</a>
+
+<!-- 动态参数的缩写 (2.6.0+) -->
+<a :[key]="url"> ... </a>
+v-on 缩写
+<!-- 完整语法 -->
+<a v-on:click="doSomething">...</a>
+
+<!-- 缩写 -->
+<a @click="doSomething">...</a>
+
+<!-- 动态参数的缩写 (2.6.0+) -->
+<a @[event]="doSomething"> ... </a>
+它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。
+
+
+<div id="app">
+        <div @click='click1'>
+    <div @click='click2'>
+    click me 
+    </div>
+        </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+        <script>
+            var app = new Vue({
+                el: '#app',
+                data() {
+                    return {
+                    
+                    }
+                }
+                ,
+                    methods:{
+                        click1:function(){
+                            console.log('click1....');
+                        },
+                        click2:function(){
+                            console.log('click2....');
+                        }
+                    }
+            })
+
+
+当点击 click me 时会输出：
+click2....
+click1....
\ No newline at end of file
-- 
Gitee


From cf3b785e716da80c7c3aac6052793cb681fe33da Mon Sep 17 00:00:00 2001
From: lhx <781131860@qq.com>
Date: Mon, 31 May 2021 14:48:36 +0800
Subject: [PATCH 3/3] =?UTF-8?q?Vue=E7=AC=AC=E5=9B=9B=E6=AC=A1=E8=AF=BE?=
 =?UTF-8?q?=E7=9A=84=E7=AC=94=E8=AE=B0=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../note2021-5-29-02.md"                      | 191 ++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 "\346\236\227\351\270\277\351\221\253/note2021-5-29-02.md"

diff --git "a/\346\236\227\351\270\277\351\221\253/note2021-5-29-02.md" "b/\346\236\227\351\270\277\351\221\253/note2021-5-29-02.md"
new file mode 100644
index 0000000..f0c5573
--- /dev/null
+++ "b/\346\236\227\351\270\277\351\221\253/note2021-5-29-02.md"
@@ -0,0 +1,191 @@
+# 计算属性和侦听器
+
+## 计算属性
+所以，对于任何复杂逻辑，你都应当使用计算属性。
+
+### 基础例子
+
+    <div id="example">
+    <p>Original message: "{{ message }}"</p>
+    <p>Computed reversed message: "{{ reversedMessage }}"</p>
+    </div>
+
+    <script>
+            var app = new Vue({
+                el:'#example',
+                data(){
+                    return{
+                        message:'hxp'
+                    }
+                },
+                computed:{
+                    reversedMessage:function(){
+                        return this.message.split('').reverse('').join('')
+                    }
+                }
+            })
+        </script>
+
+即输出：
+Original message: "hxp"
+
+Computed reversed message: "pxh"
+
+这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：
+
+console.log(vm.reversedMessage) // => 'olleH'
+vm.message = 'Goodbye'
+console.log(vm.reversedMessage) // => 'eybdooG'
+你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。
+
+
+即 Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。
+
+
+### 计算属性缓存 vs 方法
+
+1.计算属性是基于它们的响应式依赖进行缓存的
+2.只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
+
+
+这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
+
+computed: {
+  now: function () {
+    return Date.now()
+  }
+}
+相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
+
+我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
+
+
+### 计算属性 vs 侦听属性
+
+Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：
+
+    <div id="demo">{{ fullName }}</div>
+上面这个例子有两种方法：
+
+    var vm = new Vue({
+    el: '#demo',
+    data: {
+        firstName: 'Foo',
+        lastName: 'Bar',
+        fullName: 'Foo Bar'
+    },
+    watch: {
+        firstName: function (val) {
+        this.fullName = val + ' ' + this.lastName
+        },
+        lastName: function (val) {
+        this.fullName = this.firstName + ' ' + val
+        }
+    }
+    })
+
+这种是比较复杂的，而且重复了
+
+下面这种，都是一样的结果：
+
+    var vm = new Vue({
+    el: '#demo',
+    data: {
+        firstName: 'Foo',
+        lastName: 'Bar'
+    },
+    computed: {
+        fullName: function () {
+        return this.firstName + ' ' + this.lastName
+        }
+    }
+    })
+
+### 计算属性的 setter
+
+计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
+
+
+    computed: {
+    fullName: {
+        // getter
+        get: function () {
+        return this.firstName + ' ' + this.lastName
+        },
+        // setter
+        set: function (newValue) {
+        var names = newValue.split(' ')
+        this.firstName = names[0]
+        this.lastName = names[names.length - 1]
+        }
+    }
+    }
+
+现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
+
+### 侦听器
+
+虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
+
+例如：
+
+    <div id="watch-example">
+    <p>
+        Ask a yes/no question:
+        <input v-model="question">
+    </p>
+    <p>{{ answer }}</p>
+    </div>
+    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
+    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
+    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
+    <script>
+    var watchExampleVM = new Vue({
+    el: '#watch-example',
+    data: {
+        question: '',
+        answer: 'I cannot give you an answer until you ask a question!'
+    },
+    watch: {
+        // 如果 `question` 发生改变，这个函数就会运行
+        question: function (newQuestion, oldQuestion) {
+        this.answer = 'Waiting for you to stop typing...'
+        this.debouncedGetAnswer()
+        }
+    },
+    created: function () {
+        // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
+        // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
+        // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
+        this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
+    },
+    methods: {
+        getAnswer: function () {
+        if (this.question.indexOf('?') === -1) {
+            this.answer = 'Questions usually contain a question mark. ;-)'
+            return
+        }
+        this.answer = 'Thinking...'
+        var vm = this
+        axios.get('https://yesno.wtf/api')
+            .then(function (response) {
+            vm.answer = _.capitalize(response.data.answer)
+            })
+            .catch(function (error) {
+            vm.answer = 'Error! Could not reach the API. ' + error
+            })
+        }
+    }
+    })
+    </script>
+
+结果：
+
+Ask a yes/no question:__________________
+
+Questions usually contain a question mark. ;-)
+
+在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
+
+除了 watch 选项之外，您还可以使用命令式的 vm.$watch API。
\ No newline at end of file
-- 
Gitee