码迷,mamicode.com
首页 > Web开发 > 详细

vue.js 第四课

时间:2016-12-20 10:02:40      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:bsp   .com   删除   技术分享   model   过滤器   something   erb   name   

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

vue.js 第四课

标签:bsp   .com   删除   技术分享   model   过滤器   something   erb   name   

原文地址:http://www.cnblogs.com/gaidalou/p/6201367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!