VUE学习笔记

Published by taoacat on

一、入门

  1. vue只能兼容到IE9
  2. 虚拟DOM,MVVM模式
  3. 引入方式,直接向jquery一样用script标签添加
  4. 数据绑定
  5. 指令系统 v-
  6. 组件系统

二、VUE实例

  1. 创建一个Vue实例
var vm=new Vue({
//选项
})

new Vue({
    el:"#app",
    data:{
        mes:"hellow Vue.js"
    },
    created:funstion()
    {
        console.log("实例钩子函数,被创建的时候执行");
    }

})
  1. 数据绑定两种方法
//1.大括号Mustache语法
<p>{{mes}}</p>

//2.采用v-html
<p v-html="mes"></P>

3.vue mustache支持表达式

{{number=1}}
{{OK?'yes':'no'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id"></div>

4.Vue的指令
指令都以v-为前缀

<p v-if="seen">now you see me</p>

<a v-bind:href="url"></a>

<a v-on:click="doSomething">

5.修饰符

//指令后加“.”加修饰符,下语句表示v-on事件之后调用
event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>

6.过滤器
过滤器可以用在mustache插值和v-bind表达式

{{message|capitalize}}

<div v-bind:id="rawId|formatId"></div>

    new Vue({
    //...
    filter:{
    capitalize:function(value){
                if(!value)
                return ""
            value=value.toString()
            return value.charAt(0).toUpperCase()+value.slice(1);
        }
    }
})

过滤器可以串联

{{message|filterA|filterB}}

过滤器可以是函数

{{message|filterA('arg1',arg2)}}

6.缩写

//v-bind 缩写
<a v-bind:href="url"></a>
<a :href="url"></a>
//v-on 缩写
<a v-on:click="doSomething"></a>
<a @click='doSomethis'></a>

7.计算属性

<div id="example">
<p>{{message}}</p>
<p>{{reversedMessage}}</p>
</div>

var vm=new Vue({
    el:"#example",
    data:{
        message:'hello'
    },
//计算属性
    computed:{
        reversedMessage:function(){
            return this.message.split('').reverse().join('');
        }
}
})

//也可以采用methods实现计算

<p>{{reversedMessage()}}</p>

methods:{
    receversedMessage:function(){
        reutrn this.message.split("").reverse().join('');
    }
}
//计算属性与methods,计算属性会将计算值缓存下来,而methods每次渲染都会重新计算。

<p>{{fallname}}</P>

new Vue({
    el:"#app",
    data:{
    fistName:'Foo',
    lastName:"bel",
}
computed:{
    fullname:{
        get:function(){
        return this.fistName+this.lastName;
    }
    set:function(newValue){
        this.name=newValue;
    }
    }
}
})

8.观察watchers属性

var watchers=new Vue({
    el:"#watch-example",
    data:{
        question:"",
        answer:"I cannot..."
    },
    watch:{
        question:function(newQuestion){
            //console.log(this.question);
            //this.answer="waiting for...";
            //this.answer=this.question;
            //this.getAnster();
            this.getAnstermy();
        }
    },
    methods:{
    getAnster: _.debounce(
    function(){
        var vm=this;
        if(this.question.indexOf('?')===-1){
                vm.answer="11111";
                return;
        }
        vm.answer="Thinking...";
        axios.get('https://yesno.wtf/api').then(
                function(response){
                        vm.answer= _.capitalize(response.data.answer)
                }).catch(function(error){
                vm.answer="error could not reach the API:"+error;
        })
    },500
    ),
    getAnstermy: _.debounce(
    function(){
        this.answer=this.question;
    }
    ,1)
    }
});
9.class与style绑定
<div v-bind:class="{active:isActive}"></div>

10.条件渲染
<div id="vif">
<h1 v-if="ok">yes</h1>
<h1 v-else>no</h1>
</div>

//条件判断
var vif = new Vue({
    el: "#vif",
    data: {
        ok: true
    }
});
11.v-show
var vshow=new Vue({
    el:"#vshow",
    data:{
    ok:0,
    }
})

<div id="vshow" v-show="ok">vshow_is_ok</div>
12.列表渲染
<ul id="vfor">
<li v-for="a in as">
{{a.mes}}
</li>
</ul>

var vfor = new Vue({
    el: "#vfor",
    data: {
        as: [
        {mes: 1},
        {mes: 2},
        {mes: 3}
        ]
    }
});

//还可以
<li v-for=“{item,index} in items>
{{parentmessage}}-{{index}}-{{item.message}}

也可以采用==of==代替==in==

13.事件处理器
v-on

//事件修饰符
/***阻止事件冒泡****/
.stop
/****阻止默认事件****/
.prevent
<!--添加事件时采用事件捕获模式-->
.capture
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
.self
<!-- 点击事件将只会触发一次 -->
.once

//按键事件修饰器

14.表单空间绑定
v-model
15.组件
//全局注册
Vue.component(tagName,options);

Vue.coponent('my-component',{
//
})

//局部注册
new Vue({
//...
    components:{
        'my-component':Child
    }
})

// is属性

解决浏览器不支持promise的Bug
  1. 安装 babel-polyfill 。 babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法
npm install --save babel-polyfill
  1. 在webpack.config.js文件中,使用
module.exports = {
    entry: {
        app: ["babel-polyfill", "./src/main.js"]
    }
};

在线资源整理

1.VUE2.0 route 中文文档
2.vue组件之prop[转]
3.vscode 插件推荐 – 献给所有前端工程师
4.vue.js的devtools安装
5.一起玩转Vue-resource
6.VUE表单验证插件Vee-validate example
7.Axios 中文说明
8.VUE-日期选择插件 vue-calendr
9.VUE 高德地图插件 vue-amap
10.移动端最好用的的筛选器组件 better-picker
Categories: 学习

发表评论

电子邮件地址不会被公开。