From bc762c1a990a9717f36c9983c132eec401fada36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E7=8C=AE=E7=90=BC?= <961895678@qq.com>
Date: Thu, 31 Mar 2022 08:43:37 +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

---
 .../mo01.html"                                | 60 +++++++++++++++++++
 .../on\346\241\210\344\276\213.html"          | 37 ++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 "\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/mo01.html"
 create mode 100644 "\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/on\346\241\210\344\276\213.html"
diff --git "a/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/mo01.html" "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/mo01.html"
new file mode 100644
index 0000000..f78c3b4
--- /dev/null
+++ "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/mo01.html"
@@ -0,0 +1,60 @@
+<!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>Document</title>
+</head>
+<body>
+    <div id="app">
+        <!-- v-text: 设置标签的文本值，将数据绑定到标签的文本值 -->
+        <div v-text="text">goods</div>
+
+        <!-- v-html: 设置标签的innerHtml值，需要绑定包含html元素文本的数据时使用，不需要就使用v-text -->
+        <div v-html="html">html元素</div>
+
+        <!-- v-on: 绑定事件监听器，用户发生的事件，比如点击，拖拉，键盘事件等。缩写： @  例如@click -->
+        <div v-on:click="onMouseClick">鼠标单击</div>
+
+        <!-- v-if: 根据表达式的布尔值切换元素的显示与隐藏（操作dom） ,通过增删dom元素实现 -->
+        <div v-if="resulf">if 显示 </div>
+
+        <!-- v-bind:修改元素属性 如src, title, class等 ， v-bind: 属性名= 表达式-->
+        <div v-bind:disabled="dis">button</div>
+
+        <!-- v-show:与v-if一样，本质是修改元素的display属性 -->
+        <div v-show="resulf">show 显示</div>
+
+        <!-- v-model: 将表单中的数据与Vue中的数据关联起来，双向绑定作用-->
+        <input v-model="text"></input>
+
+        <!-- v-for: 根据数据生成列表结构 ,绑定数组的数据来渲染一个项目列表-->
+        <div v-for="(item,index) in name">
+            {{item}},{{index}}
+        </div>
+    </div>
+    <script>
+        let data = {
+            text: '模板语fa',
+            html: '<span>我是goods</span>',
+            resulf: false,
+            dis:false,
+            text:'小狗',
+            name:[
+                "小红帽","daibw"
+            ]
+        }
+        let vm = new Vue({
+            el: '#app',
+            data: data,
+            methods:{
+                onMouseClick: function(){
+                    alert('click')
+                }
+                
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/on\346\241\210\344\276\213.html" "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/on\346\241\210\344\276\213.html"
new file mode 100644
index 0000000..38de34d
--- /dev/null
+++ "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\272\214\346\254\241\344\275\234\344\270\232/on\346\241\210\344\276\213.html"
@@ -0,0 +1,37 @@
+<!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>Document</title>
+    <style>
+        button{
+            color: brown;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <h2>{{counter}}</h2>
+        <button @click="add">+</button>
+        <button @click="sub">-</button>
+    </div>
+    <script>
+        let app = new Vue({
+            el:"#app",
+            data:{
+                counter:0
+            },
+            methods:{
+                add(){
+                    this.counter++
+                },
+                sub(){
+                    this.counter--
+                }
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

