1.什么是MVVM
MVVM, 是Model-View-ViewModel(数据(图片数组)-前端的html-前端框架(vue框架))的简写, 它是将View的状态行为化和抽象化.
ViewModel的 作用是将用户界面视图UI与业务逻辑分开, 它可以取出Model数据的同时帮忙处理View中需要展示的内容的业务逻辑分析
MVVM采用双向数据绑定,view中数据变化将自动反映到viewmodel上,反之,model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。
MVVM核心思想,是关注model的变化,让MVVM框架利用自己的机制自动更新DOM,也就是所谓的数据-视图分离,数据不会影响视图。
2.Vue
什么是Vue.js: Vue是一套用于构建用户界面的渐进式框架,是前端的主流框架之一, 它对js语法做了大量的封装,是的语法更加简洁,功能更加强大
3.第一个Vue程序
1.导入Vue,js 2.创建Vue实例对象,设置el属性和data属性 3.使用更加简洁的语法把数据加到对应的页面上
<div id="a1">
{{message}}<!-- 插值表达式 不允许写其他语句,例如流程语句,控制变量,表达式最终需要返回一个结果显示 -->
<p>
{{message}} <!-- 变量,来自于data里面定义的变量-->
</p>
</div>
<script type="text/javascript">
/* 创建一个vue对象,使得此对象与id=a1的div进行绑定 */
var a = new Vue({
el:'#a1',//将指定的标签与vue对象绑定在一起
data:{//就是定义数据,vue对象实现双向绑定
message:'HelloVue!'
}
})
</script>
4.Vue指令
Vue提供的一些属性
v-text: 设置标签的文本内容, 使用插值表达式来替换指定内容
v-html: 设置元素的innerHTML,内容中有html标签会被解析为标签
v-on: 为元素绑定事件,事件名不需要写成v-on ,只需简写为@
v-model: 设置和获取表单元素的值,绑定的数据会和表单元素的值相关联
<input type="text" v-model="message"/>
<p>{{message}}</p>
data:{
message:""
}
v-show: 切换元素的显示状态, 原理是修改元素的display,从而实现元素的隐藏的和显示,
指令后的内容会解析成布尔值,值为true元素显示,false隐藏元素
<body>
<div id="a1">
<p v-show="isShow">aaaaaaa</p>
</div>
<script type="text/javascript">
var a1 = new Vue({
el:'#a1',
data:{
isShow:false,
num:10
}
})
</script>
</body>
v-if: 根据表达式的真假切换元素的显示状态, 其本质是对通过操纵dom元素来切换,
不一样的是它是通过从dom对象中移除
v-for: 根据数据生成列表结构, 数组会常与v-for结合
<body>
<div id="a1">
<table>
<tr v-for="a in user">
<td>{{a.name}}</td>
<td>{{a.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var a1 = new Vue({
el:'#a1',
data:{
user:[{name:"张三",age:20},{name:"李四",age:30}]
}
})
</script>
</body>
v-bind: 为元素绑定属性, 为标签的属性动态赋值, 完整写法是v-bind,简写为 : 属性名
<div id="a1">
<img v-bind:src="array[index]" />
<img :src="array[index]" />
<input type="button" value="下一张" @click="text()" />
</div>
<script type="text/javascript">
var a1 = new Vue({
el:'#a1',
data:{
array:["img/1.jpg","img/2.jpg"],
index:0
},
methods:{
text(){
this.index++;
}
}
})
</script>
5.Vue实例生命周期
生命周期: 一个vue组件从创建到销毁的整个过程.
实例生命周期函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
在特定的时间进行特定的操作
创建前的四个阶段:
初始化阶段:beforeCreate(),此时无法通过vm访问到data中的数据,methods中的方法。
created(),此时可以通过vm访问到data中的数据,methods中的方法。
挂载阶段:beforeMount()此时,页面呈现的是未经vue编译的dom结构,所有对dom的操作,最终都不奏效。
mounted(),此时,页面中呈现的是经过vue编译的dom,对dom的操作均有效,至此初始化过程结束,一般再次进行,开启定时器,发生网络请求,绑定自定义事件等初始化操作。
更新阶段:beforeUpdate()此时,数据是更新的,但是页面是旧的,页面和数据还未同步。
updated(),此时, 数据和页面都是更新的,数据和页面是同步的。
销毁阶段:beforeDestroy(),此时vm中所有的:data,methods,指令等待,都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器,解绑自定义事件等。
destroyed(),实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。