## 一、MVVM框架 MVVM框架分为三个层: * M:模型层,主要负责业务相关数据 * V:视图层 * VM:V与M沟通的桥梁,负责监听M或V的修改,是实现MVVM双向绑定的要点。 MVVM支持双向绑定,当M层修改时V层也会改变,当V层修改时M层也会改变吗。 ## 二、Vue简介 Vue是一个MVVM框架。它是一套用于构建用户界面的渐进式框架。 它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助我们高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。 ## 三、Vue安装 #### 1、采用CDN 在开发环境可以用最新版本 ```javascript ``` 在生产环境下需要指定特定的版本号和内部版本,避免版本更新带来的不兼容性 ```javascript ``` #### 2、下载到本地 打开最新的网址`https://unpkg.com/vue@3` 右键 -> 另存为 ## 四、数据绑定 #### 1、使用容器模板 ① 引入JS文件 -> ② 创建视图层容器 -> ③ 创建Vue对象 -> ④ 创建template模板 -> ⑥ 挂载到视图层容器 ```html Title ``` #### 2、单向数据绑定 ```html Title {{msg}} ``` #### 3、双向数据绑定 实现双向保定需要用到特有的`v-model`属性 ```html Title {{ msg }} ``` #### 4、表单绑定 ##### 多行文本域 ```html Multiline message is: {{ message }} ``` **注意**:注意在 `` 中是不支持插值表达式的,需要使用 `v-model` 来替代 ##### 复选框 在中需要 ```html Checked names: {{ checkedNames }} Jack John Mike ``` ##### 单选按钮 ```html Picked: {{ picked }} One Two ``` ##### 下拉列表 ```html Selected: {{ selected }} Please select one A B C ``` 下拉列表选项可以动态定义 ```html Selected: {{ selected }} {{ option.text }} ``` ##### 多选列表 ```html Selected: {{ selected }} A B C ``` Loading... ## 一、MVVM框架 MVVM框架分为三个层: * M:模型层,主要负责业务相关数据 * V:视图层 * VM:V与M沟通的桥梁,负责监听M或V的修改,是实现MVVM双向绑定的要点。 MVVM支持双向绑定,当M层修改时V层也会改变,当V层修改时M层也会改变吗。 ## 二、Vue简介 Vue是一个MVVM框架。它是一套用于构建用户界面的渐进式框架。 它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助我们高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。 ## 三、Vue安装 #### 1、采用CDN 在开发环境可以用最新版本 ```javascript <script src="https://unpkg.com/vue@3"></script> ``` 在生产环境下需要指定特定的版本号和内部版本,避免版本更新带来的不兼容性 ```javascript <script src="https://unpkg.com/vue@3.5.22"></script> ``` #### 2、下载到本地 打开最新的网址`https://unpkg.com/vue@3` 右键 -> 另存为 ## 四、数据绑定 #### 1、使用容器模板 ① 引入JS文件 -> ② 创建视图层容器 -> ③ 创建Vue对象 -> ④ 创建template模板 -> ⑥ 挂载到视图层容器 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 视图层容器 --> <div id="app"> </div> <script src="./assets/js/vue.global.js"></script> <script> // 创建Vue对象 Vue.createApp({ template:'<p>hello world</p>' // 视图层模板 }).mount('#app'); </script> </body> </html> ``` #### 2、单向数据绑定 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 视图层容器 --> <div id="app"> <!-- 绑定msg --> <p>{{msg}}</p> </div> <script src="./assets/js/vue.global.js"></script> <script> // 创建Vue对象 Vue.createApp({ // 所有Vue可操作数据放在data函数中 data() { // 返回声明数据的值 return { msg: 'hello world' } } }).mount('#app'); </script> </body> </html> ``` #### 3、双向数据绑定 实现双向保定需要用到特有的`v-model`属性 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 视图层容器 --> <div id="app"> <p>{{ msg }}</p> <input type="text" v-model="msg"> </div> <script src="./assets/js/vue.global.js"></script> <script> // 创建Vue对象 Vue.createApp({ data() { return { msg: 'hello world' } } }).mount('#app'); </script> </body> </html> ``` #### 4、表单绑定 ##### 多行文本域 ```html <div id="app"> <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <!-- 此处写textarea会使文章页面报错,若要复制请自行补全 --> <textare v-model="message" placeholder="add multiple lines"/> </div> <script> Vue.createApp({ data() { return { message:'' }; } }).mount('#app') </script> ``` **注意**:注意在 `<textarea>` 中是不支持插值表达式的,需要使用 `v-model` 来替代 ##### 复选框 在中需要 ```html <div id="app"> <div>Checked names: {{ checkedNames }}</div> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" /> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames" /> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" /> <label for="mike">Mike</label> </div> <script> Vue.createApp({ data() { return { checkedNames: [] }; } }).mount('#app') </script> ``` ##### 单选按钮 ```html <div id="app"> <div>Picked: {{ picked }}</div> <input type="radio" id="one" value="One" v-model="picked" /> <label for="one">One</label> <input type="radio" id="two" value="Two" v-model="picked" /> <label for="two">Two</label> </div> <script> Vue.createApp({ data() { return { picked : '' }; } }).mount('#app') </script> ``` ##### 下拉列表 ```html <div id="app"> <div>Selected: {{ selected }}</div> <select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select> </div> <script> Vue.createApp({ data() { return { selected : '' }; } }).mount('#app') </script> ``` 下拉列表选项可以动态定义 ```html <div id="app"> <div>Selected: {{ selected }}</div> <select v-model="selected"> <option v-for="option in options" :value="option.value"> {{ option.text }} </option> </select> </div> <script> Vue.createApp({ data() { return { selected : '', options : [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] }; } }).mount('#app') </script> ``` ##### 多选列表 ```html <div id="app"> <div>Selected: {{ selected }}</div> <select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option> </select> </div> <script> Vue.createApp({ data() { return { selected : [] }; } }).mount('#app') </script> ``` 最后修改:2025 年 10 月 22 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 👆请简单粗暴地爱我。