一、基本语法:
  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. [ Openstack ] Openstack-Mitaka 高可用之 计算服务(Nova)

    目录 Openstack-Mitaka 高可用之 概述    Openstack-Mitaka 高可用之 环境初始化    Openstack-Mitaka 高可用之 Mariadb-Galera集群 ...

  2. [ Python - 13 ] 批量管理主机必备模块

    批量管理程序必备模块 optparse configparser paramiko optparse模块 简介:        optparse模块主要用来为脚本传递命令参数功能 使用步骤: 1. i ...

  3. OC学习——OC中的@protocol(@required、@optional)、代理设计模式

    一.什么是协议? 1.协议声明了可以被任何类实现的方法   2.协议不是类,它是定义了一个其他对象可以实现的接口   3.如果在某个类中实现了协议中的某个方法,也就是这个类实现了那个协议.   4.协 ...

  4. lucene5 实时搜索

    openIfChanged public static DirectoryReader openIfChanged(DirectoryReader oldReader) throws IOExcept ...

  5. MVC架构中的controller的几种写法

    开始写代码之前,我们先来看一下spring MVC概念.一张图能够清晰得说明. 除了controller,我们需要编写大量代码外,其余的都可以通过配置文件直接配置. MVC的本质即是将业务数据的抽取和 ...

  6. magento 调整产品详细页自定义选项或配置项的位置

    默认位置如下图,感觉不美观 调整后,如下图 打开后台产品页,找到Design下的Display product options in属性,可以看到两个选项:Product Info Column和Bl ...

  7. 计蒜客 30990.An Olympian Math Problem-数学公式题 (ACM-ICPC 2018 南京赛区网络预赛 A)

    A. An Olympian Math Problem 54.28% 1000ms 65536K   Alice, a student of grade 66, is thinking about a ...

  8. Codeforces 801 A.Vicious Keyboard & Jxnu Group Programming Ladder Tournament 2017江西师大新生赛 L1-2.叶神的字符串

    A. Vicious Keyboard time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. opencv图像的旋转

    #include"stdafx.h"#include"opencv2/opencv.hpp" using namespace cv;// clockwise 为 ...

  10. hihocoder1069 最近公共祖先·三(tarjin算法)(并查集)

    #1069 : 最近公共祖先·三 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上上回说到,小Hi和小Ho使用了Tarjan算法来优化了他们的“最近公共祖先”网站,但是 ...