From 63e9e6905fbc3b1fc9918349f1f76aeb30195a10 Mon Sep 17 00:00:00 2001
From: szq <129>
Date: Sat, 5 Jun 2021 17:43:50 +0800
Subject: [PATCH] =?UTF-8?q?Vue=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...3\345\205\245\347\273\221\345\256\232).md" | 213 ++++++++++++++++++
 1 file changed, 213 insertions(+)
 create mode 100644 "\346\226\275\345\277\227\345\274\272/2021-6-5(\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md"

diff --git "a/\346\226\275\345\277\227\345\274\272/2021-6-5(\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md" "b/\346\226\275\345\277\227\345\274\272/2021-6-5(\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md"
new file mode 100644
index 0000000..872ae18
--- /dev/null
+++ "b/\346\226\275\345\277\227\345\274\272/2021-6-5(\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md"
@@ -0,0 +1,213 @@
+# 基础用法
+1. 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素,v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值
+```
+    <div id="app">
+        <input type="text" v-model="txt" @input="valChange" value="1">
+    </div>
+
+    <script>
+        let app1=new Vue({
+            el:'#app',
+            data:{
+                txt:'应该写点什么'
+            },
+            methods:{
+                valChange:function(){
+                    console.log(this.txt);
+                }
+            }
+        })
+    </script>
+```
+ value 的值会被覆盖
+2. v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
+```
+text 和 textarea 元素使用 value property 和 input 事件；
+checkbox 和 radio 使用 checked property 和 change 事件；
+select 字段将 value 作为 prop 并将 change 作为事件
+```
+# 文本
+1. 
+```
+    <div id="app-1">
+        <input v-model="message" placeholder="edit me">
+        <p>{{ message }}</p>
+    </div>
+    <script>
+        let vm=new Vue({
+            el:'#app-1',
+            data:{
+                message:'写点什么'
+            }
+        })
+    </script>
+```
+# 多行文本
+1. 和文本的区别
+```
+    <div id="app-1">
+        <!-- <input v-model="message" placeholder="add multiple lines"> -->
+        <textarea v-model="message" placeholder="add multiple lines">
+        </textarea><p style="white-space: pre-line;">{{ message }}</p>
+    </div>
+    <script>
+        let vm=new Vue({
+            el:'#app-1',
+            data:{
+                message:'写点什么'
+            }
+        })
+    </script>
+```
+# 复选框
+1. 单个复选框，绑定到布尔值
+```
+    <div id="app-2">
+        <input type="checkbox" v-model="checked">pick 我
+        <label for="">{{ checked }}</label>
+    </div>
+    <script>
+        let app2 = new Vue({
+            el: '#app-2',
+            data: {
+                checked:''
+            }
+        })
+    </script>
+```
+2. 多个复选框，绑定到同一个数组
+```
+    <div id="app-3">
+        <input type="checkbox" v-model="checked" value="Jack">Jack
+        <input type="checkbox" v-model="checked" value="Join">Join
+        <input type="checkbox" v-model="checked" value="Modl">Modl
+        <br>
+        <!-- <label for="">{{checked}}</label> -->
+    </div>
+    <script>
+        new Vue({
+            el:'#app-3',
+            data:{
+                checked:[]
+            }
+        })
+    </script>
+```
+# 单选按钮
+1. 
+```
+    <div id="app-4">
+        <input type="radio" value="One" v-model="picked">pick
+        <input type="radio" value="Two" v-model="picked">bick
+        <br>
+        <!-- <label for="">{{picked}}</label> -->
+    </div>
+    <script>
+        new Vue({
+            el:'#app-4',
+            data:{
+                picked:''
+            }
+        })
+    </script>
+```
+# 选择框
+1. 单选时
+```
+    <div id="app-5">
+        <select name="" id="" v-model="selecty">
+            <option disabled value="">请选择</option>
+            <option>兔子</option>
+            <option>鹰酱</option>
+            <option>棒子</option>
+            <option>熊大哥</option>
+        </select>
+        <br>
+        <!-- <span>{{selecty}}</span> -->
+    </div>
+    <script>
+        new Vue({
+            el:'#app-5',
+            data:{
+                selecty:''
+            }
+        })
+    </script>
+```
+ opting 标签里的 disabled 元素的作用是不可选
+2. 多选时
+```
+    <div id="app-5">
+        <select name="" id="" v-model="selecty" multiple>
+            <option>兔子</option>
+            <option>鹰酱</option>
+            <option>棒子</option>
+            <option>熊大哥</option>
+        </select>
+        <br>
+        <!-- <span>{{selecty}}</span> -->
+    </div>
+    <script>
+        new Vue({
+            el:'#app-5',
+            data:{
+                selecty:[]
+            }
+        })
+    </script>
+```
+3. 用 v-for 渲染动态选项
+```
+    <div id="app-6">
+        <select name="" id="" v-model="selected">
+            <option v-for="option in options" v-bind:value="option.value">
+                {{option.text}}
+            </option>
+        </select>
+        <span>{{selected}}</span>
+    </div>
+    <script>
+        new Vue({
+            el:'#app-6',
+            data:{
+                selected:'A',
+                options:[
+                    {text:'one',value:'A'},
+                    {text:'two',value:'B'},
+                    {text:'three',value:'C'}
+                ]
+            }
+        })
+    </script>
+```
+# 值绑定
+1. 对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)
+```
+<!-- 当选中时，`picked` 为字符串 "a" -->
+<input type="radio" v-model="picked" value="a">
+
+<!-- `toggle` 为 true 或 false -->
+<input type="checkbox" v-model="toggle">
+
+<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
+<select v-model="selected">
+  <option value="abc">ABC</option>
+</select>
+```
+ 但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 值可以不是字符串
+# 复选框
+1. 
+```
+    <div id="app-7">
+        <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
+    </div>
+    <script>
+        let app7=new Vue({
+            el:'#app-7',
+            data:{
+                toggle:'no'
+            }
+        })no
+    </script>
+```
+ 选中时 app7.toggle 是 yes，没选中时是 no
\ No newline at end of file
-- 
Gitee