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">密 码:</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>
