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的窗口键)

 v-model

使用在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 精学记录的更多相关文章

  1. vue.js 精学组件记录

    组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...

  2. vue.js精讲02

    2017-09-17 笔记及源码地址 : https://github.com/wll8/vue_note vue 中的事件深入. 事件: @click/mouseover…事件简写: @ 如 @cl ...

  3. vue.js精讲01

    笔记及源码地址 : https://github.com/wll8/vue_note 01 2017-09-13 view一个 mvvm框架(库),和 ag 类似.比较小巧,容易上手. mvc: mv ...

  4. Hello vue.js的随笔记录

    数据双向绑定的script在组件定义位置后面才顶用. 使用它的话,引用js就好,比较简单. 声明一个vm对象,new Vue({}).这个构造里传一个对象,包含el:界面元素,data:数据,meth ...

  5. Vue的理解:Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  6. Vue.js 入门指南

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  7. Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  8. vue.js有什么用,是用来做什么的(整理)

    vue.js有什么用,是用来做什么的(整理) 一.总结 一句话总结:用数据绑定的思想,vue可以简单写单个页面,也可以写一个大的前端系统,也可以做手机app的界面. 1.Vue.js是什么? 渐进式框 ...

  9. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

随机推荐

  1. KiB 、十进制单位转换 、二进制单位转换

    KiB是kilo binary byte的缩写,指的是千位二进制字节 KB是kilobyte的缩写,指的是千字节   二进制标准命名   十进制国际单位制SI标准: 1 KB= 1,000 Byte ...

  2. argument 1 must be 2-item sequence, not int

    看了 https://blog.csdn.net/qq_18250439/article/details/80872425  的说明,才明白为什么错了. 当使用Python3-pygame时出现Typ ...

  3. 【转】使用iTextSharp在Asp.Net中操作PDF

    使用iTextSharp在Asp.Net中操作PDF操作 使用iTextSharp在Asp.Net中操作PDF系列文章目录 实战 iTextSharp iTextSharp 合并多个PDF文件 C#生 ...

  4. learning mqtt protocol

    reference: http://docs.oasis-open.org/mqtt/mqtt/v3.1.1/os/mqtt-v3.1.1-os.html

  5. Vue中的钩子

    每个Vue实例被创建后都要经历初始化过程.在这个过程中也会运行一些叫做生命周期钩子的函数,方便用户在不同阶段进行不同的代码实现. 1.Created 在实例创建完成后立即执行的函数. <!DOC ...

  6. python之路-----MySql操作

    一.概述 1.什么是数据库 数据库就是按照数据结构来组织.存储和管理数据的仓库.如我们创建的文件夹,就是一个数据库. 2.什么是mysql,oracle,access,sqlit等? 他们都是一款软件 ...

  7. 二叉树的简单操作(Binary Tree)

    树形结构应该是贯穿整个数据结构的一个比较重要的一种结构,它的重要性不言而喻! 讲到树!一般都是讨论二叉树,而关于二叉树的定义以及概念这里不做陈诉,可自行搜索. 在C语言里面需要实现一个二叉树,我们需要 ...

  8. 正则表达式中的re.S

    正则表达式中,“.”的作用是匹配除“\n”以外的任何字符,也就是说,它是在一行中进行匹配.这里的“行”是以“\n”进行区分的.a字符串有每行的末尾有一个“\n”,不过它不可见. 如果不使用re.S参数 ...

  9. java线程入门一

    线程优先级: 在JAVA线程中,通过一个int型变量priority来控制线程优先级,线程的有限机为1-10,默认为5,优先级高的线程获得的运行时间要高于优先级低的线程.但这只是一个提示,操作系统和J ...

  10. java基础3(二)

    基础加强 类加载器 A.类加载器获取classpath下任意内容 注意: 可以通过ClassLoader可以获取classpath下的所有内容. SpringMVC 1.整体架构 流程图 2.流程细节 ...