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()

也可自己配置具体按键：

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

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 ...

随机推荐

python,pip环境变量设置
安装好python后,配置环境变量. 安装pygame需要先配置两个环境变量. 第一个是python的.先打开计算机,然后点击‘系统属性’然后点击‘高级系统设置’然后点击‘环境变量’在系统变量中找到p ...
基于thinkphp的后台管理系统模板快速搭建
当我们在搭建网站的时候,后端开发人员在编写后台的管理系统的时候,往往会因为缺少一个合适的后台管理系统的模板,而必须去重新编写一个,这几天由于工作上的安排,需要去研究一下thinkcmf的后台管理系统, ...
Java垃圾回收算法和内存分配策略
垃圾回收算法和内存分配策略 Java垃圾回收垃圾收集,也就是GC并不是Java的伴生物,而对于GC的所需要完成任务主要就是: 1.哪些内存是需要回收的? 2.何时去回收这些内存? 3.以何种方式去回 ...
web中的请求：get　与　post
web中get与post请求的区别:1. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过HTTP post机制,将表 ...
presto 函数中使用子查询
我们已知在sql中子查询可以配合 in 或者 exists 来使用,但是如何把子查询的结果传给函数呢? 场景: 我们有一个省份表数据如下: id province 1 广东 2 ...
tpot ufunc 'isnan' not supported for the input types, and the inputs could not be safely coerced to any supported types according to the casting rule ''safe''
机器学习训练的时候报出这个问题是因为dataframe中的数据类型有一个是‘object’,把它转成int,或float 就行,如下 df['A'] = df['A‘].astype(int) 参考 ...
修改create-react-app支持多入口
使用Facebook官方脚手架create-react-app创建React应用,默认只能生成一个SPA,入口是index.html.虽然,SPA的页面切换可以使用前台路由框架方便(比如React-R ...
sciense
I hate the word "networking." It must be one of the most overused words in the English lan ...
非关系统型数据库-mangodb
第三十六课非关系统型数据库-mangodb 目录二十四 mongodb介绍二十五 mongodb安装二十六连接mongodb 二十七 mongodb用户管理二十八 mongodb创建集合. ...
Python 12306登陆详细分析及操作
前面的话: 1.第一次尝试爬虫,登陆12306,有不足的地方,望大家留言告知,谢谢. 2.前面引入了一个requests模块,我不多说,大家都知道干啥的.还有config是我的一个配置文件,因为其中涉 ...

vue.js 精学记录

vue.js 精学记录的更多相关文章

随机推荐

热门专题