[TOC]
1.1.1标签操作v-text&v-html
v-text:会把data中绑定的数据值原样输出。
v-html:会把data中值输出,且会自动解析html代码
<!--可以将指定的内容显示到标签体中-->
<标签 v-text=""></标签> <!--以【文本】方式显示-->
<标签 v-html=""></标签> <!--以【html代码】方式显示-->
1.2.1属性绑定:v-bind:xxx&v-bind:class
- 普通属性:v-bind:xxx
<!--完整写法-->
<标签 v-bind:属性名=”属性值对应变量”></标签>
<!--省略写法, v-bind可以省略 -->
<标签 :属性名=””></标签>
1.如果需要显示data区域的数据,直接写. 例如: url
2.如果需要显示普通字符串,需要单引号. 例如: ‘?username=jack’
3.data区域的数据和普通字符串可以通过+连接
<template>
<div>
<a v-bind:href="url">学校官网</a> <br/>
<a :href="url">学校官网(省略版)</a> <br/>
</div>
</template>
<script>
export default {
data() {
return {
url : 'http://www.czxy.com'
}
},
}
</script>
<style>
</style>
- class特殊
方式1: 字符串,必须使用单引号
<标签 v-bind:class=”’字符串’”></标签>
方式2: 对象,key是类名; value是Boolean值,是否显示. (对象数据可以在data区域)
<标签 v-bind:class="{'class':true,'class2':false}"></标签>
方式3: 数组,相当于’方法2’的简化版,所有都是true
<标签 v-bind:class="['字符串','字符串']"></标签>
//步骤三:将样式绑定的div上
<template>
<div>
<div v-bind:class="mc"></div>
<div v-bind:class="{'myClass':true,'myClass2':false}"> </div>
<div v-bind:class="['myClass','myClass2']"></div>
</div>
</template>
<script>
export default {
//步骤二:data区域提供一个变量存放对应的样式名
data() {
return {
mc : 'myClass2'
}
},
}
</script>
<style>
//步骤一:编写2个样式
.myClass {
height: 10px;
background-color: #f00;
}
.myClass2 {
height: 10px;
background-color: #0f0;
}
</style>
- style属性:v-bind:style
方式1: 对象, key样式名, value样式值 .
//key和value需要使用单引号
//key可以不使用单引号,需要将含-命名的属性进行驼峰命名 例如:abc-def 写成 abcDef
<标签 v-bind:style="{'样式':'值','样式':'值2',abcDef:'值3'}"></标签>
方式2: 数组, 运行绑定多个对象
<标签 v-bind:class=”[对象名, 对象名2]”></标签>
<template>
<div>
<div v-bind:style="{'background-color':'#f00',fontSize:'40px','text-align':align}"></div>
</div>
</template>
1.3.1 语句控制
v-show 控制元素是否显示
<标签 v-show=”true|false”></标签>
v-if 控制dom元素是否存在
v-if/v-else-if/v-else
1.4.1数据绑定
- 通过 v-model 可以完成数据双向绑定
<!--数据双向绑定的
data区域 -> dom元素
_如果data数据区域的数据发生改变, 自动更改dom元素上的数据.
dom元素 -> data区域
_如果dom元素的数据发生改变,自动更改data数据存放的数据.
-->
<标签 v-model="data区域属性名"></标签>
************************************************************
<template>
<div>
<input type="text" v-model="username"> <br/>
输入的内容:{{username}}
</div>
</template>
<script>
export default {
data() {
return {
username : 'jack'
}
},
}
</script>
<style>
</style>
1.5.1事件绑定
<标签 v-on:事件名="函数"></标签>
<标签 @事件名="函数"></标签>
2.案例:用户登录
2.1 需求
- 提供登录表单:用户名和密码
- 点击提交按钮,将用户名和密码发送到服务器(jack和1234)
- 如果是jack和1234,表示登录成功。隐藏登录表单,显示登录用户名“上午好,陈先生”
- 如果不是,登录失败了,表单固定位置显示错误信息“用户名或密码不匹配”
2.2 开发步骤
- 创建vue文件,编写表单,提供3个元素(2个input,1个button)
- data区域创建user对象,并将数据与表单元素绑定
- 给按钮绑定点击事件
- 点击事件ajax发送登录数据,通过服务器响应数据处理
- 如果成功,显示用户信息,隐藏表单
- 如果失败,显示错误信息
<template>
<div>
<form action v-show="isShow">
用户名:
<input type="text" v-model="user.username" />
<br />密码:
<input type="password" v-model="user.password" />
<br />
<span v-text="error"></span>
<br/>
<input type="button" value="登录" @click="login" />
</form>
<span v-show="!isShow">下午好,王先生</span>
</div>
</template>
<script>
const axios = require("axios");
axios.defaults.baseURL = "http://localhost:8080";
export default {
data() {
return {
user: {
username: "",
password: ""
},
error: "",
isShow: true
};
},
methods: {
login(){
console.info(this.user);
axios.post('/user/login',this.user)
.then(res => {
var msg = res.data;
if(msg=='登录成功'){
this.isShow=false;
}else{
this.error=msg;
}
})
.catch(err => {
console.error(err);
})
}
}
};
</script>
<style>
</style>
日常学习的总结,主要是为了自己以后看,当然大家有什么好的建议,欢迎评论留言。