vue.js数据绑定
语法
插值
双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}}
表达式(各种数值,变量,运算符的综合体)
{{value/除数}}
{{三目表达式}}
{{value.split(",")}}
指令
V-前缀的特殊特征,绑定表达式,也就是js表达式和过滤器,当表达式发生的值发生变化时将这个变化反映到DOM上
写第一个内置指令
<div id="vuev">
<div v-if="show">fdfdfd</div>
</div>
new Vue({
el: "vuev",
data: {
show: true
}
})
另一种指令:在指令和表达式之间插入一个参数,用冒号分割
例子:
<div id="vuev">
<a v-bind:href="url"></a>
</div>
new Vue({
el: "vuev",
data: {
url: 'baidu.com'
}
})
分隔符
vue的数据绑定的语法可配的,可以改变风格
可以在Vue.config中配置语法,它包含了vue的所有全局配置,可实例化之前配置属性
源码目录是
let delimiters = ['{{', '}}'];
let unsafeDelimiters = ['{{{', '}}}'];
delimiters 修改文本插入分隔符
unsafeDelimiters 修改html插入分隔符
vue.js数据绑定的更多相关文章
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- vue.js数据绑定语法
原始高清大图下载 1.数据绑定 html代码: <div id="first" class="first">msg:{{msg}}</div& ...
- Vuebnb 一个用 vue.js + Laravel 构建的全栈应用
今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel.它会在Packt出版社在2018年初出版. 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb.在这 ...
- Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue.js基础知识篇(1):简介、数据绑定
目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...
- 从Vue.js源码角度再看数据绑定
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用
本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...
- Vue.js MVVM及数据绑定原理
什么是数据驱动 数据驱动是vuejs最大的特点.在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 比如说我们点击一个button,需要元 ...
- Vue.js学习笔记 第一篇 数据绑定
双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...
随机推荐
- HackerRank Special Substrings 回文树+后缀自动机+set
传送门 既然要求对每个前缀都求出答案,不难想到应该用回文树求出所有本质不同的回文子串. 然后考虑如何对这些回文子串的前缀进行去重. 结论:答案等于所有本质不同的回文子串长之和减去字典序相邻的回文子串的 ...
- 洛谷P3437 [POI2006]TET-Tetris 3D(二维线段树 标记永久化)
题意 题目链接 Sol 二维线段树空间复杂度是多少啊qwqqq 为啥这题全网空间都是\(n^2\)还有人硬要说是\(nlog^2n\)呀.. 对于这题来说,因为有修改操作,我们需要在外层线段树上也打标 ...
- thinkphp3.2 create()
* create作用 * 1.将表单元素中的值和数据库字段意义匹配 * 2.将数据库中没有的字段在数组中去除 if(IS_ ...
- jquery实现上一页下一页
注:文章转载于肖肖的博客: 简单说一下思路:就是把每个页面都用position:absolute的属性使每个页面都从叠在一起.然后通过$().hide()隐藏和$().show()显示.点击当前页中的 ...
- Ubuntu中网络配置interfaces与界面网络配置NetworkManager
[Server版本] 在Ubuntu Server版本中,因为只存有命令行模式,所以要想进行网络参数设置,只能通过修改 /etc/network/interfaces .具体设置方法如下: (1) U ...
- RESTful API的十个最佳实践
WebAPI在过去几年里非常的盛行,我们很多以往的技术手段都慢慢的转换为使用WebAPI来开发,因为它的语法简单规范化,以及轻量级等特点,这种方式收到了广泛的推崇. 通常我们使用RESTFul(Rep ...
- 带你从零学ReactNative开发跨平台App开发(十一)
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 初识oracle重做日志文件
转自 http://blog.csdn.net/indexman/article/details/7746948 以下易容翻译自oracle dba官方文档,不足之处还望指出. 管理重做日志文件 学习 ...
- 使用CoreData [1]
使用CoreData [1] 本篇教程能教你从无开始接触CoreData,包括新建工程,创建出实体,增删改查样样都有,属于使用CoreData最初级教程. 1. 创建带有CoreData的工程项目 2 ...
- Proxyee-down的下载与安装教程
源代码在:GitHub_proxyee-down 为了节约读者的时间,我把需要的资源文件打包好,百度云链接在下面 Proxyee-down最新版为2.54(2018.8.9更新) 最新版下载地址:链接 ...