测开vue学习4：双向绑定，

ref

• 概念：
  1，ref 为一个元素或者子组件的应用
  2，组件中定义的所有的ref都会放在当前组件中的refs属性中

  
  设置.png

• 调用

  
  引用.png

v-mode

1，v-bin 单向绑定，只能将model中的数据传输给绑定的属性
2，v-model 为双向绑定，可以将model中的数据传输给绑定的属性，也可以将用户输入的内容传给model来处理
3，只能只input,textarea,select中使用

image.png

• 在form中使用v-mode

<template>
  <div class="login">
        <!-- <form action="" method="post">
            <label for="uaername">用户名:</label>
            <input type="text" id="username" placeholder="请输入用户名" v-model= 'username'><br>
            <label for="pass">密&nbsp;&nbsp;&nbsp;码:</label>
            <input type="password" id="pass" placeholder="请输入密码" v-model = 'password'><br>

        </form> -->

 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" 
 class="demo-ruleForm" :label-position="labelPosition">
    
          <el-form-item label="用户名" prop="username">
             <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password">
              <el-input type="password" v-model="ruleForm. password" autocomplete="off"></el-input>
          </el-form-item>
  
</el-form>
  </div>
</template>

<script>
export default {
    name:'login',
    data(){
        return{
            // username : '111',
            // password : '222',
             labelPosition:'right',
             ruleForm: {
                  username : '111',
                  password : '222',
        
          }
        }
    }

}
</script>

<style>
  /* input{
      margin: 10px auto;
      font-size: medium;
    
  }
  label{
      margin-right: 10px ;
  } */
  .el-form{
      width: 300px;
      margin: 50px auto;
  }
</style>

vue的生命周期：

• beforeCreate : 执行beforeCreate钩子，监控observe Data 监控数据对象变化
• create : 模板渲染没有开始
• beforeMount : 开始之执行beforeMount挂载钩子，此时页面还没有生成Html页面上去
• mounted : 挂载完成，也就是模板中的html渲染到html页面中，此时可以做一些ajax操作，mounted只会执行一次
• beforeUpdate : 更新之前的事件钩子
• update； 更新完成后的钩子
• beforeDestory : Vue实例销毁前执行的钩子

• 调用： 编辑后会自动调用

  
  image.png

组件

• 全局组件 ： 在/src/mian.js中进行声名的组件是全局组件

• 子组件

  
  image.png
  image.png
• 组件之间的传值
  父组件，子组件之间传值
  • 父组件向子组件传值：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 在父组件中给子组件传值 -->
    <!-- 
     
     <study/>
     <projiecttable/> -->
     <HelloWorld msg="学习VUE" :title="title"/>
     <greeting/>
     <!-- <HelloWorld/> -->
     <!-- <Elementui_study/> -->
     <!-- <Newtable/> -->
     <!-- <newtable2/> -->
     <!-- <login/> -->
  </div>
</template>

<script>
// 导入子组件
import HelloWorld from './components/HelloWorld.vue'
// import greeting from './components/greeting.vue'
// import study from './components/study.vue'
// import  Projiecttable  from './components/Prijecttable.vue'
// import Newtable from './components/Newtable.vue'
// import newtable2 from './components/newtable2.vue'
// import login from './components/login.vue'
export default {
  // 定义组件名称
  name: 'app',
  components: {  //声名子组件
    HelloWorld,
    // greeting,
    // study,
    // Projiecttable,
    // Newtable,
    // newtable2,
    // login,
    
},
data(){
  return{
    title:'kdd',
  }
}
}

子组件获取父组件的值：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{title}}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: { //从父组件中传入数据
    msg: String,
    title : Number,
  }
}
</script>