Vue.js简介及指令
1.Vue.js的特点
Vue.js是一个Javascript MVVM（Model-View-ViewModel）库,与传统Jquery的区别在于，Vue.js舍弃了繁杂的DOM操作，
如取DOM值$('#id1').val()，赋DOM值$('#id1').val('hello')
Vue.js DOM和Model通过ViewModel来实现关联，
ViewModel是Vue.js的核心，主要有两个事件DOM Listeners和Data Bindings
DOM Listeners：监听DOM值，变化时，更新Model对应值
Data Bindings:当Model对应值改变时，同步绑定到View
原理图如下：
2.Vue.js使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view-->
<span id="myview">{{ message }}</span>
</body>
<script src="js/vue.js"></script>
<script>
// model
var mymodel = {
message: 'Hello World!'
}
//ViewModel
new Vue({
el: '#myview',
data: mymodel
})
</script>
</html>
运行结果：
代码分析：
mymodel:model数据层
v-model="message":view视图层，v-model定义了对应的model中的字段
new Vue({}):定义了view层元素id作用域内，对应的model
3.双向绑定示例
有Vue.js的原理，可知当View值改变时，对应的Model值也会变化；当Model值变化时， View值也会发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view-->
<input type="text" id="myview" v-model="message">
</body>
<script src="js/vue.js"></script>
<script>
// model
var mymodel = {
message: 'Hello World!'
}
//ViewModel
new Vue({
el: '#myview',
data: mymodel
})
</script>
</html>
4.Vue.js常用指令
v-if:判断指令
v-show:显示隐藏指令
v-else:判断指令（必须紧跟v-if,v-show使用）
v-for:循环指令
v-bind:绑定class指令
v-on:绑定事件指令
5.Vue.js指令使用示例
1)v-if,v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="my_info">
<span v-if="score>=9">popular language</span>
<span v-else>fewer language</span>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// model
var mymodel = {
score: 8
}
//ViewModel
new Vue({
el: '#my_info',
data: mymodel
})
</script>
</html>
运行结果：
v-if="score>=9":v-if后接表达式
2)v-show,v-else
v-show表示display:block,display:none
3)v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table id="my_info">
<tr>
<th>name</th>
<th>score</th>
</tr>
<tr v-for="language in languages">
<td>{{ language.name }}</td>
<td>{{ language.score }}</td>
</tr>
</table>
</body>
<script src="js/vue.js"></script>
<script>
//ViewModel
new Vue({
el: '#my_info',
data: {
languages:[{
name: 'C',
score: 9
},{
name: 'Python',
score: 8.5
},{
name: 'Java',
score: 7
}]
}
})
</script>
</html>
运行结果：
4)v-bind,v-on
styles/index.css
.pagination li{
display: inline;
}
.pagination li a{
padding:6px 12px;
background-color: #fff;
border:1px solid #ddd;
text-decoration: none;
margin-left: -1px;
color: #009a61;
}
.pagination .active{
background-color: #009a61;
color: #fff;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="styles/index.css" />
</head>
<body>
<div id="my_info">
<ul class="pagination">
<li v-for="n in pagecount">
<a href="javascript:void(0)" v-on:click="onpage(n+1)" v-bind:class="pagenum===n+1?'active':''">
{{ n+1 }}
</a>
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//ViewModel
new Vue({
el: '#my_info',
data: {
pagenum: 1,
pagecount: 10
},
methods: {
onpage: function (index) {
this.pagenum = index;
}
}
})
</script>
</html>
运行结果：
el:绑定的view
data:model属性
methods:model方法
v-bind:class="pagenum===n+1?'active':''"
model的pagenum属性对应的值和索引一直，设置样式class为active
v-on:click="onpage(n+1)"
view绑定方法，click时执行model的onpage方法
Vue.js简介及指令的更多相关文章
- Vue.js简介
Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...
- vue学习（一）、Vue.js简介
Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...
- 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：自定义指令
ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...
- vue.js 简介
Vue.js是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层 ...
- Vue.js——常用的指令
1.v-on:指令监听DOM事件,并在触发时运行一些javaScript代码. <div id='myView'> <img src="img/se.png" v ...
- vue.js 四（指令和自定义指令）
官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"> ...
- Vue.js的简介
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大 ...
随机推荐
- Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境
Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标 ...
- uitableview 和UISearchBar 下拉提示结合使用
自定cell的代码 餐厅的实体和餐厅对应控件的frame #import <Foundation/Foundation.h> @class RestaurantFrame; @interf ...
- 谈谈选用技术的原则，技术学习方法技巧，阅读代码的技巧及其它 MSF的一点心得
谈谈技术原则,技术学习方法,代码阅读及其它(正文) 这篇文章是前一阵在水木BBS上和别人讨论中偶自己发言的摘编,是偶这几年开发过程完全经验式的总结.完全个人经验,供批判. 一.选用技术的原则 比较规范 ...
- Vue.js hello world
<!DOCTYPE HTML> <html> <head> <title>vue.js hello world</title> <sc ...
- React(0.13) 定义一个动态的组件(属性)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- 细说PHP中strlen和mb_strlen的区别(转)
在PHP中,strlen与mb_strlen是求字符串长度的函数,但是对于一些初学者来说,如果不看手册,也许不太清楚其中的区别.下面通过例子,讲解这两者之间的区别. 先看例子: <?php // ...
- ceph mon更换ip地址
一.概述: 数据中心的集群从A地迁移到B地, 更改的信息包括: 集群内所有节点的ip 集群内所有节点的主机名 由ceph文档可知:http://docs.ceph.com/docs/hammer/ra ...
- 【Hibernate】浅析hibernate中的延迟加载
1 简介 在使用一些查询方法时,方法执行了,但是并没有立刻发送SQL语句查询数据库.而是在访问对象的getXxx方法时候才触发SQL执行加载对象数据.这种机制就称为延迟加载. 2 优点 延迟加载主要是 ...
- 【Oracle 】tablespace 表空间创建和管理
1.表空间的概述 1. 表空间是数据库的逻辑组成部分. 2. 从物理上讲,数据库数据存放在数据文件中: 3. 从逻辑上讲,数据库是存放在表空间中,表空间由一个或者多个数据文件组成. 2.oracle的 ...
- 【struts2】Action的生命周期
Struts2的Action的生命周期是:Struts2为每个请求都重新初始化一个Action的实例.可以稍微改造一下代码来验证一下. 给HelloWorldAction加上一个public无参的构造 ...