HTML简单实现v-if与v-for与v-model

HTML简单实现v-if与v-for与v-model
Vue启动！！
- 首先VIewModel将View和Model连接一起，Model的数据改变View的数据也变
- 使用Visual Studio Code
- 启动Vue需要vue.js插件和导入CDN(包)
- vue.js插件：CTRL + shift + x 在搜索栏搜
- 索vue.js安装即可
- CDN： https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js
- VS创建一个.html的文件
- ```
"app">
       {{message}}
   
```
<script>
let vn = new Vue ({
el: "#app",//el为元素的意思,选取id选择器
//data更改数据
data: {
message: "Vue启动"
}
});
script>

< div>< /div>块为view层（模板）
< script>< /script>块为Model层（数据）
ViewModel的体现：在浏览器的控制面板（Console),输入
```
vn.massage = "原神启动"
```
ViewModle的双向绑定，网页随机刷新。
bind等被称为指令，指令前面有前缀v-,表示Vue的特殊特性，该指令的意思是：将元素节点的title特性和Vue的实列massage属性统一起来

vue的循序结构
- if的条件判断


"app">
       <h1 v-if="type==='A'">Ah1>
       <h1 v-else-if="type==='B'">Bh1>
       <h1 v-else-if="type==='D'">Dh1>
       <h1 v-else>Ch1>

<script>

        let vm = new Vue ({

el: "#app",

data: {

type: 'A'

}

});

script>

for循环语句，与foreach()结构相似

输入的数据框中[ { } , { } , { } ]用于输入多组数据

v-model指令在表单< input>,< textarea>,< select>在元素上创建双向数据绑定，它赋值监听用户输入事件来更新数据，


"app">
    //输入的文本： {{message}}</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-comment">//输入的文本： <textarea name="" cols="20" rows="10" v-model="message">{{message}}
        输入的文本： "text" v-model = "message">{{message}}
        //{{message}}用于输出用户看到的数据。其数据随文本框数据的改变而改变

"app"> 输入的文本： "radio" name="sex" value="男" v-model="xiaoming">男 "radio" name="sex" value="女" v-model="xiaoming">女 //{{message}}用于输出用户看到的数据。其数据随文本框数据的改变而改变选中了谁：{{xiaoming}} /* 选择框： */

Vue启动！！

vue的循序结构