vue.js 精学记录
v-bind:class使用的方式：
1.对象与法：:class="{'active':isActive}"
此时当isActive为true时，会拥有active
2.数组语法：需要应用多个class时，可以使用数组语法。
:class = " [activeCls,errorCls ] ",
var app = new Vue({
el:"#app",
data:{
activeCls:'active',
errorCls:'error'
}
})
内置指令
v-cloak:
当网速较慢，vue.js还没加载完时，在页面上会显示{{message}}这样的字样，直到vue
创建实例，编译模板dom才会被替换，所以可能会闪动，只要加一句css就可以解决
[v-cloak] {
display:none;
}
这个对于简单的项目很实用，在具有工程化的项目里，比如webpack和vue-router，项目html里只有一个空的div元素，其余全部由路由去挂载不同组件完成的，
所以不需要v-cloak.
v-once
定义它的元素之渲染一次，包括元素或组件的所有子节点，渲染后，不在随数据变化重新渲染。
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<template v-if="type==='name'">
<label>用户名</label>
<input placeholder="输入用户名" key="name-input">
</template>
<template v-else>
<label>邮箱</label>
<input placeholder="输入邮箱" key="mail-input">
</template> <button @click="handleToggleClick">切换输入类型</button>
</div> <script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
type:'name'
},
methods:{
handleToggleClick:function(){
this.type = this.type ==='name' ? 'mail' : 'name';
}
}
})
</script>
</body>
</html>
vue 在渲染元素时，出于效率考虑，会尽可能的复用已有的元素而非重新渲染，比如上面的实例，如果不在input上面加上唯一的key,切换时input的内容时相同的，加上key之后为此切换都会重新渲染了。
v-for
v-for除了常用的功能外，还可以迭代整数。
<span v-for="n in 10">{{n}} </span>
输出 1 2 3 4 5 6 7 8 9 10
数组更新
当修改数组时，vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。vue包含了一组观察数组变异的方法，使它们改变数组也会出发视图更新：
push()
pop()
shift()
unshift
splice()
• sort
• reverse()
需要注意的是，有些变动的数组中，vue是不能检测到的，也不会出发视图更新：
1.通过索引直接设置项，比如 app.books[3]={.....}
2.修改数组长度，比如 app.books.length=1
解决第一个问题有两种方法：
第一种是vue 内置的set方法:
Vue.set(app.books,3,{
name:"揭秘",
author:"zx"
})
如果是在webpack中使用组件化的方式，默认是没有导入Vue的，这时可以使用$set，如：
this.$set(app.books,3,{
name:"揭秘",
author:"zx"
})
另一种方法：
app.books.splice(3,1,{
name:"揭秘",
author:"zx"
})
解决第二个问题也可以用这样的方法：
app.books.splice(1);
修饰符
在@绑定的事件后面加小圆点"."，再跟一个后缀来使用修饰符。Vue支持以下修饰符：
.stop
.prevent
.capture
.self
.once
具体用法有：
//阻止单击事件冒泡
<a @click.stop="handle"></a> //提交事件不再重载页面
<form @submit.prevent="handle”></form> //修饰符可以串联
<a @click.stop.prevent=”handle”></a> //只有修饰符
<form @submit . prevent></form> //添加事件侦听器时使用事件捕获模式
<div @click.capture=”handle”>...</div> //只当事件在钙元素本身触发时书法回调
<div @click.self=”handle”>...</div> //只触发一次，组件同样适用
<div @click.once=”handle”>...</div>
在表单元素上监听事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：
//只有在keyCode是13时调用vm.submit()
<input @keyup.13="submit" >
也可自己配置具体按键：
Vue.config.keyCode.f1=112;
//全局定义后就可以使用@keyuo.f1
除了具体的某个keyCode外，vue还提供了一些快捷名称，一下是别名：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
这些按键修饰符可以组合使用，或者和鼠标一起配合使用：
.ctrl
.alt
.shift
.meta （Command,windows的窗口键）
使用在input textarea等表单绑定时，改变表单的数值，会触发数据更新。
单选按钮：
在单独使用时，不需要v-model，只要v-bind绑定一个布尔类型的值就可以
<div id=”app”>
<input type=”radio”:checked=”picked”>
<label>单选按钮</label>
</div> <script>
var app = new Vue({
el:"#app",
data:{
picked:true
}
})
</script>
如果是组合使用来实现互斥选择的效果，需要v-model和value来配合。
<input type="radio" v-model="picked" value="html" id="html"><br/>
<input type="radio" v-model="picked" value="css" id="css"><br/>
<input type="radio" v-model="picked" value="js" id="js"><br/>
<p>选择的项目是：{{picked}}</p>
data:{
picked:'js'
}
这样的话，选择不同的radio，互斥并且会改变数据picked的值，从而引起视图的变化。
同理使用checkbox和radio基本上是一致的,单独使用用v-bind绑定一个boole类型的数值，
多个同时使用：
<input type="checkbox" v-model="picked" value="html" id="html"><br/>
<input type="checkbox" v-model="picked" value="css" id="css"><br/>
<input type="checkbox" v-model="picked" value="js" id="js"><br/>
<p>选择的项目是：{{picked}}</p>
data:{
picked:['js','html']
}
下拉框中使用：
<select v-model="selected">
<option>html</option>
<option>js</option>
<option>css</option>
</select>
data:{
selected:'html'
}
dangselect是多选的情况时，selected就是数组。
在实际适用业务中，有时需要绑定一个动态数据，这时可用v-bind实现：
<input type="radio" v-model="picked" :value="value">
<p>picked:{{picked}}</p>
<p>value:{{value}}</p>
data:{
picked:false,
value:"123"
},
当选中的时候,picked的是会变成value的值'123'。
复选框：
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<p>{{toggle}}</p>
<p>{{value1}}</p>
<p>{{value2}}</p>
data:{
toggle:false,
value1:'a',
value2:'b'
},
勾选时，toggle的值时true-value即为a,不勾选时toggle的值为false-value，即为b。
下拉框：
<select v-model="selected">
<option :value="{number: 123}">123</option>
</select> <p>{{selected.number}}</p>
选择之后，selected变成对象，此时selected.number=123
v-model的修饰符
.lazy v-model默认是在input事件同步输入框的数据，使用修饰符.lazy会转变为在change事件中同步，在失焦或者回车才触发
.number 可以将输入转换为Number类型。
.trim 自动过滤首尾空格
vue.js 精学记录的更多相关文章
- vue.js 精学组件记录
组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...
- vue.js精讲02
2017-09-17 笔记及源码地址 : https://github.com/wll8/vue_note vue 中的事件深入. 事件: @click/mouseover…事件简写: @ 如 @cl ...
- vue.js精讲01
笔记及源码地址 : https://github.com/wll8/vue_note 01 2017-09-13 view一个 mvvm框架(库),和 ag 类似.比较小巧,容易上手. mvc: mv ...
- Hello vue.js的随笔记录
数据双向绑定的script在组件定义位置后面才顶用. 使用它的话,引用js就好,比较简单. 声明一个vm对象,new Vue({}).这个构造里传一个对象,包含el:界面元素,data:数据,meth ...
- Vue的理解：Vue.js新手入门指南----转
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- Vue.js 入门指南
1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...
- Vue.js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- vue.js有什么用，是用来做什么的（整理）
vue.js有什么用,是用来做什么的(整理) 一.总结 一句话总结:用数据绑定的思想,vue可以简单写单个页面,也可以写一个大的前端系统,也可以做手机app的界面. 1.Vue.js是什么? 渐进式框 ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
随机推荐
- 正向代理 vs 反向代理
正向代理: 内网客户端访问外网服务器的中介 反向代理: 外网客户端访问内网服务器的中介 正向代理: 代理访问外部资源 正向代理的用途: 1. 访问原来无法访问的资源 , 如googl 2. 可以做缓存 ...
- vs2015网站发布时，设置页面合并后程序集的文件版本
如何将web网站的页面合并成一个新的程序集发布,并设定文件版本? 这个问题我也纠结了很久,问了很多大牛,也没有找到解决方案 曾开了一贴,https://bbs.csdn.net/topics/3910 ...
- Delphi中的日期加减
var Date: TDateTime; FormatSettings: TFormatSettings; begin Date := Now;//获取当天时间 ShowMessage(DateTo ...
- 跟随我在oracle学习php（18）
修改表: 一般概述 通常,创建一个表,能搞定(做到)的事情,修改表也能做到.大体来说,就可以做到: 增删改字段: 增:alter table 表名 add [column] 字段名 字段类 ...
- JS数组映射详解
现在这里占个坑位,免的忘了,需要整理一下最近的内容: 1.数组映射的使用 2.微信分享功能详解 3.jq自己封装 4.HTML的富文本应用
- GetLastError 错误返回码
(0)-操作成功完成.(1)-功能错误.(2)- 系统找不到指定的文件.(3)-系统找不到指定的路径.(4)-系统无法打开文件.(5)-拒绝访问.(6)-句柄无 效.(7)-存储控制块被损坏.(8)- ...
- GoLand配置数据库、远程host以及远程调试
GoLand配置MySQL数据库: (1)右侧栏 -> Database -> +添加 (2)选择MySQL (3)修改Name -> Comment(可选) (4)选择MySQL版 ...
- Java代码调用服务器上的Shell脚本
Java代码调用服务器上的Shell脚本 这里主要是因为我们报表平台有用到用户手工录入的数据作为结果数据且需要纳入saiku去展示 如我们所知,saiku不会自动刷新,所以需要在数据更新接口中调用服务 ...
- c++ 指针与const的三种组合
三种形式 const int a=1; int b=2: 1 const int * ptr1=&a; 2 int * const ptr2 = b; 3 const int * const ...
- boostrap 日期插件(带中文显示)
不知道大家用什么样的日期插件,我最近用了bootstrap插件,整理了下,分享给大家,第四部分是我找的插件源码,可以省去大家的找的时间,按1-3的步骤用就好了,有些样式上的小问题就自己调一调: (1) ...