day51 -- 数据绑定和el，data的两种写法

数据绑定

单向绑定

 <div id="root">
     单向数据绑定：<input type="text" v-bind:value="name"><br>
 ​
 </div>
 <script>
     new Vue({
         el:'#root',
         data:{
             name:'gugu'
         }
     })
 </script>

 

v-bind：数据从data流向页面

双向绑定

 <div id="root">
     双向数据绑定：<input type="text" v-model="name">
 <!--    v-model只能应用与表单类的 有value属性的标签 实现双向绑定-->
 ​
 </div>
 <script>
     new Vue({
         el:'#root',
         data:{
             name:'gugu'
         }
     })
 </script>

 

v-model：数据不仅能从data流向界面 还能从页面流向data

总结

 <!--
     vue中有两种绑定的方式：
     1.单向绑定：v-bind:数据只能从data流向页面
     2.双向绑定：v-model：数据不仅能从data流向页面，还可以从页面流向data
     备注：
     1.双向绑定一般使用在表单类元素上（input，select等）
     2.v-model：value 可以简写为v-model
 -->

 

el和data的两种写法

el的两种写法：

创建vue时配置

 <div id="root">
     <h1>hello,{{name}}</h1>
 ​
 </div>
 const v = new Vue({
 ​
       el:'#root',  第一种写法
       data:{
           name:'gugu'
       }
   })

 

在vue中配置，也可以不定义vue实例

通过vue实例调用

<div id="root">
     <h1>hello,{{name}}</h1>
 ​
 </div>
  const v = new Vue({
 ​
       data:{
           name:'gugu'
       }
   })
   v.$mount('#root')//  第二种写法

 

先创建vue实例，再通过v.$mount('#root')指定el的值

data的两种写法：

对象式

在创建vue时在其中定义data

//data的第一种写法：对象式
 /*
 data:{
     name:'gugu',
 }
  */

 

函数式

 //data的第二种写法：函数式
 data:function () {
     console.log('###',this)//此处的this是vue实例对象
     //必须有返回对象
     return{
         name:'gugu'
     }
 }
 //可以简写为data(){}

 

总结

<!--
     data与el的两种写法
     1.el的两种写法
         1.new vue时配置el属性
         2.先创建vue实例，再通过v.$mount('#root')指定el的值
     2.data的两种写法
         1.对象式
         2.函数式：在组件中，data必须使用函数式
     3.原则：
         由vue管理的函数，不能写箭头函数，否则不是vue实例
 -->

 

over