文档章节

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

庭前云落
 庭前云落
发布于 10/22 08:28
字数 1130
阅读 19
收藏 0

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

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

© 著作权归作者所有

庭前云落
粉丝 1
博文 30
码字总数 22957
作品 0
滁州
私信 提问
关于angulerjs的八种技巧

第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 你甚至可以指定输出的顺序: 第二 动态绑定之ng-model标签 任何有用户输入,只要是有值的html标签,都可以...

a69694510
2017/06/28
0
0
Vue - 起手式

0x00:前言 这次前言不想扯太多。 本文主要是记录一下自己的学习历程,顺带做一个总结。 其中有参考 Vue.js 的中文文档,也有去查看其它大大们给出的总结。 最后也是一个期盼,希望能够帮助到...

mr_lp
2017/02/16
0
0
【分享】html5 开发工具——WeX5中的各种绑定方式

今天我想整理一下html5 开发工具——WeX5中的各种绑定方式,下面分为表现类、流程类、交互类 3 种类型分别介绍。 表现类绑定 表现类的绑定属性有visible、text、html、css、style、attr几种,...

没错就是酱紫
2016/06/30
1K
1
02-Vue入门之数据绑定

2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,Vue对象的改变会直接影响到HTML的标签的...

aicoder
2016/12/24
0
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
2018/07/31
20
0

没有更多内容

加载失败,请刷新页面

加载更多

前端的一些雕虫小技,从100%和滚动条说起

1、100%和滚动条 当我们在css中把html和body同时设为100%时,会出现滚动条 html, body { width: 100%; height: 100%; } 原因是html和b...

wphmoon
32分钟前
6
0
电力区块链应用案例【2019】

随着区块链技术的日益普及,出现了大量创业企业尝试使用区块链技术来解决能源与电力行业中存在的问题。在本文中,我们将介绍其中的三个能源区块链项目。 能源行业以价格不透明著称:消费者很...

汇智网教程
54分钟前
7
0
聊聊rocketmq的adjustThreadPoolNumsThreshold

序 本文主要研究一下rocketmq的adjustThreadPoolNumsThreshold DefaultMQPushConsumer rocketmq-client-4.5.2-sources.jar!/org/apache/rocketmq/client/consumer/DefaultMQPushConsumer.ja......

go4it
今天
9
0
关于早起

早起是非常好的事情,但是像如果前一天睡得晚,或者第二天早上是非常冷的时候,那就不是很美好了。 但是本身早起是一件非常棒的事情,我记得我每次早起 如果不觉得困的话,世界是那么安静,脑...

T型人才追梦者
今天
7
0
Java输入输出

JDK中的InputStream/OutputStream构成了IO输入输出继承层次的基础。它们都是面向字节序列的,每次可以从序列中读入或者写出一个字节或者指定大小的字节数组。但是面向字节流的输入输出不便于...

ytuan996
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部