学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

原创
2019/10/22 08:28
阅读数 227

[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 需求

  1. 提供登录表单:用户名和密码
  2. 点击提交按钮,将用户名和密码发送到服务器(jack和1234)
  3. 如果是jack和1234,表示登录成功。隐藏登录表单,显示登录用户名“上午好,陈先生”
  4. 如果不是,登录失败了,表单固定位置显示错误信息“用户名或密码不匹配”

2.2 开发步骤

  1. 创建vue文件,编写表单,提供3个元素(2个input,1个button)
  2. data区域创建user对象,并将数据与表单元素绑定
  3. 给按钮绑定点击事件
  4. 点击事件ajax发送登录数据,通过服务器响应数据处理
    1. 如果成功,显示用户信息,隐藏表单
    2. 如果失败,显示错误信息
<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>

日常学习的总结,主要是为了自己以后看,当然大家有什么好的建议,欢迎评论留言。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部