一、基本语法:
  1、实例化:new Vue({})
  2、el:一定是根容器元素(vue的作用域就是这个根元素内),就是写选择器
     data:用于存储数据
        methods:定义方法(方法里this指向当前vue实例化的对象,但是获取属性和方法不需要this.data.name,直接this.name即可,获取方法也是如此)

二、数据绑定:给属性绑定对应的值

  (1)v-bind的使用:v-bind:href="website",v-bind:value="value"(注意此处就不需加双大括号了)

  (2)v-html用于绑定输出html元素:<div v-html="websiteTag"></div>

三、事件:
  (1)v-on:click="事件名"(有参数的话就是事件名(参数)),简写:@click="事件"

  (2)事件修饰符:v-on:click.事件修饰符
    v-on:click.once="add(1)",v-on:mousemove.stop,v-on:click.prevent="add"(阻止默认事件)

  (3)键盘事件keyup、keydown,

    键盘修饰符:keyup.enter、keyup.alt.enter(链式:alt+enter键)

四、双向数据绑定:input/select/textarea
  (1)v-model指令

  (2)ref机制:给input标签标记
  <input ref="name" v-on:keyup="logName">

  方法里面利用this.$refs.name.value去获取值

五、动态绑定css样式:

  (1)v-bind:class="{red:true,blue:true}"

六、条件与循环
  (1)v-if/v-else-if/v-else、v-show,两者的区别(有无实际dom元素的区别)

  (2)v-for、列表渲染template

  (3)v-for里面对数组默认的有{{$index}}索引,对json对象默认有{{$index}}、{{$key}}键值,或:v-for="(k,v,index) in json"

七、事件深入:
  (1)事件对象$event:@click="show($event)"

  (2)事件冒泡:

  阻止冒泡:
    1、原生的:$event拿到事件对象,然后方法里面ev.cancelBubble=true

    2、@click.stop="show()"
  阻止默认行为:

  1、原生的:$event拿到事件对象,然后方法里面ev.preventDefault()

  2、@contextmenu.prevent(阻止右键默认行为)

  (3)键盘事件:@keydown、@keyup、$event、ev.keyCode(获取键值)

  常用键:@keydown.13或@keydown.enter/@keydown.up(上下左右均可)

八、属性

  v-bind绑定属性:v-bind:src="url"

  <img src="{{url}}" alt=""> 此方式效果可以出来,但会报错

  <img v-bind:src="url" alt="">,效果出来,不会发请求

  v-bind简写就是冒号::src="url"

九、class和style
  (1)class:
    1、:class="[red,blue]" red/blue指的是data里的数据,data里的red/blue再去指向实际的class名
    2、:class="{red:true,blue:true}"或者:class="{red:a,blue:b}",a/b为data里的数据true/false
    3、:class="json",即把方法2的json放到data里面去
  (2)style:跟class写法一样
    1、:style="[c,b]";
    注意:复合样式需要采用驼峰命名法
    2、:style="{width:'200px',color:'red'}"或者:style="{width:a,color:b}"
    3、:style="json"

十、模板
  v-model指令
  {{msg}} 数据更新、模板随着变化
  {{*msg}} 数据只绑定一次
  {{{msg}}} HTML转意输出

十一、过滤器

  过滤模板的数据

  (1)系统提供一些过滤器:capitalize/lowercase/uppercase

    语法:{{msg|fiter}}单个、{{msg|fiterA|fiterB}}多个

    currency 钱的标志

    {{msg|fiter 参数}},比如{{12|currency "¥"}}就变成:¥12.00

十二、交互

  如果vue想做交互,必须引入vue-resource

  一般三种交互方式:get、post、jsonp,或直接this.$http({……})

  1、get:

  向本地文件取数据

//1、this.$http,指向当前的ajax对象
//2、promise的写法
this.$http.get('a.txt').then(function(res){
alert(res.data);//成功
},function(res){
alert(res.status);//失败
});

  向服务器传参数,然后取结果

this.$http.get('get.php',{
a:
1,
b:2

}
).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});

  2、post:需要加请求头信息

this.$http.post('post.php',{
a:,
b:
},{
emulateJSON:
true
}
).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});

  3、jsonp

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a' //参数
},{
jsonp:
'cb' //指定callback名字,默认就是callback
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});

  4、this.$http()

    this.$http({
url:地址
data:给后台提交数据,
method:'get'/post/jsonp
jsonp:'cb' //callback名字
}).then();

Vue基础知识总结(一)的更多相关文章

  1. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  2. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  3. Vue基础知识简介

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

  4. Vue基础知识梳理

    1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...

  5. Vue基础知识

    Vue特性: 双向数据绑定 通过 指令 扩展了 HTML,通过 表达式 绑定数据到 HTML 解耦视图与数据 可复用组件 虚拟DOM -> 对象 M-V-VM 数据驱动视图 Vue声明周期: b ...

  6. Vue基础知识之组件及组件之间的数据传递(五)

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

  7. Vue基础知识之过滤器(四)

    过滤器 1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg ...

  8. Vue基础知识之vue-resource和axios(三)

    vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的 ...

  9. Vue基础知识之常用属性和事件修饰符(二)

    Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...

  10. Vue基础知识之指令和生命周期(一)

    优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...

随机推荐

  1. 1、使用Xcode修改iOS项目工程名和路径名

    http://blog.sina.com.cn/s/blog_a42013280101blxo.html 对,好:错,改正. ------ 前言 系统 10.7 狮子 开发平台 xcode 4.5.2 ...

  2. http://www.himigame.com/mac-cocoa-application/893.html

    [Cocoa(mac) Application 开发系列之一]创建第一个application—计算器 终于HTTP与Socket服务器以及cocos2dx之间的通信各种框架成功完成后,现在抽时间学习 ...

  3. 在opensuse 中安装视频解码器

    最近由于需要32位的linux系统使用,很多版本的linux都不再发布32的安装镜像了,有一些又不是很熟悉,我熟悉的manjaro发布的32镜像又不是kde桌面,最后发现opensuse的滚动版本,即 ...

  4. VS mfc MessageBox() 和 AfxMessageBox()

    转载:http://blog.csdn.net/phenixyf/article/details/41744039 一.MessageBox()用法 1.函数原型 Messagebox函数在Win32 ...

  5. linux===linux在线模拟器汇总

    jslinux: http://bellard.org/jslinux/ 一个叫Fabrice Bellard的工程师使用 JavaScript 在浏览器上模拟出了一个 Linux 系统.没有图形化界 ...

  6. Restful接口设计

    URL设计规范:/模块/资源/{标示}/集合1/... eg: /user/{uid}/friends ->好友列表 例子:秒杀系统API设计 1.请求参数绑定:@PathVariable(&q ...

  7. 【 VSFTPD 】ftp 客户端问题

    网络环境: 两个独立的内网环境,前端都有路由和防火墙的管控.要在这两个独立的内网使用ftp通过互联网进行通信. 首先,ftp server 服务端口默认修改为:2100 数据端口修改为:21000 将 ...

  8. Grunt环境搭建及使用 前端必备

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  9. JS监听页面滚动到底部事件

    废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop( ...

  10. 纯css 超链接变按钮

    a{ font-family:Arial; font-size:.8em; text-align:center; margin:3px;}a:link,a:visited{ color:#A62020 ...