From 721a625c90a1cd49318e78bdb262f0534cd741b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E9=9D=92=E9=9D=92?= <2910939733@qq.com>
Date: Wed, 30 Mar 2022 11:44:11 +0800
Subject: [PATCH] vue3.30

---
 .../vue/3.29 vue/demo01.html"                 | 74 +++++++++++++++++
 .../demo01.html"                              | 83 +++++++++++++++++++
 2 files changed, 157 insertions(+)
 create mode 100644 "\351\251\254\351\235\222\351\235\222/vue/3.29 vue/demo01.html"
 create mode 100644 "\351\251\254\351\235\222\351\235\222/vue/3.30 vue\346\250\241\346\235\277\350\257\255\346\263\225/demo01.html"
diff --git "a/\351\251\254\351\235\222\351\235\222/vue/3.29 vue/demo01.html" "b/\351\251\254\351\235\222\351\235\222/vue/3.29 vue/demo01.html"
new file mode 100644
index 0000000..f60096c
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/vue/3.29 vue/demo01.html"	
@@ -0,0 +1,74 @@
+<!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>vue页面</title>
+    <style>
+        .aa{
+            /* width: 100%; */
+            width: 370px;
+            margin: 20% 40%;
+            background-color: white;
+            text-align: center;
+        }
+        .aa > div{
+            font-weight: bold;
+            font-size: 20px;
+        }
+    </style>
+
+</head>
+<body style="background-color:#f7f7f7;">
+    <div class="aa">
+        <div id="el2">
+            {{message}}<br>
+            <!-- v-bind--“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。 -->
+            <span v-bind:title="message">
+                鼠标悬停几秒钟查看此处动态绑定的提示信息！
+              </span>
+        </div>
+    
+        <div id="el">
+            {{massge}}<br>
+            {{massge}}<br>
+            {{mulit.msg}}<br>
+            {{show}}<br>
+            {{date}}
+        </div>
+    
+    </div>
+    
+    
+    <script>
+        let vm2 = new Vue({
+            el:'#el2',
+            data:{
+                message:''+ new Date().toLocaleString()//中国标准时间
+            }
+        })
+        let vm = new Vue({
+            el:'#el',
+            data:{
+                massge:'炸鸡',
+                show:'嘿嘿',
+                mulit:{
+                    msg:'快乐水'
+                },
+                date:'炸鸡+快乐水=嘿嘿！'
+            }
+        });
+
+        
+        //在后台打印
+        console.log(vm.$el);
+        //原生的js获取
+        console.log(document.getElementById('el2'));
+        //data数据调用
+        console.log(vm.massge);
+        console.log(vm.$data.show);  
+        console.log(vm.mulit.msg);      
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\251\254\351\235\222\351\235\222/vue/3.30 vue\346\250\241\346\235\277\350\257\255\346\263\225/demo01.html" "b/\351\251\254\351\235\222\351\235\222/vue/3.30 vue\346\250\241\346\235\277\350\257\255\346\263\225/demo01.html"
new file mode 100644
index 0000000..b68a730
--- /dev/null
+++ "b/\351\251\254\351\235\222\351\235\222/vue/3.30 vue\346\250\241\346\235\277\350\257\255\346\263\225/demo01.html"	
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模板语法</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+<body>
+    <div id="app">
+        <div>{{text}}(后面可以加东西)</div>
+        <div v-text='text'>我这里后面加东西也显示不出来</div>
+        
+        <div>{{html}}</div>
+        <div v-html='html'>(这里加字段在浏览器上也看不到)</div>
+
+        <div id="demo01"></div>
+        <div v-bind:id='id' ></div>
+        <!-- 要让它变成 1_demo01 或者 demo01_1 的话，可以在前面或者后面用+号来拼接组成 -->
+        <div v-bind:id="'1_'+id+'_1'"></div>
+
+        <div>{{attrid}}我是000</div>
+        <div v-bind:attr_id='attrid'></div>
+
+        <div v-bind:classs='classs'>hello class</div>
+
+        <div v-bind:disabled='dis'>显示与不显示</div>
+        <button v-bind:disabled='dis'>提交</button> <!---是true是提交按钮是禁用状态，是false,null时是可以点击状态--->
+
+        <div>{{num+"我是后面加入的"}}</div>
+
+        <div>{{ok?'输出ok':'输不出ok'}}</div>
+
+        <!-- <div>{{val}}</div> -->
+        <div>{{val.trim()}}</div><!--trim()用于删除字符串的头尾空白符-->
+
+        <!-- 条件判断-->
+        <div v-if='results'>if 能显示</div>
+        <div v-else = 'results'>else 不能显示</div>
+
+        <div v-show='results'>show 显示</div>
+
+        <div v-on:click='click1'>点击</div>
+        <div v-on:click='click2()'>点点</div>
+    </div>
+
+    <script>
+        let data={
+            text:'今天学习模板语法',
+            html:'<span style="color: blueviolet;">我是html元素</span>',
+            id:'demo01',
+            attrid:100,
+            classs:undefined,
+            dis:true,
+            num:200,//js转化 -->  200+''
+            ok:true,
+            val:'  前面有空格，后面也有空格  ',
+            results:false,
+            click2:function(){
+                    alert('data click')
+                },
+                
+
+        }
+
+        let vm = new Vue({
+            el:'#app',
+            data:data,
+            met:{
+                echo:function(a){
+                    let b=a;
+                    return b;
+                },
+                click: function () {
+                alert('click')
+            }
+            
+                
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

