vue入门须知
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入门须知的更多相关文章
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- parcel+vue入门
一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
随机推荐
- MapReduce过程(包括Shuffle)详解
首先,map的输入数据默认一个一个的键值对,键就是每一行首字母的偏移量,值就是每一行的值了. 然后每一个输入的键值对都会用我们定义的map函数去处理,这里用wordcount来举例的话就是,每一个键值 ...
- javascript——数据类型
在内存中,分为栈.堆.代码段.静态区,为了快速处理复杂的代码,在不同的区间储存不同的数据类型. 数据类型分为初始类型与引用类型,初始类型在栈中存储,变量赋值传值不传址,引用类型在堆中存储,传址不传值. ...
- JavaEE开发之SpringMVC中的静态资源映射及服务器推送技术
在上篇博客中,我们聊了<JavaEE开发之SpringMVC中的自定义拦截器及异常处理>.本篇博客我们继续的来聊SpringMVC的东西,下方我们将会聊到js.css这些静态文件的加载配置 ...
- 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)
本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 上一篇文章<商城项目实战 | 2.1 Android 仿京东商城 ...
- (二)java多线程之synchronized
本人邮箱: kco1989@qq.com 欢迎转载,转载请注明网址 http://blog.csdn.net/tianshi_kco github: https://github.com/kco198 ...
- JS基础——入门必备
·首先,来简单的说一下,JS是啥,JS是JavaScript的简写,是 基于浏览器的 基于对象的 事件驱动 脚本语言 ·那么JS有什么用呢?ta可以实现: 表单验证 添加动画效果 动态更改页面内容 A ...
- 用java实现大文件分割、排序、合并
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileNotFoundExcepti ...
- 云计算之路-阿里云上:负载均衡错误修改Cookie造成用户无法登录
最近陆续有用户反馈在我们网站上登录时遇到登录死循环问题.输入用户名与密码提交后,显示登录成功,但跳转到目标网址后(由于依然处于未登录状态)又跳转回登录页面,再次登录,再次这样...就这样一直循环,怎么 ...
- 如何在WebGL全景图上做标记
WebGL可以用来做3D效果的全景图呈现,例如故宫的全景图.但有时候我们不仅仅只是呈现全景图,还需要增加互动.故宫里边可以又分了很多区域,例如外朝中路.外朝西路.外朝东路等等.我们需要在3D图上做一些 ...
- MySQL数据库操作常用命令
MySQL数据库操作常用命令DOS连接数据库1.安装MySQL配置好环境2.运行cmd命令net start mysql3.找到mysql文件根目录输入命令mysql -h localhost -u ...