vue.js 第四课

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

时间: 2024-11-03 20:57:17

vue.js 第四课的相关文章

从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.Vue发送Aj

vue.js 学习四(指令和自定义指令)

官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> v-html 更新元素的 innerHTML,如果取回的值里面包含了html的样式,可以使用这个指令. 以下抄写了官方注意事项,对于用户输入的HTML,显示的时候需要谨慎

Vue.js 2.0 由浅入深,第四天 day04

## 一.模块化开发 ### 1. vue-router模块化 cnpm install vue-router -S #### 1.1 编辑main.js #### 1.2 编辑App.vue #### 1.3 编辑router.config.js ### 2. axios模块化 cnpm install axios -S 使用axios的两种方式: 方式1:在每个组件中引入axios 方式2:在main.js中全局引入axios并添加到Vue原型中 ### 3. 为自定义组件添加事件 ## 二

vue.js 第二课

实现响应的数据绑定和组合的视图组件. 让数据与Dom保持同步 . 在使用jq手工操作DOM时,我们的代码常常是命令式的.重复的.易错的.Vue.js拥抱数据驱动的视图概念.简单的讲,它意味着我们在普通的html模板中使用特殊的语法将DOM绑定到底层数据.一旦创建了绑定,DOM将与数据保持同步.每当修改了数据,DOM变响应的更新.这样我们应用中的逻辑就几乎可以直接修改数据了,不必担心与DOM更新搅在一起.这样我们的代码更易辨析.理解与维护. 1.v-if=""判断指令:javascrip

某课网 - Vue.js 源码全方位深入解析(同步更新)

第1章 准备工作介绍了 Flow.Vue.js 的源码目录设计.Vue.js 的源码构建方式,以及从入口开始分析了 Vue.js 的初始化过程. 1-1 课程简介1-2 准备工作1-3 认识 Flow-文档1-4 认识 Flow1-5 Vue.js 源码目录设计-文档1-6 Vue.js 源码目录设计1-7 Vue.js 源码构建-文档1-8 Vue.js 源码构建1-9 从入口开始-文档1-10 从入口开始 第2章 数据驱动详细讲解了模板数据到 DOM 渲染的过程,从 new Vue 开始,分

某课网 - Vue.js 源码全方位深入解析(完整版)

第1章 准备工作介绍了 Flow.Vue.js 的源码目录设计.Vue.js 的源码构建方式,以及从入口开始分析了 Vue.js 的初始化过程. 1-1 课程简介1-2 准备工作1-3 认识 Flow-文档1-4 认识 Flow1-5 Vue.js 源码目录设计-文档1-6 Vue.js 源码目录设计1-7 Vue.js 源码构建-文档1-8 Vue.js 源码构建1-9 从入口开始-文档1-10 从入口开始 第2章 数据驱动详细讲解了模板数据到 DOM 渲染的过程,从 new Vue 开始,分

Vue.js:轻量高效的前端组件化方案(转载)

摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发

MVVM大比拼之vue.js源码精析

VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多来自knockout.angularjs等大牌框架影响,但作者相信 vue 在性能.易用性方面是有优势.同时也自己做了和其它框架的性能对比,在这里.今天以版本 0.10.4 为准 入口 Vue 的入口也很直白: ? 1 var demo = new Vue({ el: '#demo', data: { message: 'Hello V

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,"青出于蓝而胜于蓝".今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更"胜于蓝". (一)简单的操作 这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易"嵌