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. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  2. Xamarin.Android 绑定友盟社会化分享组件

    Xamarin.Android 绑定友盟社会化分享组件 最近在开发博客园Android App的时候需要用到友盟社会化分享组件,在github上搜了一下都没有找到最新版本绑定好的项目,就自己动手来绑定 ...

  3. js表白心形特效

    好久没有仔细钻研技术了,闲下来借鉴一下做出一些效果 友情链接: http://tiepeng.applinzi.com/love_you/ ;;background:#ffe;font-size:12 ...

  4. 【知识学习】如何寻找真实IP

    1.多地点ping查询IP,如果都一样可能没有使用cdn,如果有cdn,尝试海外地点ping查询IP 2.ping一下没有WWW的域名,可能存在真实IP.比如www.baidu.com设置了cdn,那 ...

  5. IBM GPFS并行文件系统

    原文地址:http://www.hqschina.com/Show.aspx?info_lb=283&info_id=751&flag=103 IBM GPFS文件系统是一种专门为群集 ...

  6. salesforce零基础学习(七十一)级联表DML操作

    曾经做项目没有考虑那么多,对于级联表操作都是正常的一步一步操作,没有考虑过失败情况,最近项目遇见了失败的情况,导致碰到了相应的情况,特此mark一下,免得后期继续踩坑. 需求如下:新建页面,页面中包含 ...

  7. 关于dom脚本编程的一些优秀理念总结

    1.平稳退化(优雅降级) 目的:当浏览器不支持js或者js被用户禁用时,做到即使不运行js,网页的可读性亦不会受到太大的影响. 理念:使用最新的技术面向高级浏览器构建最强的功能及用户体验,然后针对低级 ...

  8. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  9. TP5学习基础二:目录结构、URL路由、数据操作

    一.安装1.使用git或者composer(composer update)进行实时更新,区别在于git不会清空核心框架目录而composer会清空.2.使用官网打包好的TP压缩包(解压即可用)-&g ...

  10. node中创建服务进程

    背景 在node工程部署中,常常涉及到三方:本地客户端.跳板机和服务器(集群).在通过git触发gitlab hook脚本后,需要在跳板机中执行相应的ssh命令执行shell文件启动node服务器,这 ...