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. 表单的输入绑定 表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录 ...
随机推荐
- Python collections系列之有序字典
有序字典(orderedDict ) orderdDict是对字典类型的补充,他记住了字典元素添加的顺序 1.创建一个有序字典 import collections dic = collections ...
- Ubuntu 16.04 LTS制作本地源
平时apt-get install安装软件时,下载的deb文件都会存放在/var/cache/apt/archives/下,没有网络时就需要将这些deb制作成本地源.另外,如果在本机架一个简单的网络服 ...
- Poj 3287 Catch That Cow(BFS)
Description Farmer John has been informed of the location of a fugitive cow and wants to catch her i ...
- SPI驱动框架-1（DM8127 Linux2.6.37为例）
一.驱动程序结构 1.platform_device 文件:/arch/arm/mach-omap2/device.c static struct omap2_mcspi_platform_confi ...
- linux指令 apt-grt指令使用
apt-get 是linux的一条指令,主流的linux版本Debian和ubuntu都使用apt-get来安装软件.那么,需安装的软件都放在哪里呢??? apt-get 利用软件安装源来安装软件,其 ...
- Changing Controller Numbers in Solaris
If you need to change the controller numbers (c#) that a disk has assigned to it, whether it is for ...
- apache http 跳到https
RewriteEngine OnRewriteCond %{HTTPS} !=onRewriteRule ^(.*) https://%{SERVER_NAME}/$1 [R,L]
- AndroidStudio 中使用FFMPEG
1.下载 FFmpeg 源码 git clone https://git.ffmpeg.org/ffmpeg.git 这一步可能会花比较长的时间 2.编译 FFmpeg for Android 2.1 ...
- FFmpeg for Android compiled with x264, libass, fontconfig, freetype and fribidi
android下打算使用ffmpeg的 drawtext ,不过需要 --enable-libfreetype 但是freetype是个第三方库,所以需要先编译freetype,然后再编译ffmpe ...
- Linux基础命令-文件与目录
Linux基础命令-文件与目录 参考:<鸟哥linux私房菜>五-七章,17/12/5复习,18/01/15复习 文件权限 rwx421:用户,用户组,其他 umask查看默认权限:000 ...