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(请求成功的函数,请求失败的函数)
)
