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/[email protected]/dist/vue.min.js

• VS创建一个.html的文件

• 
         {{message}}
     
     

• < div>< /div>块为view层（模板）

• < script>< /script>块为Model层（数据）

• ViewModel的体现：在浏览器的控制面板（Console),输入

  vn.massage = "原神启动"

  ViewModle的双向绑定，网页随机刷新。

  
• 

• bind等被称为指令，指令前面有前缀v-,表示Vue的特殊特性，该指令的意思是： 将元素节点的title特性和Vue的实列massage属性统一起来

  vue的循序结构

  • if的条件判断

• 
         
  A
         
  B
         
  D
         
  C
      
      

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

• 

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

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

• 
      //输入的文本： {{message}}
      //输入的文本： <textarea name="" cols="20" rows="10" v-model="message">{{message}}
          输入的文本： {{message}}
          //{{message}}用于输出用户看到的数据。其数据随文本框数据的改变而改变
      
      

  以下案例用v-model指令对事件进行监听

• 
          输入的文本： 男
                      女
          //{{message}}用于输出用户看到的数据。其数据随文本框数据的改变而改变
          
  
              选中了谁：{{xiaoming}}
          
      /*
          选择框：
          
              --请选择--
              A
              B
              C
           
      */