From 731d41c91540d6775326db67c78053e84418d988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E7=BE=8E=E9=9B=AA?= <l>
Date: Wed, 30 Mar 2022 11:43:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue-03-30/demo.html"                      | 32 +++++++++
 .../vue-03-30/demo01.html"                    | 34 +++++++++
 .../vue-03-30/demo02.html"                    | 53 ++++++++++++++
 ...\346\235\277\350\257\255\346\263\225.html" | 69 +++++++++++++++++++
 4 files changed, 188 insertions(+)
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-03-30/demo.html"
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-03-30/demo01.html"
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-03-30/demo02.html"
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-03-30/\346\250\241\346\235\277\350\257\255\346\263\225.html"
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-03-30/demo.html" "b/\346\235\250\347\276\216\351\233\252/vue-03-30/demo.html"
new file mode 100644
index 0000000..4b0940e
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-03-30/demo.html"
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>计算属性</title>
+</head>
+<body>
+    <div id="app">
+   <p>么么么么么:{{message}}</p>
+   <p>emmmmmmmmm:{{reversedMessage}}</p>
+   <p>{{now}}</p>
+    </div>
+</body>
+<script>
+let vm = new Vue({
+    el:'#app',
+    data:{
+        message:'Hello'
+    },
+    computed:{
+        reversedMessage:function(){
+            return this.message.split().reverse().join('')
+        },
+        now:function(){
+            return Date.now()
+        }
+    }
+});
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-03-30/demo01.html" "b/\346\235\250\347\276\216\351\233\252/vue-03-30/demo01.html"
new file mode 100644
index 0000000..e3f69f5
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-03-30/demo01.html"
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>监听属性</title>
+</head>
+<body>
+    <div id="demo">{{fullName}}</div>
+</body>
+<script>
+    let vm = new Vue({
+        el:'#demo',
+        data:{
+            firstName:'foo',
+            lastName:'bor',
+        },
+        // watch:{
+        //     firstName:function(val){
+        //         this.fullName = val + '' + this.lastName
+        //     },
+        //     lastName:function(val){
+        //         this.fullName = this.firstName + '' +val
+        //     }
+        // },
+        computed:{
+            fullName:function(){
+                return this.firstName + '' +this.lastName
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-03-30/demo02.html" "b/\346\235\250\347\276\216\351\233\252/vue-03-30/demo02.html"
new file mode 100644
index 0000000..8011853
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-03-30/demo02.html"
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>监听器</title>
+</head>
+<body>
+    <div id="watch-example">
+        <p>
+          emmmm aaaa/no question:
+          <input v-model="question">  
+        </p>
+        <p>{{answer}}</p>
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el:'#watch-example',
+        data:{
+            question:'',
+            answer:'I cannot give you an answer until you ask a question!'
+        },
+        watch:{
+            question:function(newQuestion, oldQuestion){
+                this.answer = 'Waiting for you atop typing...'
+                this.debouncedGetAnswer()
+            }
+        },
+        created:function(){
+            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...'
+                let vm1 = this
+                axios.get('https://yesno.wtf/api')
+                .then(function(response){
+                    vm1.answer =_.capitalize(response.data.answer)
+                })
+                .catch(function(error){
+                    vm1.answer = 'Error! Could not rreach the API' + error
+                })
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-03-30/\346\250\241\346\235\277\350\257\255\346\263\225.html" "b/\346\235\250\347\276\216\351\233\252/vue-03-30/\346\250\241\346\235\277\350\257\255\346\263\225.html"
new file mode 100644
index 0000000..0ed5af2
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-03-30/\346\250\241\346\235\277\350\257\255\346\263\225.html"
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>模板语法</title>
+</head>
+<body>
+    <div id="app">
+        <div>{{text}}我后面也有值</div>
+        <div v-text="text">我也有值<li>这里也是有值</li></div>
+    <div>{{html}}</div>
+    <div v-html="html">html元素</div>
+    <p>
+        <p></p>
+    </p>
+    <div id="demo"></div>
+    <div v-bind:id="'1_'+id+'_5'"></div>
+     <!--//demo2  demo2_5 -->
+     <div v-bind:attr_id="attrid"></div>
+     <!--自定义属性也行-->
+     <div v-bind:class="class1">class</div>
+    <!---如果对应的值是false或者true，true 或 false不赋值  null undefined 属性都不出现-->
+    <div v-bind:disabled='dis'>显示与不显示emmm</div>
+    <!--todo-->
+    <button v-bind:disabled="dis">aaaaaa</button>
+    <div>{{num+'我是后续输出哈哈哈'}}</div>
+    <div>{{ok?'输出ok':'输出不ok'}}</div>
+    <div>{{val.trim()}}</div>
+    <div>{{echo(val)}}</div>
+    <div v-if="result">if 显示？？？？？？</div>
+    <div v-else="result">else 显示！！！！！</div>
+    <div v-show="result">show  的显示？？？？？？</div>
+    <div v-on:click="click">点击</div><br>
+    <div v-on:click="click2()">点击2</div>
+    </div>
+</body>
+<script>
+let data = {
+    text:'模板语法的文本输出',
+    html:'<span style="color:red">我是html元素啦</span>',
+    id:'demo2',
+    attrid:100,
+    class1:undefined,//如果是class系统就会挂了，vue不能使用关键字作为属性
+    dis:false,
+    num:1000,//最简单js转化 1000+''
+    ok:false,
+    val:'前面有空格，后面也有空格',
+    result:false,
+    click2:function(){//不建议写再这里
+        alert('data func')
+    }
+}
+let vue = new Vue({
+    el:'#app',
+    data:data,
+    methods:{
+        echo:function(a){
+         let b = a;
+         return b;
+        },
+        click:function(){
+            alert('click')
+        }
+    }
+});
+</script>
+</html>
\ No newline at end of file
-- 
Gitee

