正文 

当前位置： 首页 > java > java语法

vue.js第四课

盖大楼      2022-02-08     473

关键词：

（1）、插值：在view层上显示model的资料、
（2）、绑定表达式：在view层上 执行js命令。
（3）、指令：在view层上 执行写好的功能。
（4）、缩写：v-bind 绑定 特性
v-on 绑定 事件
 
Vue.js的模板是基于Dom实现的。这意味着所有的vue.js模板都是可解析的有效的Html且通过一些特殊的特性做了增强。
Vue.js因而从根本上不同于基于字符串的模板。
 
1、Mustache语法 双大括号 语法；
<span>{{data}}</span>双向绑定；
<span>{{*data}}</span>单次绑定：修改model，view不会改变；
2、三个大括号与两个大括号：
三个大括号是：将得到的字符串 如果是html语法 将解析为html标签等；
两个大括号是：将得到的字符串 仅解析为字符串。

2、内容以HTML字符串插入，数据绑定将被忽略。如果需要复用模块片段，应使用 partial。
partial 是 vue.js内置的标签Vue.partial('名称与view层的partial name属性一致','模板指令 这个模板代替什么东西')
2.1
2.2

partial动态获取名字 通过输入框，输入id1就嵌入 id1的内容，并且加载message1的数据。
2.3

 

3、{{}}也可以用在html特性（属性的值） attributes。<div id="item-{{id}}"></div>;

 

4、绑定表达式
在vue.js中一段绑定表达式由一个简单的javascript表达式和可选的一个或多个过滤器构成。但只允许一个表达式。

 

5、过滤器
vue.js运行在表达式后面添加可选的“过滤器（Filter）”，以“管道符”指示。
{{message | capitalize}} 首字母 转大写
{{money | currency "￥" }}格式化货币
 
过滤器可以串联 {{ message | filterA | filterB}}
也可以传入参数{{message | filter 'arg1'arg2}}
过滤器函数始终以表达式的值作为第一个参数，带引号的参数视为字符串，不带引号的参数按表达式计算。
这里，字符串‘arg1’将传给过滤器作为第二个参数，表达式arg2的值在计算出来之后作为第三个参数。
 
6、自定义过滤器
 

 

message是第一个参数。
before第二个参数。
after第三个参数。
7、指令 格式是 v-指令名字=“js表达式”
指令是特殊的带有前缀V-的特性。指令的值限定为绑定表达式，因此上面提到的javascript表达式及过滤器规则在这里也是用。
指令的职责就是当其表达式的值改变时把某些特殊的行为应用到Dom上。
<p v-if="greeting">hello!</p>
这里v-if指令 根据表达式greeting值得真假删除/插入<p>元素。
 

 

 

8、指令-参数
有些指令可以在其名称后面带一个“参数”（argument），中间放一个冒号隔开。
例如v-bind指令 用于响应的更新html特性：
<a v-bind:href="url"></a>
同
<a href="{{}url}"> </a>
这里href是参数，他告诉v-bind指令将元素的href特性跟表达式url的值绑定。可能你已注意到可以用特性插值href=“{{url}}”获得同样的结果；实际上在内部特性插值会转换为v-bind：绑定。
v-on指令，用于鉴定DOM事件：
<a v-on:click="dosomthing">
这里的参数是被监听的事件的名字。
 

 
9、缩写
在构建单页应用时，Vue.js会管理所有的模块，因此V-前缀也没那么重要了。
 
v-bind
<a v-bind:href="url"></a>
<a :href="url"></a>
<button v-bind:disabled="someThing">Button</button>
<button :disabled="someThing">Button</button>
 
v-on
<a v-on:click="do"></a>
<a @click="do"></a>

法语学习笔记--第四课（家庭）

 第四课Lafamille--------------您---------------------vous您，你们是 êtrejesuis  noussommestues  vous êtesilest  ilssontelleest  ellessont----------------- 查看详情

swift第四课

项目中经常遇到按钮改变文字和图片位置的情况，所以尝试写一个button的分类importFoundationimportUIKit/*枚举设置图片的位置*/enumButtonImagePosition:Int{casePositionTop=0casePositionleftcasePositionBottomcasePositionRight}extensionUIButton{/**imag 查看详情

第四课

<body><tablewidth="100%"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="50"align="center">梦幻西游</td></tr><tr><tdheight="200"><tablewidth="100% 查看详情

vba学习第四课

Subss()DimbiaoAsWorksheetExcel.Application.DisplayAlerts=FalseForEachbiaoInSheetsIfbiao.Name<>"绝不能删"Thenbiao.DeleteEndIfNextExcel.Application.DisplayAlerts=TrueEndSub　　Subxinjian()DimshtAsWorksh 查看详情

html理论——第四课

1.HTML框架：<iframesrc="URL"></iframe>在一个网页中嵌套另外一网页时使用；属性frameborder：定义边框；实例：<iframesrc="demo_iframe.htm"name="iframe_a"></iframe><p><ahref="http://www.runoob.com"target= 查看详情

第四课文件系统(下)

====================第四课文件系统(下)====================一、sync/fsync/fdatasync------------------------1.大多数磁盘I/O都通过缓冲进行，写入文件其实只是写入缓冲区，直到缓冲区满，才将其排入写队列。2.延迟写降低了写操作的次数，提高了... 查看详情

04-第四课之scanner

第四课之Scanner(漏洞扫描)这款工具很多设置保持默认即可爬行Spider之后再扫描Scanner扫描的目标网址：视频里的网址ir.ayaland.com.ph/CorpGovernance.aspx?id=15news.abidjan.net/trafic/cam.asp?id=1www.cbat.org.br/estatisticas/recordes/recordes_quadro.as 查看详情

第四课

一、对学生表以表格形式（网格视图）显示： 在点击“载入”按钮时，可显示相应的数据表，具体代码：1、 建立数据库连接2、 声明并sqlcommand3、 实例化sqlcommand的SQL命令：从数据库中取出整张表sqlCommand.CommandText... 查看详情

css第四课

学习内容：1.标签的margin值：用来控制标签的外边距，分别控制上、右、下、左的外边距1#d1{2width:500px;3height:300px;4background-color:red;5margin:50px;6}当只输入一项数值时，所有方向上的外边距被统一设定，而输入两个值时，则分别控制... 查看详情

第四课初识css

一.引入样式  1.行内样式表  <h1style="color:red;font-size:18px;">10-30</h1>   2.内部样式表(在head标签里面,title标签下面)  <styletype="text/css">    查看详情

java第四课：数组

1.数组声明时，必须有中括号，但不指定数组的元素个数2.初始化时，必须指定元素个数3.数组元素内容仅能用于声明时初始化，不能用于赋值。如：char[]week;week={‘1‘,‘2‘,‘3‘};4.数组下标越界在运行时检查，编译时不管未完... 查看详情

第四课：创建vxworks系统镜像

目录2.2.2创建VxWorks系统镜像2.2.2.1VxWorks概述2.2.2.2创建VxWorks6.9工程(zynq7000) 2.2.2.3创建VxWorks6.9工程(P2020) 查看详情

进阶第四课：函数（第四节）

step1:习题反馈step2:lambda之再议1.lambda是一个表达式2.它没有名称，存储也不是代码块，而是表达式3.它被用作执行很小单元,不能在里面使用条件语句step3：参数总结1.位置匹配func(name)2.关键字匹配func(key=value)3.收集匹配1）元组收集f... 查看详情

java第四课，方法

方法：     为了提高代码的复用性，可以将其定义称一个单独的功能        是由修饰符，返回值，方法名，参数列表，方法体五部分组成。1*无参无返回值：  publicclassTest{//... 查看详情

学习项目-前端-第四课：elementui:dialogandselect

一、dialog-->vueadmin-template-master-->src-->views-->table-->gathering.vue<template><div><br/><el-form:inline="true"><el-form-itemlabel="活动名称"placeholder="活动名称 查看详情

octavetutorial（《machinelearning》）之第四课《绘图数据》

第四课 PlottingData 绘图数据t =[0,0.01,0.98];y1=sin(2*pi*4*t);y2=cos(2*pi*4*t);plot(t,y1);(绘制图1)holdon;(图1不消失)plot(t,y2,‘r‘);(用红色绘制图2)xlable(‘time‘)(横轴名称)ylable(‘value‘)(纵轴名称)legend(‘sin‘,‘cos 查看详情

h5--第四课

...个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角　　　　　　  3个值: 第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角  　　　　　　2个值: 第一个值为左上角... 查看详情

qpid第四课异常以及崩溃

1）VirtualhostisnotactiveQpid客户端异常打印2）internal-error:Saslerror:nocommonmechanism(E:qpid-cpp-1.36.0srcqpidclientwindowsSaslFactory.cpp:155)Qpid调用指定的地址不正确3）Qpid客户端崩溃信息问题签名: 问题事件名称:   查看详情