Vue学习

一、前言

1. 要使用vue，首先引入vue.js，去网上下载并引用或直接cdn引用，使用需要new一个Vue实例或者使用组件模板，vue：html+json
2. vue中的el作为选择器，其他有data和methods等，{{msg}}获取数据

二、表单内容

用 v-model获取数据

<input type="text" v-model="msg"/>

三、循环

arr数组获取value和key：

<ul>
    <li v-for="(item,index) in arr">{{item}} {{index}}</li>
</ul>

json数据一样

<ul>
    <li v-for="(item,index) in json">{{item}} {{index}}</li>
</ul>

四、事件

1. @+事件名

Vue实例中methods中加入方法
script:

methods:{
    show:function(){
        alert(1);
        alert(this);//this为new出的实例对象
        }
}

html:

<input type="button" value="按钮" @click="show()">

显示和隐藏：v-show
阻止冒泡：@click.stop=”fun()”
阻止默认事件：@contextmenu.prevent=”fun()”
常用键盘事件(eg:)：@keyup.enter=”fun()”(回车)
@keyup.left=”fun()”(左)
@keyup.right=”fun()”(右)
@keyup.up=”fun()”(上)
@keyup.down=”fun()”(下)
事件传入对象：fun($event)

2. 绑定属性

:src=”“、:width=””
class的三种用法：
1 :class=”[red]”,red是data中的数据
2 :class=”[red,b,c,d]”
3 json方式
:class={red:true，blue:true}，或者将true和false换成数据
或者直接将json作为数据，:class=”json”
style的写法
:style=”[c,d]”,c和d是json数据，复合样式采用驼峰表示法，如backgroundColor

3. 模板

{{msg}} 数据更新模板变化

<span v-once>{{msg}}</span> //尖括号中写v-once,数据更新模板不变
<span v-html="msg"></span> //使用v-html，可以进行html转义

4. 过滤器

{{‘welcome’|uppercase}}、{{‘welcome’|lowercase}}、{{‘welcome’|capitalize}}
过滤器格式：{{msg|filterA|filterB}}——多过滤器，中间加竖杆

5. $http请求数据

需要引用vue-resource.js
方法有this.$http.get() / post() / jsonp()

this.$http({
    url:'',
    data:''
    method:get/post/jsonp
    jsonp:'cb'   //使用jsonp时需要
})

防止闪烁：防止页面加载慢出现大括号{{}}：
标签使用v-cloak 、v-text 、v-html：

[v-cloak] {
    display: none !important;
}

6. 计算属性

computed：{
    b:function(){
        return 值    //b是一个属性
    }
}

7. vue实例

• vm.$el 获取元素
• vm.$data 获取实例中的data
• vm.$mount 手动挂载vue，即挂载实例中的选择器
• vm.$options 获取自定义属性