#学志#vue入门02

[2017.03.17]

#事件#

事件简写：v-on:可以写成@；比如点击事件--@click；

事件对象：$event，比如点击出现--@click="show($event)"；

事件冒泡：父元素也有事件时，子元素的事件操作会导致父元素的事件被操作，需要进行的就时阻止冒泡，用到事件对象的cancelBubble属性，e.cancelBubble=true;（---简写@click.stop;）在需要进行操作的元素的事件上取消冒泡行为；

默认行为（默认事件）：比如右击时又出现提示列表，在点击时想要阻止这种默认行为就可以通过事件对象的preventDefault()属性，e.preventDefault();（右击：@contextmenu），@contextmenu="show($event)"，简写@contextmenu.prevent；

键盘事件：

@keydown="show"，特殊按键时需要用到事件对象，e.keyCode（回车：13）；

常用按键：回车，上，下，左，右 -- 简写：@keydown.13（按回车）/@keydown.enter，@keydown.up，@keydown.left....；

#属性#

v-bind:绑定属性，不需要为数据添加{{}}；

id="{{id}}"---效果是有的，但是一定程度上会有点报错；

使用v-bind:id="id"，简写 :id=""；

class和style：:class，:style；

数组：:class="[data]"，可以添加多个数据；

json：:class="{此时里面放置的是属性}"，如:class="{red:true}"--执行这个属性，true/false也能是数据；

当然数组和json都可以是数据；

:style 后面放的需要是json（在json里命名：驼峰命名法，所以复合属性要变成驼峰）；

#模板#

数据是双向绑定的，一次更新；

解除数据绑定v-once:数据只在初始的时候绑定一次

<input type="text" v-model="msg">
<br>
{{msg}}
<br>
<div v-once>{{msg}}</div>

效果：

html转译输出：

<div v-html="msg"></div>

效果：

#过滤器#

过滤模板数据

|uppercase：变大写；-->Vue2是怎么样的？？

#交互#

需要引入vue-resource；

<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>

get，post，jsonp；

get获取文本数据：

get:function(){
this.$http.get('vue.txt).then(response => {
    // get body data
    alert(response.body);
  }, response => {
    // error callback
});

给服务器发送数据：其中包括参数传递

<?php
$a = $_POST["param"];
echo $a;
?>

this.$http.post('vue.php',

{param:'45'}

,{emulateJSON:true}).

then(response => {
    alert(response.body);
  });

jsonp:

调用百度接口；

this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
      {//请求参数
        params: {
          wd:'a'
        },
        jsonp:'cb' //callback名称，默认是callback，因为百度用的是cb所以要把名字改成cb
      }).then(function(res){
        alert(JSON.parse(res.bodyText).s)
        // this.myData = JSON.parse(res.bodyText).s
        // console.log(this.myData)
      },function(){
        //console.log(1)
      });