vue2.x学习笔记
1.使用模板template的时候必须要有跟节点，可以支持表达式，但不支持正则，想使用正则就用过滤器。
2.数据在显示的时候所带的HTML DOM直接显示，不会渲染，要渲染DOM，得用v-html。
3.使用v-model写单选和多选的时候，多选的数据关键字要用数组。
4.加了multiple="multiple"的select标签，关键字自动变成数组.
5.v-model修饰符number用来限定用户只能输入数字，如果输入的不是数字的部分不会加入data数据，但是如果一开始数据本身就是字符串类型的话，这个限定无效。
6.使用v-bind:class的时候，多个用数组，多个并控制是否显示，用大括号{}
7.v-bind:style操作示例
8. v-else必须紧跟在v-if dom元素后，否则无效，v-show数据为false时，直接在dom上加display:none
9.v-for的三种使用方式，数组遍历，对象遍历，数字遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="item in newslist"><a href="###">{{item.title}}</a></li>
<div v-for="(key,value) in items">
{{key}}-{{value}}
</div>
</ul>
<ul>
<li v-for="n in 10">
{{n}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
newslist:[
{title:"标题数据1",time:"2019-.05-03"},
{title:"标题数据1",time:"2019-.05-03"},
{title:"标题数据1",time:"2019-.05-03"},
{title:"标题数据1",time:"2019-.05-03"},
{title:"标题数据1",time:"2019-.05-03"},
{title:"标题数据1",time:"2019-.05-03"},
{title:"标题数据1",time:"2019-.05-03"}
],
items:{
name:"张三",
sex:"男",
age:18,
classname:"社会大学"
}
}
});
</script>
</body>
</html>
10.自定义指令示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
</head>
<body>
<div id="box1">
<p v-color="mycolor">这个p标签里面的文字，通过自定义指令来改变颜色</p>
</div>
<script type="text/javascript">
Vue.directive("color",function(myelement,obj){
var colorvalue=obj.value;
myelement.style.color=colorvalue;
});
var vm=new Vue({
el:"#box1",
data:{
mycolor:"blue"
}
});
</script>
</body>
</html>
vue2.x学习笔记的更多相关文章
- vue2.0学习笔记之路由（二）路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0学习笔记之路由（二）路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0学习笔记一 ：各种表达式
#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性: #,过滤器可以串联 {{ message | filterA | ...
- vue2.x学习笔记（二十二）
接着前面的内容:https://www.cnblogs.com/yanggb/p/12633051.html. 自定义指令 简介 除了核心功能默认内置的指令([v-mode]和[v-show]等),v ...
- vue2.x学习笔记（十九）
接着前面的内容:https://www.cnblogs.com/yanggb/p/12631022.html. 程序化的事件侦听器 在前面的学习中,我们已经知道了[$emit]全局属性的用法,它可以被 ...
- vue2.x学习笔记（十七）
接着前面的内容:https://www.cnblogs.com/yanggb/p/12616847.html. 动态组件&异步组件 在前面学习组件基础的时候学习过动态组件,官方文档给出过一个例 ...
- vue2.x学习笔记（十六）
接着前面的内容:https://www.cnblogs.com/yanggb/p/12616543.html. 组件中的插槽 在2.6.0的版本中,vue为具名插槽和作用域插槽引入了一个新的统一的语法 ...
- vue2.x学习笔记（十五）
接着前面的内容:https://www.cnblogs.com/yanggb/p/12609450.html. 组件的自定义事件 这里来学习一下组件中的自定义事件. 事件名 不同于组件名和prop,事 ...
- vue2.x学习笔记（十二）
接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...
- vue2.x学习笔记（十一）
接着前面的内容:https://www.cnblogs.com/yanggb/p/12586416.html. 表单的输入绑定 表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录 ...
随机推荐
- 【转】Java内存与垃圾回收调优
要了解Java垃圾收集机制,先理解JVM内存模式是非常重要的.今天我们将会了解JVM内存的各个部分.如何监控以及垃圾收集调优. Java(JVM)内存模型 正如你从上面的图片看到的,JVM内存被分成多 ...
- python 图形化(Tkinter)
python提供了多个图形开发界面的库,几个常用Python GUI库如下: Tkinter: Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口.T ...
- MLCC 电容的的 NP0 C0G 材质
MLCC 电容的的 NP0 C0G 材质 随手记一下. MLCC 中最稳定的材质 NP0 C0G,NP0 和 C0G 是相同的,只是不同的产商不同的名字而已. 注意中间的是 0 不是 英文字母 O,虽 ...
- Wireshark图解教程（简介、抓包、过滤器）【转载】
原文网址:http://blog.sina.com.cn/s/blog_5d527ff00100dwph.html Wireshark是世界上最流行的网络分析工具.这个强大的工具可以捕捉网络中的数据, ...
- compile cef2526
fetch --nohooks chromium cd /path/to/chromium/src# git checkout -b 51.0.2704.103 refs/tags/51.0.2704 ...
- Azure Managed Disk
Azure的磁盘存储是保存在存储账户中的Page Blob.由于Azure Storage Account的各种限制,在设计VM的磁盘存储时,要符合Azure磁盘存储账户的最佳实践,请参考:http: ...
- Pager分页
分页组件: /// <summary> /// 分页组件 /// </summary> public class PagerHelper { /// <summary&g ...
- Linux驱动多线程 - 互斥量
1.内核多线程相关内容 1.1 头文件#include <linux/kthread.h> 1.2 定义/初始化变量 struct mutex SPI_work; /*定义互斥体*/ mu ...
- Swing编程中为什么对Panel设置了位置后，它的lable位置也跟这变了呢？
总结: package com.da; //这里我不明白,我对每一个Panle里的按钮设置了位置BorderLayout.SOUTH.可是为什么Lable的位置和它一样同步设置了呢? //做一个界面 ...
- 断路器之一：Hystrix 使用与分析
一:为什么需要Hystrix? 在大中型分布式系统中,通常系统很多依赖(HTTP,hession,Netty,Dubbo等),如下图: 在高并发访问下,这些依赖的稳定性与否对系统的影响非常大,但是依赖 ...