表单类
//单标签
<label for="">姓名</label><input type="text" v-model="user.texe">
//文字如何显示出来
let v = new Vue({
el: "#app",
data:
user: {
texe: "张三",
}
},
//单选框通过v-model在js中定义sex默认值,这个默认是跟value有关联 如果js中user.sex值和value不一样 那就无效 而且二选一他们必须v-model="user.sex" 是一致性 其中user.sex是可以修改
<label for="">性别</label>
<input type="radio" v-model="user.sex" value="男"><label for="">男</label>
<input type="radio" v-model="user.sex" value="女"><label for="">女</label>
//vue js
let v = new Vue({
el: "#app",
data: {
tel: "", //先给一个空的让用户输入 确认密码
user: {
sex: "男",
}
}
});
//复选框通过type="checkbox" 选择它类型,在这个复选框中他们的v-model="自定义名"自定义名必须一致 而且必须加value。配合js中把它定义的hobby:[]通过数组形式 里面写想给它默认的value对应字符串文字 他就把它对应value那个表单显示出来
<input type="checkbox" v-model="user.hobby" value="跳舞"><label for="">跳舞</label>
<input type="checkbox" v-model="user.hobby" value="吃饭"><label for="">吃饭</label>
<input type="checkbox" v-model="user.hobby" value="写代码"><label for="">写代码</label>
//js代码
let v = new Vue({
el: "#app",
data: {
user: {
hobby: ["唱歌", "写代码"],
}
}
});
//多选下拉在select 加multiple属性就好 想多选按住shlft键 如果使用v-model 记得在js 里面data初始化哪里加默认文字如下图
<select v-model="user.select" multiple>
<option value="计算机二级">计算机二级</option>
<option value="英语四级">英语四级</option>
<option value="英语六级">英语六级</option>
</select>
let v = new Vue({
el: "#app",
data: {
user: {
select: "计算机二级",
}
}
});
//事件绑定
//disabled这是设置禁用属性 通过冒号:disabled="!user.agg"绑定上面属性而且产生关联
<label for="">我同意</label><input type="checkbox" v-model="user.agg">
<br>
//<!-- :disabled="!user.agg" 绑定上面input事件 -->
<input type="submit" :disabled="!user.agg" v-model="user.sub" @click="fan">
完整代码如下 html模块
<div id="app" :key=>
<label for="">姓名</label><input type="text" v-model="user.texe">
<br>
<label for="">电话</label><input type="tel" v-model="user.texe2">
<br>
<label for="">密码</label><input type="text" v-model="user.texe3">
<br>
<label for="">性别</label><input type="radio" v-model="user.sex" value="男"><label for="">男</label>
<input type="radio" v-model="user.sex" value="女"><label for="">女</label>
<br>
<label for="">爱好</label><input type="checkbox" v-model="user.hobby" value="唱歌"><label for="">唱歌</label>
<input type="checkbox" v-model="user.hobby" value="跳舞"><label for="">跳舞</label>
<input type="checkbox" v-model="user.hobby" value="吃饭"><label for="">吃饭</label>
<input type="checkbox" v-model="user.hobby" value="写代码"><label for="">写代码</label>
<br>
<label for="">密码</label><input type="tel" v-model="user.tel">
<br>
<!-- 用来做判断 不能放在user不然会被影响 -->
<label for="">确认密码</label><input type="tel" v-model="tel">
<br>
<label for="">专业</label>
<select v-model="user.select">
<option value="计算机二级">计算机二级</option>
<option value="英语四级">英语四级</option>
<option value="英语六级">英语六级</option>
</select>
<br>
<label for="">备注</label>
<textarea name="" v-model="user.remark"></textarea>
<br>
<label for="">我同意</label><input type="checkbox" v-model="user.agg">
<br>
<!-- :disabled="!user.agg" 绑定上面input事件 -->
<input type="submit" :disabled="!user.agg" v-model="user.sub" @click="fan">
</div>
js部分
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let v = new Vue({
el: "#app",
data: {
tel: "", //先给一个空的让用户输入 确认密码
user: {
texe: "张三",
texe2: "110",
texe3: "123",
sex: "男",
// 原理 这是定义初始值 这个初始值是true时候就是选中状态 通过 v-model选中value的值 把值传到这里给它默认
hobby: ["唱歌", "写代码"],
tel: "123",
select: "计算机二级",
remark: "请输入备注信息",
agg: true,
sub: "提交"
}
},
methods: {
fan() {
if (this.user.texe3 == this.tel) {
console.log("已发送");
} else {
alert("密码错误")
}
}
}
});
</script>
点击事件五大部分
阻止如何冒泡在@click的后面添加.stop
<div id="out" @click.stop="out"></div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let v = new Vue({
el: "#box",
data: {},
methods: {
out() {
console.log("我是out");
}
}
});
</script>
阻止如何默认事件在@click的后面添加.prevent 如下图
<div id="out" @click.prevent.right="out"></div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let v = new Vue({
el: "#box",
data: {},
methods: {
out() {
console.log("我是out");
}
}
});
</script>
如何捕获事件在@click的后面添加.capture 谁添加 谁最先捕获显示在前面
<div id="out" @click.capture="out"></div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let v = new Vue({
el: "#box",
data: {},
methods: {
out() {
console.log("我是out");
}
}
});
</script>
如何触发一次@click的后面添加.once谁添加 谁添加 谁只能触发一次
<div id="out" @click.once="out"></div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let v = new Vue({
el: "#box",
data: {},
methods: {
out() {
console.log("我是out");
}
}
});
</script>
如何设置只有自己点击触发自己@click的后面添加.self 但是有冒泡
<div id="out" @click.once="out"></div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let v = new Vue({
el: "#box",
data: {},
methods: {
out() {
console.log("我是out");
}
}
});
</script>
动画板块
1.给需要添加动画的元素用标签包裹起来
2.设置css样式 v-enter v-enter-active v-enter-to v-leave v-leave-active v-leave-to
.v-enter{
opacity: 0;
}
.v-enter-active{
transition: all 2s;
}
.v-enter-to{
opacity: 1;
}
.v-leave{
opacity: 1;
}
.v-leave-active{
transition: all 2s;
}
.v-leave-to{
opacity: 0;
}
<div id="app">
<transition>
<div class="box" v-show='isShow'></div>
</transition>
<button @click = 'fade'>点击淡入淡出</button>
</div>
如果在这里插入代码片
有多个元素添加动画需要给transition添加name属性,同时修改style中的样式,把v-换为name的名字即可
.aa-leave-active{
transition: all 5s;
}
.aa-leave-to{
transform: rotate(360deg);
}
<transition name="aa">
<div class="box" v-show='isShow'></div>
</transition>
vue生命周期
beforeCreate,创建之前,指的是new Vue() 此时的el 还有data都是undefined
created,创建完成,此时的el是undefined,data已经获取到数据
beforeMount,挂载之前,此时的el是div 但是{{}}不能被解析, data已经获取到数据
mounted:挂载完成,此时的el已经加载完所有数据
beforeUpdate:更新之前,此时指的是页面的更新,更新前后数据是一致的
updated:更新按成,数据已经是最新的
beforeDestory:销毁之前
destroyed:销毁完成,此时的vm实例已经被销毁 双向绑定数据不能使用
自定义动画函数
在transition 标签使用 @before-enter 开始动画 @enter 动画过程 @after-enter完成动画在js methods中方法直接调用这些属性写的值 afterEnter(el) {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 15px;
height: 15px;
background: red;
border-radius: 50%;
}
.box2 {
width: 15px;
height: 15px;
background: red;
border-radius: 50%;
}
.on {
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
border: none;
color: white;
font-weight: bold;
font-size: 20px;
outline: none;
}
.shop {
position: absolute;
left: 500px;
top: 456px;
width: 80px;
height: 30px;
background: orange;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<button @click="on" class="on">+</button>
<!-- 自定义动画函数 通过 @before-enter开始动画 @enter 动画过程 @after-enter完成动画-->
<transition @before-enter="beforeEnter" @enter='enter' @after-enter='afterEnter'>
<div class="box" v-show='isShow'></div>
</transition>
<div class="box2" v-show='isShow2' v-html="conten">{{conten}}</div>
<div class="shop">购物车</div>
</div>
</body>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
conten: 0,
isShow: false,
isShow2: false
},
methods: {
on() {
this.isShow = !this.isShow;
this.conten++;
if (this.conten > 0) {
this.isShow2 = true;
} else {
this.isShow2 = false;
}
},
beforeEnter(el) {
// el是指这个box
el.style.transform = "translate(0,0)"
},
enter(el, done) {
// 这是用来触发动画,不写动画无法执行也可以通过scroll还有client系列均可
el.offsetWidth;
// 是用来触发下面的函数的 不写下面函数不触发
done()
// 小球终点位置
el.style.transform = "translate(500px,400px)"
// 动画过渡得属性
el.style.transition = "all 2s"
},
afterEnter(el) {
this.isShow = !this.isShow;
}
}
});
</script>
</html>