[Vue] 初识Vue-常用指令
Vue
Vue是一套用于构建用户界面的渐进式框架, Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue是一个JavaScript MVVM库, 以数据驱动和组件化的思想构建。
本来想学jQuery来着, 但是同事推荐直接学习Vue,所以入了Vue的坑。
数据驱动
jQuery了解了下, jQuery操作元素先是获取元素DOM对象, 然后进行元素操作 , 在Vue中, 元素和数据是双向绑定的, 在实例化Vue对象的同时将元素绑定,数据和元素保持同步, 数据发生改变, 对应页面的元素也会发生改变。
MVVM模式
Model-View-ViewModel
Model: 指的是数据部分,对应到前端相当于JavaScript对象
View: 视图部分,对应前端就是DOM
ViewModel: 连接数据和视图的中间件
数据(Model)和视图(View)是不能直接通讯的,而是需要通过ViewModel来实现双方的通讯。当数据变化的时候,ViewModel能够监听到这种变化,并及时的通知View做出修改。同样的,当页面有事件触发时,ViewModel也能够监听到事件,并通知Model进行响应。ViewModel就相当于一个观察者,监控着双方的动作,并及时通知对方进行相应的操作。
起步
从经典的hello world开始
//创建view
<div id="app">{{ message }}</div> <script>
//创建model
var example = {
message: 'hello world'
}
//创建vue实例, 绑定元素- ViewModel
new Vue({
el: '#app',
data: example
})
</script>
建立关联之后,页面和数据都是响应式的, 我们在JavaScript的控制台修改app.message的值,页面也会随之发生变化。
指令
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。
v-bind
v-bind会绑定元素的某个特殊特性
<div id="app2">
<span v-bind:title="message">
鼠标悬停几秒种查看此处动态绑定的提示信息!
</span>
</div>
<script>
new Vue({
el: "#app2",
data: {
message: '页面加载于' + new Date().toLocaleString()
}
})
</script>
v-if
v-if是条件渲染指令, 根据表达式的真假来删除或插入元素
v-if= ‘expression’ expression是一个返回bool的表达式, 表达式可以是个bool属性, 也可以是个返回bool的运算式
<div id="app3">
<p v-if="seen">你可以看到我</p>
<p v-if="name.indexOf('jack')>=0">{{ name }}</p>
</div>
<script>
new Vue({
el: '#app3',
data: {
seen: true,
name: 'jacklove'
}
})
</script>
v-for
v-for用来循环渲染, 可以绑定数组的数据来渲染一个项目列表
<div id="app2">
<ol>
<li v-for="todo in todos">{{ todo }}</li>
</ol>
</div>
<script>
new Vue({
el: '#app2',
data: {
todos:[
{todo: '上课'},
{todo: '做实验'},
{todo: '下课'}
]
}
})
</script>
v-on
v-on用来监听DOM事件
<div id="app3">
<p>{{ message }}</p>
<button type="button" v-on:click="changeMessage">改变信息</button>
</div>
<script>
new Vue({
el: '#app3',
data: {
message: 'hello'
},
methods: {
changeMessage: function () {
this.message = 'world'
}
} })
</script>
v-model
v-model在表单元素上创建双向数据绑定
无论是修改input的值还是p标签的值, 相应的两边的值都会更新
<div id="app4">
<p>{{ message }}</p>
<input type="text" v-model="message">
</div>
<script>
new Vue({
el: '#app4',
data: {
message: 'hello'
}
})
</script>
v-bind和v-on缩写
Vue.js为最常用的两个指令v-bind和v-on提供了缩写的方式
v-bind 可以缩写成一个冒号
v-on可以缩写成@符号
[Vue] 初识Vue-常用指令的更多相关文章
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- 1.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
- Vue专题-js常用指令
vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...
- Vue的十个常用指令
1.v-text:用于更新标签包含的文本,作用和{{}}的效果一样. 2.v-html:绑定一些包含html代码的数据在视图上. 3.v-show:用来控制元素的display属性,和显示隐藏有关.v ...
- Vue 初识Vue
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 【Vue常用指令】
目录 v-html v-text v-for v-if v-show v-bind v-on v-model 指令修饰符 计算与侦听属性 自定义属性 获取DOM元素 "@ *** Vue.j ...
- 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令
最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
随机推荐
- free bsd x修改UTC->SCT
#cp /usr/share/zoneinfo/Asia/Taipei /etc/localtime #ntpdate asia.pool.ntp.org #adjkerntz -a #date
- leetcode第一刷_Binary Tree Zigzag Level Order Traversal
以出现的频率来看.树的层序遍历一定是考察的重点,除非工作人员想找题水数量. zigzag,还是有几道题的,层序的这个非常easy,假设是奇数层.reverse下面就可以.无他.我写的时候预计还不知道这 ...
- Hadoop-2.6.0上调用C的API实现相似云盘的功能
Hadoop-2.6.0上调用C的API实现类似云盘的功能(上传.下载.删除,重命名) 測试系统:CentOS6.6, hadoop-2.6.0 本次測试是调用hadoop下的C的API来訪问HDFS ...
- 《Lucene in Action第二版》学习总结---如何在Windows下编译luceneinAction2Edition源码包
1. 下载此源码包,位置是: www.manning.com/hatcher3,得到:lia2e.tar.gz,然后解压缩得到目录:lia2e,为了以后能辨识,我将此目录改名为:luceneinAct ...
- httpd在嵌入式中应用
在启动脚本合适位置添加: httpd -h /usr/app/www/ 即开始httpd服务,并定位到/usr/app/www/ 注:busybox已支持httpd命令,所以直接用即可. busybo ...
- 好文章收藏--五分钟理解一致性哈希算法(consistent hashing)
一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的简 单哈 ...
- PowerBuilder--Aes128加解密
通过C#开发Com控件,注册到系统,然后由pb通过OLEObject进行调用 原文:https://www.cnblogs.com/eric_ibm/archive/2012/07/06/dll.ht ...
- eclipse 导入maven 父子项目
你先要确认svn上是否是maven项目,否则要自己重新建一个maven项目然后直接引入目录了.如果确认是maven项目,那么有个两个方案.案一:先用任何client软件将svn下载.然后在eclips ...
- ASP.NET动态网站制作(18)-- jq作业讲解及知识补充
前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...
- ASIHTTPRequest中文入门教程全集 http://www.zpluz.com/thread-3284-1-1.html
本文转载至 目录 3 第 1 章 创建和运行请求 5 1.1. 创建一个同步请求 5 1.2. 创建一个异步请求 5 1.3. 使用程序块(blocks ) 6 1.4. 使用 ...