1.vue基本结构
　　<!DOCTYPE html>
　　　　<html>
　　　　　　<head>
　　　　　　　　<meta charset="utf-8" />
　　　　　　　　<title></title>
　　　　　　　　<script type="text/javascript" src="js/vue.min.js" ></script>
　　　　　　　　<script>
　　　　　　　　　　window.onload=function(){
　　　　　　　　　　var c = new Vue({
　　　　　　　　　　　　el:"#box", //选择器
　　　　　　　　　　　　data:{ //数据
　　　　　　　　　　　　　　msg:'welcome to vue'
　　　　　　　　　　　　},
　　　　　　　　　　　　methods(){
　　　　　　　　　　　　　　　　show:function(){
　　　　　　　　　　　　　　　　alert(1);
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　});
　　　　　　　　};
　　　　　　</script>
　　　　</head>
　　　　<body>
　　　　　　<div id="box">{{msg}}</div>
　　　　</body>
　　</html>
2.v-model="msg" //双向数据绑定，msgdata中的数据
3.v-for //循环
　　v-for=“value in arr” //循环 value是每一项值，arr代表一个数组或json数据，{{$index}} //是循环的每一项的索引值，数组，json都有，{{$key}} //json数据的键
　　v-for="(k,v) in json" //循环json数据，得到{{k}}-->key、{{v}}-->value
4.事件 事件都需要在methods里面注册一下才可以使用
　　v-on:click="show()"-->点击事件,show()就是要执行的函数
　　v-on:可以用@来替换
5.显示与隐藏
　　v-show=“true/false”
6.传参与组织与事件
　　1-1.)在执行事件时，我们传进一个参数$event，会得到一个对象，其中要好多方法，例如，ev.cancelBubble = true; //组织冒泡事件等
　　1-2.)组织冒泡事件还有另一种方法，在事件后面直接跟.stop，例如：@click.stop=“show()”
　　2-1.)阻止默认行为，以右击为例 @contextmenu="show($event)"//右击方法 ev.preventDefault();//阻止默认弹出框
　　2-2.)组织默认行为，以右击为例 @contextmenu.prevent=“show()”
　　3-1.)键盘事件传参 @keydown="show($event)" ev.keycode; //得到键盘每个键的键码
　　3-2.)键盘事件，按固定键触发 @keydown.13="show()" //按键码为13时触发，13代表enter键
　　3-3.)键盘事件，按固定键时触发 @keydown.enter="show($event)" //按enter键触发
7.class
　　一、
　　　　①、在css中写一个.red{color:red;}.blue{background-color:blue;}
　　　　②、在data中写两个数据r:‘red’,b='blue'
　　③、在<p :class="[r,b]">文字</p>
　二、
　　　　①、在css中写一个.red{color:red;}.blue{background-color:blue;}
　　　　②、在<p :class="{red:true,blue:false}">文字</p>
　　三、
　　　　①、在css中写一个.red{color:red;}.blue{background-color:blue;}
　　　　②、在data中写两个数据json：{red:true,blue:false}
　　　　③、在<p :class="json">文字</p>
8.style(数据中写复合样式注意用驼峰命名法)
　　一、
　　　　①、在html中直接写<p :style="{color:'red'}">这里是文字</p>
　　二、
　　　　①、在html中直接写<p :style="[c]">这里是文字</p>
　　　　②、在data中写样式数据 c:{color:'red'}
　　三、
　　　　①、在html中直接写<p :style="[c,b]">这里是文字</p>
　　　　②、在data中写样式数据 c:{color:'red'},b:{backgroundColor:'blue'}
　　四、
　　　　①、在css中写一个.red{color:red;}.blue{background-color:blue;}
　　　　②、在data中写两个数据json：{red:true,blue:false}
　　　　③、在<p :style="json">文字</p>
9.数据绑定 v-model
　　　　1.)在data中定义一个数据msg
　　　　2.)在html中用{{msg}}接受数据 {{msg}}双向绑定数据值 {{*msg}}数据只绑定一次 {{{msg}}} html转义
10.过滤器
　　1.){{msg | uppercase}} 数据转大写
　　2.){{msg | lowercase}} 数据转小写
　　3.){{msg | capitalize}}数据首字母大写
　　4.){{12 | currency}} 转为钱的标志，默认为$ ,若转为￥，{{12 | currency ‘￥’}}
　　5.)@keyup="show() | debounce 5000" //五秒后执行show()事件
　　6.)limitBy 2 // 取（默认前）2个数据 limitBy 2 1 //取2条数据，从1开始 limitBy 2 arr.length-2 //取倒数2条数据，arr为这个数组
　　7.)filterBy ‘p’ //得到数据中包含p的数据
　　8.)orderBy //排序 参数可以为1正序，-1倒叙

vue入门须知的更多相关文章

  1. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  5. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  6. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  7. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  8. parcel+vue入门

    一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...

  9. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

随机推荐

  1. 详解常用的gulp命令

    gulp.js是一款自动化构建工具,我们经常使用它在开发过程自动执行常见的任务.gulp.js 是基于 Node.js 构建的,利用 Node.js,可以快速构建项目. 由于gulp使用基于node, ...

  2. bzoj4828 [Hnoi2017]大佬

    Description 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语.你作为一个OIER,面对这样的事情非常 ...

  3. [ext4]04 磁盘布局 - Meta Block Groups

    Meta Block Groups,可以翻译为元块组集. 如果不采用Meta Block Groups特性,在每个冗余备份的超级块的后面是一个完整的(包含所有块组描述符的)块组描述符表的备份.如前所述 ...

  4. 开始使用gentoo linux——gentoo安装笔记（上）

    gentoo linux安装笔记(上) 家里有一台破旧的富士通笔记本,08年至今质量依然杠杠的,但是性能已经不能和现代超极本同日而语,装上了ubuntu更是不敢恭维,别提gnome和kde的linux ...

  5. Android计时器 android.widget.Chronometer

    说起做定时器,大家一般会想到Timer和Executors的定时器线程池,其实用这两个做都会有问题,在停止和重新计时时你回发现无法停止或者说计时加快(加快是因为多个线程在记录同一个变量),Androi ...

  6. 微信公众号开发笔记1(nodejs开发的)

    本篇记录了微信公众号开发的一些笔记 一.微信服务器与我们服务器的交流 微信开发者拥有自己的服务器,在我们服务器上可以与微信服务器进行交流.既然可以交流,那就必定需要前提条件(微信认证),也就是说,只有 ...

  7. Linux 定时任务详解

    原文地址:http://edu.codepub.com/2011/0104/28518.php   crond分为系统级定时和用户级定时,系统级定时主要编辑/etc/crontab,用户级定时主要利用 ...

  8. vlan内部与外部某终端之间的通信

    实现虚拟局域网外部终端与内部终端之间的通信,即实现pc3与pc1和pc4之间的通信. 把交换机上的默认VLAN1改成VLAN2(红色字体命令). 各vlan内部终端的通信,是通过vlan ID来实现的 ...

  9. HDU4712 Hamming Distance (随机化)

    link:http://acm.hdu.edu.cn/showproblem.php?pid=4712 题意:给1e5个数字,输出这些数中,最小的海明码距离. 思路:距离的范围是0到20.而且每个数的 ...

  10. java面试集锦

    HashMap和HashTable的区别 他们都是Map接口的实现类,实现了将唯一键值映射到特定的值上. HashMap没有分类或者排序,它允许一个null和多个null值. HashTable类似于 ...