Vue2
一套前端框架,用于免除原生js中的DOM操作,简化书写
基于MVVM思想,实现数据的双向绑定.
双向绑定:当数据模型数据发生变化时,页面展示的内容也会随之发生改变,如果表单数据发生变化,绑定的模型数据也随之发生变化.
MVVM思想
view-viewmodel-model
view:视图,即页面标签
viewmodel:vue
model:数据
VUE快速入门
引入vue.js文件
<script src="js/vue.js"></script>
在js代码区域,创建Vue核心对象,进行数据绑定
new Vue({
el:"#app",
data: {
return {
username:""
}
}
});
对vue对象传递一个js对象,对象中需要如下属性
el:指定哪些标签受Vue管理
值中的选择器选中需要受管理的标签
data:用来定义数据模型
methods:用来定义函数
<div id="app">
<input name = "username" v-model = :"username">
{{username}}
//Vue中定义的插值表达式,在里面写数据模型,到时候会将该模型的数据值展示在这个位置
//绑定后v-model的值会和username的值双向绑定,一起变化
</div>
常用指令
v-bind
//为HTML绑定属性值,设置href,css样式等
v-model
//在表单元素上创建双向数据绑定
v-on
//为HTML标签绑定事件
v-if
//条件性的渲染,判定为true时渲染
v-else-if
v-else
//条件性的渲染,判定为true时渲染
v-show
//根据条件展示某元素,区别在于切换display属性的值
v-for
//列表渲染,遍历容器元素或者对象属性
v-bind
模型数据发生变化,标签属性值随之变化
<a v-bind:href="url">
//可以简化成:即
<a :href="url">
new Vue({
el:""
url=""
})
v-model
<input name="username" v-model="username">
new Vue({
el:""
username=""
})
v-on
<input type="button" value="" v-on:click="">
//可以简化成
<input type="button" value="" @:click="">
new Vue({
el:""
data:{}
methods:{
on:function(){
alert()
}
}
//自定义函数
mounted(){
}//钩子函数
})
v-if
<span v-if="">
<span v-else-if="">
<span v-else="">
//判断条件渲染对应元素
//不满足条件的元素不存在于页面中
v-show
<span v-show="">
<span v-show="">
<span v-show="">
//判断条件渲染对应元素
//不满足条件的元素存在于页面中,但被隐藏
v-for
<span v-for="(item,index) in items">
item:元素
index:索引
items:容器=data中写的元素容器
Vue生命周期
共八个,每次触发生命周期事件会自动执行一个钩子方法
beforeCreate
//创建前
created
//创建后
beforeMount
//载入前
mounted(重点)
在这个阶段向后端发起异步请求,请求后端响应的数据
//挂载完成
beforeUpdate
//更新前
updated
//更新后
beforeDestroyed
//销毁前
destroyed
//销毁后
