Vue相关知识总结

Vue简介

Vue是js的一个库,类似于JQuery

Vue当前版本已经发展到2.X版本,并且现在市面上基本使用的都是2.X版本.

现在一些知名的互联网公司,例如滴滴,美团等,都在大量的使用vue

本段内容主要讲解Vue的基本知识和指令,了解vue的基本概念

注意: Vue 不支持 IE8 及以下版本

vue中文官网https://cn.vuejs.org/

Vue的使用

直接用 script 引入

<script src="Vue.js"></script>

下载地址

开发版本：https://vuejs.org/js/vue.js 包含完整的警告和调试模式

生产版本：https://vuejs.org/js/vue.min.js 删除了警告

创建第一个Vue实例

<div id="root"></div>

var vm = new Vue({ 
    // 绑定DOM元素,指定控制范围 接管页面当中的指定元素
    el:"#root",
    // 设置控制的数据
    data:{
        msg:"你好",
    }
})

在使用vue时会发现我们没有任何DOM的操作,都是对数据的操作

挂载点,模板和Vue实例之间的关系

挂载点:  <div id="root"></div> vue实例的挂载点 
         vue只会处理挂载点里面的内容 
模板:    挂载点里面的内容我们称之为模板内容
         可以将模板写到vue的实例当中 通过template属性
实例:new Vue({})

实例当中只需要指定挂载点,
vue会自动的结合模板和数据,生成要展示的内容
最后将内容放到挂载点当中

模板语法和指令

数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值：
<span>{{ msg }}</span>

data属性里可以存放数字 字符串 数组 对象

文本指令

v-text="变量名"   只能操作字符串 不能解析标签
v-html="变量名"   可以解析标签   用于输出html代码

属性操作

v-bind: 属性操作

<img v-bind="filename" alt="">
data:{
    filename:"图片路径"
}

class类名操作：

1.数组语法
<div v-bind:class="[activeclass]"></div>
data:{
    activeclass:active
}
2.对象语法
<div v-bind:class="{active:isActive}"></div>
data:{
    isActive:true
}
<div v-bind:class="obj"></div>
data:{
    obj:{
        active:true
    }
}

内联样式绑定：

v-style:         :style
                 :style={color:c,backgroundColor:d} 设置单个
        注意:双拼词将-去掉第二个单词首字母大写
                 :style="obj"

表单值的操作 实现数据双向绑定

v-model

循环

v-for="value in arr"
v-for="(val,key) in object"

事件

v-on:click="函数名"

简写:@click="函数名"
mouseover
mouseout
mousedown


// 在vue实例中添加methods属性
methods:{
    show:function(){
        // alert('1')
    }
}

事件修饰符
.stop 阻止冒泡
.prevent 阻止默认行为

显示隐藏

v-show="true/false"

条件

v-if
v-else
v-else-if

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

Vue中的计算属性和侦听器

// 计算属性
computed:{
    fullname:{
        return 变量1+变量2
    }
}
// 侦听属性
watch:{
    // 监听 fullname 如果fullname的值发生变化就会执行侦听
    fullname:function(){

    }
}

Vue-ajax

vue本身没有ajax的方法，要使用vue实现ajax 我们需要借助插件  可以使用jquery 也可以使用 vue-resource  等

vue-resource的使用
1.引入插件
2.this.$http.post(请求路径).then(请求成功的函数,请求失败的函数)