字符串发展和内容隐藏Demo学习，了解事件绑定和Vue指令

fa517e69 · Bobby · 894790d2 · fa517e69 · fa517e69 · fa517e69
8 changed file
--- a/1.Hello Word Counter.md
+++ b/1.Hello Word Counter.md
+# Hello Word Counter
+Vue是一渐进式的框架，不仅能用于小型项目，也能胜任大型的项目，且学习入手的难度相对其他框架更小。
+下面是一个DEMO程序，实现的功能是是在页面上显示Hello Word 且后面显示一个每一秒就会自动+1的一个数字。通过这个例子来快速的上手VUE。
+![hello_word_counter](./images/hello_word_counter.gif)
+```HTML
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello Word</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+<script>
+    // 3. 创建VUE的实例
+    Vue.createApp({
+        // 3.2数据
+        data(){
+            return{
+                num:1
+            }
+        },
+        // 3.3当页面加载完成时会自动执行mounted()
+        mounted(){
+            // 设置一个定时器每秒将num+1
+            setInterval(()=>{
+                this.num += 1;
+            },1000)
+        },
+        // 3.1视图模板
+        template:'<div> Hello Word!  {{num}}</div>' // 创建模板并渲染到绑定的ID中  <div id="root"><div> Hello Word! </div></div>
+    }).mount('#root'); // 标识当前VUE实例作用在ID为root的元素上
+</script>
+</html>
+```
+现在来理解一下这个程序:
+- 首先通过CDN引入VUE`<script src="https://unpkg.com/vue@next"></script>`
+- 然后在`body`中设置一个`div`并指定该`div`的id为**root**;
+- 接着在`script`中创建VUE实例，这里是需要重点理解的部分
+  - 首先是`Vue.createApp({})`创建Vue实例
+  - 然后使用`mount('#root')`将上一步创建的Vue实例绑定到id为**root**的元素上，这样就可以将Vue实例中自定义的内容渲染到id为root的`div`里面
+  - 接着关注一下Vue中定义的内容
+    - template 定义了需要将什么内容渲染到`id="root"`的DOM元素中，上面代码中国的实例等同于
+      ```HTMl
+      <body>
+          <div id="root">
+              <div> Hello Word!  {{num}}</div>
+          </div>
+      </body>
+      ```
+      等效于DOM中的`InnerHTML`
+      其中的`{{}}`是JS的表达式表明其中的内容不是文本而是一个变量
+    - data 定义了当前Vue实例中的使用的数据，也是表达式中变量取值的来源
+    - mounted函数会**在Vue实例挂载到`root`节点后(字面理解mount的过去式表完成)**自动执行，在本例中为了实现计数的功能设置了一个每1s执行一次的定时任务，每次将data()中定义的num数值+1，由于页面展示的数字也是从data()中获取的，进而页面展示上的数字也发生了变化。
+通过上面的例子可以看出VUE**不再面向DOM编程而是面向数据编程**。
--- a/2.字符串反转和内容隐藏.md
+++ b/2.字符串反转和内容隐藏.md
+# 字符串反转和内容隐藏
+为了对Vue有更以进一步的认识，这里再来看一个字符串反转和内容隐藏的例子来学习**Vue指令**和**事件绑定**
+##  字符串反转
+如果是操作DOM实现这一功能的话，应该是按照以下三个步骤：
+1. 获取展示需要反转的字符串所在的DOM元素
+2. 从DOM元素中取值，并进行反转。
+3. 操作DOM将反转好的数据字符串赋值给之前的DOM元素
+这是标准的面向DOM编程的处理步骤，上一个DOME中已经对VUE是面向数据编程的这一思想有了初步的体会，所以我们步骤修改为：
+1. 获取展示的数据
+2. 修改展示的数据
+3. 展示修改的数据（VUE自动实现）
+可以看到相比操作DOM来说VUE，简直太方便了。下面是实现效果：
+![string_reverse](./images/string_reverse.gif)
+```HTML
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>字符串反转和内容隐藏</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+<script>
+    // 3. 创建VUE的实例
+    Vue.createApp({
+        // 3.1定义需要展示的数据
+        data(){
+            return{
+                str:'hello vue3 ~'
+            }
+        },
+        // 3.2 定义需要按钮点击时进行的处理逻辑
+        methods:{
+            handleButtonClick(){
+                // 注意这里获取data中数据的方式
+                // 做字符换反转后将反转后的数据赋值给str
+                this.str = this.str.split('').reverse().join('');
+            }
+        },
+        // 3.3视图模板，定义显示内容和事件绑定
+         // v-on 用于事件绑定，click表示绑定的是点击事件，”handleButtonClick“表示点击事件对应的处理逻辑
+        template:`
+        {{str}}
+        <button v-on:click="handleButtonClick">反转</button>
+        `
+    }).mount('#root'); // 标识当前VUE实例作用在ID为root的元素上
+</script>
+</html>
+```
+通过上面的代码，可以总结出一个简单的VUE示例代码，可以按照以下步骤进行书写：
+1. 定义`<div>`，并制定id用于挂载Vue实例
+2. 定义Vue实例，并根据制定的id进行挂载
+  2.1. 定义数据，即`data函数`中定义的内容
+  2.2  定义事件响应的函数，即`methods字段`中定义的内容
+  2.3  定义用于展示在被挂载对象的中的内容，即`template字段`中定义的内容；
+  `template字段`中定义的元素允许进行**事件绑定**，在上面示例中v-on是一个**Vue指令**用于事件绑定，click表示绑定的是点击事件，”handleButtonClick“表示点击事件对应的处理逻辑为`methods字段`中的handleButtonClick方法
+另外，可以注意到data函数，methods字段以及template字段都是定义在vue示例中的，也可以理解为他们都**在同一个vue对象实例**中，是构成vue对象的**必要**元素。
+**在method中获取data()中的数据时需要使用this关键字**来指定使用的是当前VUE实例中的数据！
+**总结**：
+通过对上面这个例子的学习，需要了解**事件绑定**, Vue面向数据编程的**双向绑定**，Vue示例中methods字段的作用，以及在methods字段中定义函数如何获得data函数中的数据；
+## 内容隐藏
+实现功能：当点击隐藏按钮时隐藏内容，同时将按钮的文字从隐藏变为显示；当点击显示按钮时，展示默认的文本，效果见下图：
+![content_hide](./images/content_hide.gif)
+参考实现代码：
+```HTMl
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>内容隐藏</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+<script>
+    // 3. 创建VUE的实例
+    Vue.createApp({
+        // 3.1定义需要展示的数据
+        data(){
+            return{
+                buttonName:"隐藏", //默认是隐藏
+                isShow:true // 默认是展示
+            }
+        },
+        // 3.2 定义需要按钮点击时进行的处理逻辑
+        methods:{
+            handleButtonClick(){
+                // 处理隐藏逻辑
+                this.isShow = !this.isShow;
+                if(this.isShow ){
+                    this.buttonName = "隐藏";
+                }else{
+                    this.buttonName = "显示";
+                }
+            }
+        },
+        // 3.3视图模板，定义显示内容和事件绑定
+         // v-if 用于元素的展示逻辑控制。根据data()中的数据进行判断，这里使用data()中的数据不需要加{{}}
+        template:`
+        <span v-if="isShow">Hello Vue3</span>
+        <button v-on:click="handleButtonClick">{{buttonName}}</button>
+        `
+    }).mount('#root'); // 标识当前VUE实例作用在ID为root的元素上
+</script>
+</html>
+```
+**注意事项**： `v-if`指令用于控制**元素**的展示与否(一定是元素而能是一个文本)，且指令中使用到data()中的数据**不需要添加`{{}}`**!
--- a/code/hello_word_counter.html
+++ b/code/hello_word_counter.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello Word</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+<script>
+    // 3. 创建VUE的实例
+    Vue.createApp({
+        // 3.2数据
+        data(){
+            return{
+                num:1
+            }
+        },
+        // 3.3当页面加载完成时会自动执行mounted()
+        mounted(){
+            // 设置一个定时器每秒将num+1
+            setInterval(()=>{
+                this.num += 1;
+            },1000)
+        },
+        // 3.1视图模板
+        template:'<div> Hello Word!  {{num}}</div>' // 创建模板并渲染到绑定的ID中  <div id="root"><div> Hello Word! </div></div>
+    }).mount('#root'); // 标识当前VUE实例作用在ID为root的元素上
+</script>
+</html>
--- a/code/内容隐藏.html
+++ b/code/内容隐藏.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>内容隐藏</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+<script>
+    // 3. 创建VUE的实例
+    Vue.createApp({
+        // 3.1定义需要展示的数据
+        data(){
+            return{
+                buttonName:"隐藏", //默认是隐藏
+                isShow:true // 默认是展示
+            }
+        },
+        // 3.2 定义需要按钮点击时进行的处理逻辑
+        methods:{
+            handleButtonClick(){
+                // 处理隐藏逻辑
+                this.isShow = !this.isShow;
+                if(this.isShow ){
+                    this.buttonName = "隐藏";
+                }else{
+                    this.buttonName = "显示";
+                }
+            }
+        },
+        // 3.3视图模板，定义显示内容和事件绑定
+         // v-if 用于元素的展示逻辑控制。根据data()中的数据进行判断，这里使用data()中的数据不需要加{{}}
+        template:`
+        <span v-if="isShow">Hello Vue3</span>
+        <button v-on:click="handleButtonClick">{{buttonName}}</button>
+        `
+    }).mount('#root'); // 标识当前VUE实例作用在ID为root的元素上
+</script>
+</html>
--- a/code/字符串反转.html
+++ b/code/字符串反转.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>字符串反转</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+<script>
+    // 3. 创建VUE的实例
+    Vue.createApp({
+        // 3.1定义需要展示的数据
+        data(){
+            return{
+                str:'hello vue3 ~'
+            }
+        },
+        // 3.2 定义需要按钮点击时进行的处理逻辑
+        methods:{
+            handleButtonClick(){
+                // 注意这里获取data中数据的方式
+                // 做字符换反转后将反转后的数据赋值给str
+                this.str = this.str.split('').reverse().join('');
+            }
+        },
+        // 3.3视图模板，定义显示内容和事件绑定
+         // v-on 用于事件绑定，click表示绑定的是点击事件，”handleButtonClick“表示点击事件对应的处理逻辑
+        template:`
+        {{str}}
+        <button v-on:click="handleButtonClick">反转</button>
+        `
+    }).mount('#root'); // 标识当前VUE实例作用在ID为root的元素上
+</script>
+</html>
--- a/images/content_hide.gif
+++ b/images/content_hide.gif
--- a/images/hello_word_counter.gif
+++ b/images/hello_word_counter.gif
--- a/images/string_reverse.gif
+++ b/images/string_reverse.gif