Vue学习基础知识点记录（零散）

记录vue中的常用知识点,才疏学浅，只是为了方便自己回忆- -

vue进行交互

引入: vue-resouce

    get:
        获取一个普通文本数据:
        this.$http.get('aa.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);
        });
    post:
        this.$http.post('post.php',{
            a:1,
            b:20
        },{
            emulateJSON:true
        }).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
    jsonp:
        https://sug.so.360.cn/suggest?callback=suggest_so&word=a

        https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

        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);
        });

vue循环

取出索引值index

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

取出key值和索引值index

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

vue事件

@click = "show($event)" // 事件对象
@click.stop   // 阻止事件冒泡
@contextmenu.prevent // 右键点击事件（并阻止右键点击默认行为）
@keyup.13 // 回车
@keyup.enter // 回车
// 上下左右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down

vue属性

html

<div :class="[class1]">测试</div>
<div :class="[ isShow===true ? class1 : class2 ]">test</div>

js

new Vue({
    el: '#element',
    data: {
        isShow: true,
        class1: red,
        class2: blue
    },
    methods: {

    },
})

css

.red{
   color: red;
}
 .blue{
     background: blue;
 }

vue模板

new Vue({
    el: '#box',
    data: '<span>test</span>'
})

{{msg}}  // <span>test</span> 数据更新模板变化
{{*msg}}  // <span>test</span> 初始化后数据只绑定一次，之后不随msg变化而变化
{{{msg}}} // test  html转义输出

vue过滤器

{{ 'WELCOME' | lowercase | capitalize }} // Welcome
{{ 12 | currency '¥' }} // ¥12

缩略图显示的自定义filter(代码有误，只是思路)

new Vue({
    el: '#box',
    data: {
     src:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
    },
    methods: {},
    filter: {
       avatar: function(src){
            if(src.indexOf('http')!=-1){
            //    从服务器下载的图片只显示缩略图
            var web_avatar = src + ''; // 缩略图
                return web_avatar;
            }else{
                return src;        
        }
        }
    }
})