3.双向数据绑定(v-model)
我们使用组件 v-model: 进行实现视图和数据的双向绑定，这里我们对双向数据进行了绑定。单向的数据我们没有进行数据的绑定。
- 在普通的输入框中,我们可以直接写v-model=‘xxx’,会自动默认绑定value.
- v-model: 绑定的式标签属性
- 只限于文本框进行使用双向绑定
双向数据绑定: <input type="text" v-model:value="message">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据绑定</title> <script src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> 单向数据绑定: <input type="text" :value="message"><br><br> <!-- 进行添加语句 v-model:属性='xxxx' --> 双向数据绑定: <input type="text" v-model:value="message"> </div> <!-- 创建一个Vue实列 --> <script type="text/javascript"> new Vue({ el:'#root', data:{ message:'吉士先生' } }); </script> </body> </html>
(六)、MVVM模型
1.解释MVVM的信息
- M: 模型(Model): 对应data中的数据
- V: 视图(View) 模板代码
- VM: 视图模型(ViewModel) : Vue实列对象
视图一直监听Model,Model一直绑定视图 - el 相当于Model绑定视图
2.测试vm改变数据影响视图
在这里我们等待服务器两秒后,执行方法()=>{}.
延时函数 setTimeout(function|delayTime); setTimeout(()=>{ vm.message='龙川萍' },2000)
- 我们发现Vue实列可以帮助我们进行改变视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据绑定</title> <script src="../js/vue.js"></script> </head> <body> <!-- 1.单项数据绑定(v-bind): 数据只能从data刘翔页面 2.双向数据绑定(v-model): 数据不仅能从data流向页面，还能从页面刘翔数据 备注: 1.双向数据绑定一般是对于表单元素 2.v-model:value 可以简单的携程 v-model 默认收集value值 --> <!-- 准备好一个容器 --> <div id="root"> 单向数据绑定: <input type="text" :value="message"><br><br> <!-- 进行添加语句 v-model:属性='xxxx' --> 双向数据绑定: <input type="text" v-model:value="message"> </div> <!-- 创建一个Vue实列 --> <script type="text/javascript"> var vm=new Vue({ el: '#root', data:{ message:'吉士先生' } }); // 设置定时函数，两秒钟后调用函数()=>{}, setTimeout(()=>{ vm.message='龙川萍' },2000) </script> </body> </html>
3.el绑定视图的两种方法($mount())⭐
第一种: el 绑定的方法
el:'#root'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>{{message}}</h1> </div> <script> //el: 绑定视图的第一种写法 new Vue({ el:'#root', data:{ message:'你好，吉士先生' } }); </script> </body> </html>>
第二种:vm.$mount(''),绑定
vm.$mount('#root')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>{{message}}</h1> </div> <script> //el: 绑定视图的第一种写法 /* new Vue({ el:'#root', data:{ message:'你好，吉士先生' } });*/ //el : 第二种绑定视图 var vm=new Vue({ data:{ message:'你好，吉士先生' } }); vm.$mount('#root') </script> </body> </html>
4.⭐JS方法的七种定义以及调用⭐
第一种定义一个普通的方法 function 方法名(参数){}。调用方式: 方法名()
- 调用方式: 方法名()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <button onclick="a2()">点击我调用方法1</button> </div> <script type="text/javascript"> function a2(){ console.log(2) } </script> </body> </html>
第二种 属性名:function 方法名(参数){}。调用方式: 方法名()
- 调用方式: 方法名()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <button onclick="a()">点击我调用方法1</button> </div> <script type="text/javascript"> a1:function a(){ console.log(1) } </script> </body> </html>
第三种: var 对象={属性名:function(参数类型){}}。调用方式: 对象.属性名();
- 调用方式: 对象.属性名();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <button onclick="obj.a3()">点击我调用方法3</button> </div> <script type="text/javascript"> // 定义一个对象。对象的名字叫做obj var obj={ a3:function(){ console.log(3) } } </script> </body> </html>
第四种: var 对象={属性名:function 方法名(参数类型){}}。调用方式: 对象.属性名();
- 调用方式: 对象.属性名();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <button onclick="obj2.a5()">点击我调用方法4</button> </div> <script type="text/javascript"> // 第四种 对象里面的属性是方法 有函数名 var obj2 = { a5: function a6() { console.log(4) } } </script> </body> </html>
第五种: var 对象={ 属性1:{ 属性2: function 方法名(){}}}。调用方式: 对象.属性1.属性2()
