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. 表单的输入绑定 表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录 ...
随机推荐
- WebForm中创建树节点TreeNode
Tree: namespace ECTECH.NorthSJ.Web.SysData { public partial class testTree : BasePage { ; protected ...
- java代码从键盘输入执行次数，数，然后排序
总结:实现从键盘控制执行次数,困惑我很久,直到昨日在提问时,网友说通过循环是肯定可以的所以顿悟了 package com.c2; import java.util.Arrays; import jav ...
- AngularJS核心特性（四大点）
本人刚刚接触AngularJS,还不太熟悉,就说说我目前遇到的一些注意点吧. 1.调用外来文件script文件 AngularJS核心特性一 MVC MVC设计模式 html文件 <!DOCT ...
- 如何通过ISO安装win7程序
从下载u启动工具到安装Ghost Win7系统教程 来源:http://www.uqidong.com时间:2013-08-12 09:17:38 怎样用u启动u盘启动盘安装ghost系统?u启动制作 ...
- Celery-4.1 用户指南: Extensions and Bootsteps (扩展和Bootsteps)
自定义消息消费者 你可能想要嵌入自定义的 Kombu 消费者来手动处理你的消息. 为了达到这个目的,celery 提供了一个 ConsumerStep bootstep 类,你只需要定义 get_co ...
- windows下查看端口占用（砖）
第一步,执行命令:netstat -ano -a 显示所有连接和监听端口 -n 以数字形式显示地址和端口号. 此选项一般与 -a选项组合使用 -o 显示与每个连接相关的所属进程 ID. Active ...
- DAY9-python并发之多进程理论
一.背景知识 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所 ...
- MongoDB中的查询
MongoDB中文文档:http://docs.mongoing.com/manual-zh/contents.html 这里以集合名称为test为例,数据库通过for循环插入一些测试数据,键分别为: ...
- buntu下shell脚本运行异常：bash和…
转载于:http://www.51testing.com/?uid-225738-action-viewspace-itemid-208702 我用bash到语法写了一个shell脚本(准确的说是把书 ...
- 每天一道算法题(15)——打印1到最大的n位数
题目: 打印1到最大的n位数.如n=4,打印1-9999. 思路: 由于直接使用循环会导致int或者long long都不够存储.因此使用字符串来存储数据,这里涉及到数字转换成字符串以及字符串的加法. ...