From a2bd2a97c2d2523888beeca8f5612fe946158655 Mon Sep 17 00:00:00 2001
From: Xiaopang <1596637551@qq.com>
Date: Mon, 31 May 2021 20:54:18 +0800
Subject: [PATCH] =?UTF-8?q?2021-5-29(=E6=A8=A1=E6=9D=BF=E8=AF=AD=E6=B3=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...1\346\235\277\350\257\255\346\263\225).md" | 101 ++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 "\350\203\241\346\260\270\345\230\211/2021-5-29(Vue\346\250\241\346\235\277\350\257\255\346\263\225).md"
diff --git "a/\350\203\241\346\260\270\345\230\211/2021-5-29(Vue\346\250\241\346\235\277\350\257\255\346\263\225).md" "b/\350\203\241\346\260\270\345\230\211/2021-5-29(Vue\346\250\241\346\235\277\350\257\255\346\263\225).md"
new file mode 100644
index 0000000..4f93857
--- /dev/null
+++ "b/\350\203\241\346\260\270\345\230\211/2021-5-29(Vue\346\250\241\346\235\277\350\257\255\346\263\225).md"
@@ -0,0 +1,101 @@
+# 模板语法
+
+## 原始Html
+```
+    <div id="app">
+        <span>{{name}}</span>
+        <br>
+        <span v-html="name"></span>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        var app = new Vue({
+            el:"#app",
+            data(){
+                return {
+                    name : "<h1>xiaopang</h1>"
+                }
+            }
+        });
+    </script>
+```
+### 直接用{{}}打印值的话html属性则不会附带上，用v-html=""会将值附带上html属性
+
+## 表达式与语句的不同：
+### 语句包含表达式；表达式一般只有一个返回值如：{{num + 1}}；
+
+# 指令Vue.js的指令都带有 v-
+
+# 参数
+## 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
+```
+    <div id="app">
+        <span>{{name}}</span>
+        <br>
+        <a v-bind:href="url">这是一个链接</a>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        var app = new Vue({
+            el:"#app",
+            data(){
+                return {
+                    url : "qs.xiaopangbupang.top"
+                }
+            }
+        });
+    </script>
+```
+## 如下绑定的值可以在网页上动态更改， 指令可以用于响应式地更新 HTML 属性
+```
+<body>
+    <div id="app">
+        <button v-bind:disabled="isButtonDisabled">咕咕咕咕</button> //一个按钮
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app=new Vue({
+            el:"#app",
+            data:{
+                isButtonDisabled:true   //按钮禁用 打开
+            }
+        })
+    </script>
+</body>
+```
+
+## 动态参数(点击给个函数，在函数中写一些好玩的东西)
+```
+<body>
+    <div id="app">
+        这是你的第{{msg}}次咕咕我了🔪
+        <input type="button" v-on:click="btnClick" value="咕咕咕咕">
+        <a v-bind:[parmAttribute]="url">去一个快乐的地方</a>    //[parmAttribute] 动态参数 绑定了下面的parmattribute
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+
+    <script>
+        let app=new Vue({
+            el:"#app",
+            data:{
+                url:'http://4399.com',
+                msg:0,
+                parmattribute:'href',   //parmattribute绑定了一个href路径 然后上面的按钮绑定了parmattribute 所以上面的那个a超链接绑定了href路径
+                parmArr:['fish','pig','ant','pink','blue']  //写下想要随机变成的东西
+            },
+            methods:{
+                btnClick:function(){    //链接点点击事件 所以点按钮 那个链接前面的名字会改变
+                    let rnd=Math.floor(Math.random() * this.parmArr.length);    //this.parmArr.length 找到app里面的parmArr 并且知道它的长度 不让他超过这个长度
+                    console.log(rnd); //输出的随机数
+                    this.msg=this.msg+1,
+                    this.parmattribute=this.parmArr[rnd]    //这个动态参数会是上面自己写的那个随机数   this.parmArr[rnd]这个app里面的parmArr里面的数组的下标 所以那个a链接的动态参数会变
+                }
+            }
+        })
+    </script>
+</body>
+```
\ No newline at end of file
-- 
Gitee

