Vue模板语法、事件和表单使用 小白指南_模板小白攻略

模板语法文本绑定,两个大括号,中间加上data里面的数据,message里面不仅可以是变量还可以是表达式 // 变量{{ message }}
// 表达式{{ number + 1}}const vm = new Vue({el: ‘#main’,data: {m

Vue模板语法、事件和表单使用 小白指南

模板语法

文本绑定,两个大括号,中间加上data里面的数据,message里面不仅可以是变量还可以是表达式

  <body>
      <div id="main">
        // 变量
        {{ message }}
        <br/>
        // 表达式
        {{ number + 1}}
      </div>
  </body>

  <script>
    const vm = new Vue({
      el: '#main',
      data: {
        message: 'Welcome to Chivalrous Island!',
        number: 7
      },
    })
  </script>

JS表达式(计算、拼接、只能是单个表达式)插入HTML代码(慎用!防止XSS攻击 ),我们可以直接在data里面定义html代码,但是它存在一个安全隐患,比如我们将下面的 dangerHTMl: “<span>0085</span>” 这句代码改变一下 dangerHTML: “<span onclick=’alert(0085)’>0085</span>” ,这时候的当我们点击时它执行了它里面的一个代码会弹出一个框,这是很危险的。像很多个XSS攻击就是用的这种方法,所以对于v-html我们还是要慎用。

<div v-html="dangerHTMl"></div>

data: {
      ...
      dangerHTMl: "<span>0085</span>"
}

绑定,把data里面的数据绑定到元素的属性上,最常见的就是id

<div v-bind:id="id" v-html="dangerHTML"></div>

data: {
    ...
    id: 'oldId'
}

Vue模板语法、事件和表单使用 小白指南_模板小白攻略

当data里面的数据改变时,它的Id也会随之改变。

Vue模板语法、事件和表单使用 小白指南_模板小白攻略

<div v-bind:id="id">
	<button v-on:click="changeId">changeId</button>
</div>

methods: {
      changeId: function() {
        this.id = 'newId';
      }
}

Vue模板语法、事件和表单使用 小白指南_模板小白攻略

除了Id的绑定之外,还有其他的一些绑定:

v-bind:disabled => :disabled,一个元素的属性 常用于表单,比如一些输入框,按钮,如下:这个时候的按钮就是一个不可点击的状态了。

<button v-bind:disabled="idDisabled" v-on:click="changeId">changeId</button>

v-bind:href 简写 :href,链接v-on:click 简写 @ + click,点击

计算属性(缓存机制)

data: {
      json: {
        key1: 1,
        key2: 2
      }
},
methods: {
      ...
      computed: {
        getJsonkey1: function() {
          return this.json.key1;
        }
},
// 计算属性的缓存需要借助watch函数的监听
watch: {
        json: {
          handler: function(newVal,preVal){
            console.log(JSON.stringify(preVal));
            console.log(JSON.stringify(newVal));
          },
          deep: true,
        }
      }
}

在vue里面监听json需要深度监听,因为它们是在同一个内存空间里面,地址是一样的。

这个时候打印出来的,我们会发现它们的新值和旧值都是一样的,这是由于它们是同一个内存地址我们访问时值已经改变。如果我们要改变两次的值不一样,那么我们需要用到计算属性里面的缓存。

比如先不监听json,而是监听getJsonkey1的方法,将watch的json变成getJsonkey1,这样的话我们就可以得到前后的两个值。

Vue模板语法、事件和表单使用 小白指南_模板小白攻略

条件渲染

v-if,判断元素是否要渲染,会复用元素(不想复用需要添加key)v-else-ifv-elseif else if else

  testVIf: 'A',

  <button v-if="testVIf === 'A'">A</button>
  <button v-else-if="testVIf === 'B'">B</button>
  <!-- 当判断条件都不满足时显示
  <button v-else>C</button>

v-show,它和v-if 的区别在于,当v-if条件不满足时,那么整个元素都不会被渲染,但是当v-show不满足时,它只是不显示元素,相当于css display的none。它们两的用法是完全一样的。

事件处理

主要分为点击事件和键盘事件。

v-on:click,简写属性 @ + clickv-on:click.stop,阻止单击事件继续传播

<button v-on:click.stop="doAgain"></button>

v-on:submit.prevent,提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

v-on:click.stop.prevent,修饰符可以串联

<button v-on:click.stop.prevent="contact"></button>

v-on:submit.prevent,只有修饰符

<form v-on:submit.prevent></form>

按键修饰符(键盘事件):

v-on:keyup

keyup(e) {
   alert(JSON.stringify(e));
}

	<input v-on:keyup.enter="keyup" type="text">

keyup监听的是一个所有的键盘事件,如果我们只想监听某一个事件,那么我们可以在 v-on:keyup 后面添加下面属性,然后点击触发即可。 除此之外,对于下面的某一事件监听我们可以输入它对应的键盘码,比如enter对应的是13,v-on:keyup.13=”keyup” 同样的我们也是点击enter触发事件。v-on:keyup.enter,监听回车键v-on:keyup.tabv-on:keyup.deletev-on:keyup.escv-on:keyup.spacev-on:keyup.upv-on:keyup.downv-on:keyup.leftv-on:keyup.right

双向数据绑定(表单处理)

例如一个输入框,当我们输入一个值时,我们绑定的数据会变,而当我们手动的去改动这个值的时候,输入框里面的值也会随之改变。

v-model,不仅可以绑定value,还可以绑定表单里面的一些其他属性checked和selected,表单元素除了输入框之外比如复选框、单选框、下拉框都是可以的。

输入框数据的双向绑定:

<input v-model="inputValue" type="text">

<!-- 点击事件 -->
<button @click="changeInputValue">changeInputValue</button>
data: {
	...
	inputValue: 10805,
}
methods: {
	...
    // 当我们点击按钮时,触发changeInputValue,实现累加
    changeInputValue: function() {
        this.inputValue++;
    }
}
watch: {
	...
	inputValue: function() {
        console.log(this.inputValue);
	}
}

Vue模板语法、事件和表单使用 小白指南_模板小白攻略

复选框:

<input v-model="checkboxValue" type="checkbox">

data: {
    // 默认选中
    checkboxValue: true
}

海计划公众号
(0)
上一篇 2020/03/26 23:29
下一篇 2020/03/26 23:29

您可能感兴趣的内容

  • 百度UED基础入门_百度用户体验中心

    百度UED入门基础 官方网址:http://ued.baidu.com/ 简介描述:百度用户体验中心 视觉设计熟知审美趋势,从需求、用户、市场出发,寻求和定义视觉风格交互设计消化产…

    2020/03/06
  • Node.js 命令行工具的编写入门百科_工具指南攻略

    日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作。其编写也不难,和日常编写 Node.js 代码并无二致。package.json 中的 bin 字段一个 npm 模块,如果在 package.json 中指定了 bin 字段,那说明该模块提供了可在命令行执行的命令,这些命令就是在 bin 字段中指定的。package.json{“

    2020/03/30
  • moment-timezone菜鸟攻略_JavaScript 时区处理类库

    moment-timezone菜鸟攻略 官方网址:http://momentjs.com/timezone GitHub:https://github.com/moment/mom…

    2020/03/06
  • JS事件循环机制入门基础_机制菜鸟教程下载

    js是一门单线程的编程语言,也就是说js在处理任务的时候,所有任务只能在一个线程上排队被执行,那如果某一个任务耗时比较长呢?总不能等到它执行结束再去执行下一个。所以在线程之内,又被分为了两个队列:同步任务队列异步任务队列举个例子来说:比如你去银行办理业务,都需要领号排队。银行柜员一个个办理业务,这时这个柜员就相当于一个js线程,客户排的队就相当于同步任务队列

    2020/03/26
  • 有趣的Js面试题新手入门如何让 (a == 1 && a == 2 && a == 3) 返回 true_面试入门百科

    前两天在网上看到了一道很有趣的题目,题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?。这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。当时我也冥思苦想很久,甚至一度怀疑这道题目的答案就是 不能。直到在 stackoverflow 上面

    2020/04/05
  • 声享新手入门_在线制作 PPT,让分享更有价值

    声享新手入门 官方网址:https://ppt.baomitu.com/ 简介描述:在线制作 PPT,让分享更有价值 在线编辑 它不同于传统的本地演示软件,您无需下载和安装任何东西…

    2020/03/11
  • 使用nodejs编写命令行工具小白指南编写自己的cli工具_cli攻略教程

    工作中接到新项目,开发前都需要先规划项目目录,然后一个个创建文件,搭建sass编译环境,下载jquery,Swiper等类库… 这些准备工作都要花上不少时间。每做一个项目,都会遇到同样的问题,再重复一遍吗?是时候做点改变了:编写自己的cli工具,一行命令,3秒钟进入coding状态!本文以自己的my-cli为例,将开发到发布过程完整记录下来,看完本文,你

    2020/04/05
  • 13个需要掌握的Js操作DOM方法入门百科_dom指南攻略

    DOM 或文档对象模型是 web 页面上所有对象的根。它表示文档的结构,并将页面连接到编程语言。它的结构是一个逻辑树。每个分支结束于一个节点,每个节点包含子节点、对象。DOM API非常庞大,在本文中,咱们只讨论比较常用有有用的那些API。 document.querySelector / document.querySelectorAlldocument

    2020/03/22
  • 如何使用robots禁止各大搜索引擎爬虫爬取网站入门指南_搜索基础教程

    ps:由于公司网站配置的测试环境被百度爬虫抓取,干扰了线上正常环境的使用,刚好看到每次搜索淘宝时,都会有一句由于robots.txt文件存在限制指令无法提供内容描述,于是便去学习了一波1.原来一般来说搜索引擎爬取网站时都会,先读取下robots.txt文件,并依照里面所设定的规则去爬取网站(当然是指没用登录限制的页面)2.下面我们就来说一说如何设置robot

    2020/04/03
  • 使用Chrome开发者工具远程调试原生Android上的H5页面小白指南_Chrome入门攻略

    Android4.4(KitKat)开始,使用Chrome开发者工具可以帮助我们在原生的Android应用中远程调试WebView网页内容。具体步骤如下:(1)设置Webview调试模式可以在Activity的init进行如下设置,WebView类包含一个公共静态方法,可应用于项目中的所有WebView,同时不受Manifest文件中的debuggable属

    2020/04/05
  • Fiddler无法正常抓取谷歌等浏览器的请求小白帮助解决方案_浏览器小白攻略

    1-先了解Fiddler工作原理:正常情况下,fiddler是可以抓chrome的请求的。fiddler会自动给浏览器设置一个代理127.0.0.1端口8888,并且记忆浏览器的代理设置,所有的请求先走fiddler代理,再走浏览器代理。 2-谷歌浏览器代理服务器唯一规则:由于Chrome限制,同一时间只能有一个扩展控制代理设置,一般来说Chrome会优先后

    2020/04/03
  • BlockUI详细用法基础知识Jquery中ajax加载提示插件blickUI_插件基础教程

    BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。这个插件的用法很简单。1 阻止用户与页面交互:$.blockUI();2 自定义提示信息:$.blockUI({ message:

    2020/04/03
  • 怎么租用网站服务器的步骤入门百科_服务器菜鸟教程下载

    网站服务器租用是指租用的服务器主要是用来放置企业网站。那么对于企业网站的服务器该如何选择呢,如何租用呢?价格如何?我来教教大家正确选择租用网站服务器,步骤如下:1、你首先要明白自己的网站的用户需求区域在哪?是海外哪个国家的居多,或者国内的,然后再选择具有地域优势的服务器,海外的首选香港服务器。2、网站的流量有多大,这个可以利用一些专业的监测统计工具来考量,利

    2020/03/31
  • 解决build-url在微信小程序中报错的问题入门基础教程_报错基础教程

    build-url 是一个将对象转换为url字符串的小工具,一般的使用方法为:import buildUrl from ‘../path/to/lib/build-url’;buildUrl(‘http://example.com’, {path: ‘about’,hash: ‘contact’,queryParams: {foo: bar,bar: [‘f

    2020/03/20
  • react-router v4 按需加载的配置方法小白帮助_react攻略教程

    在react项目开发中,当访问默认页面时会一次性请求所有的js资源,这会大大影响页面的加载速度和用户体验。所以添加按需加载功能是必要的,以下是配置按需加载的方法:安装bundle-loadernpm install –save-dev bundle-loader定义Bundle.jsimport React, { Component } from ‘rea

    2020/04/05
  • x-editable菜鸟知识_用于创建可编辑弹出框的插件

    x-editable菜鸟知识 官方网址:http://vitalets.github.io/x-editable GitHub:https://github.com/vitalet…

    2020/03/06