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. 表单的输入绑定 表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录 ...
随机推荐
- http之206状态码
206状态码, 大概就是浏览器先不下载要下载的文件,而是弹窗告诉用户,该文件是什么,有多大.由用户自行决定是否下载. 在html中,加一个a标签,a标签的地址是一个文件,就可实现该效果. 具体可参考下 ...
- Jet Brains家族XX方法
声明:本文转载自 https://www.jianshu.com/p/f404994e2843 2018/11/23
- FPGA中竞争冒险问题的研究
什么是竞争冒险? 1 引言 现场可编程门阵列(FPGA)在结构上由逻辑功能块排列为阵列,并由可编程的内部连线连接这些功能块,来实现一定的逻辑功能. FPGA可以替代其他PLD或者各种中小规模数 ...
- 在Mac系统下使用自己安装的PHP
今天在安装单元测试框架PHPUnit,需要PHP的最低版本是5.6,由于我的MacBook自带的PHP版本是5.5.36,不能满足安装条件. 看了一下这个网址:https://php-osx.liip ...
- 断路器之一：Hystrix 使用与分析
一:为什么需要Hystrix? 在大中型分布式系统中,通常系统很多依赖(HTTP,hession,Netty,Dubbo等),如下图: 在高并发访问下,这些依赖的稳定性与否对系统的影响非常大,但是依赖 ...
- __align(num) 分析
这几天用2440读写SD卡(FAT32文件系统),定义了个文件信息的数据结构里边数据类型有unsigned char, unsigned int, unsigned long几种,在从SD卡上读取数据 ...
- ssh框架搭建实例代码教程步骤
http://blog.csdn.net/u010539352/article/details/49255729
- loop
-- ------------------------loop---------------------------delimiter $DROP PROCEDURE IF EXISTS my_cou ...
- Python之整数，浮点数和布尔类型
整数和浮点数有那个四则运算: 两种类型的数可以直接进行加减,当整数和浮点数进行加减的时候,结果会自动的变为浮点数,其中除法运算是“/”来表示的, 而余数的算术符号是“%”来表示的.如果是为了求除完后的 ...
- 定位程序问题出现的原因工具-jstack
jstack还可以生成线程快照 如何使用jstack: 1.打开命令行,输入jstack 在任务管理器中就可看到对应进程id 2.在命令行中输入 jstack -l 进程id 这样就可得到进程中所有的 ...