Vue 框架 笔记

1、兼容

2、性能优化

 

vuejs

******作者：尤雨溪

***

*******MVVM框架：

M：model层 数据层 数据的增删改查

V：view视图层 类似于html的模板

vm:viewmodel映射层 model层与view层之间的一个映射层(嫁接的桥梁)

 

 

*******特点：

数据驱动视图

 

再也不会去操作DOM来改变view层的变化

 

操作DOM元素是非常耗费性能的

 

渐进式的JavaSrcipt框架

vuejs只会包含核心语法如果需要其他模块的时候需要单独的安装

在vue当中我们可以直接访问data中的属性

 

 

*******v-text:

底层原理主要应用了在数据解析这块 innerText

 

v-text:

值可以写任何js表达式

 

 

v-text:简写 {{}}

 

 

*******{{}}在页面第一次加载的时候会显示{{}}

var vm = new Vue({

//挂载点 vue作用的范围只会在id为app的这个元素内部

el:"#app",//document.querySelector()

//定义当前组件所需要的一些状态 定义当前vue所需要的一些属性

data:{

message:"1824"

}

})

console.log(vm)

*******v-html 解析html innerHTML

 

一般情况下不会使用

*******v-show：显示隐藏 非权限

 

底层是操控元素的display属性

 

 

*******v-if:显示隐藏 设计到权限

底层是操控元素的创建和销毁

 

进行多个选择的处理

 

后台管理系统

用户会员级别

登陆与非登陆

 

 

选项卡

组件切换

动画

*******v-for:数据的遍历

*******v-on：进行事件的绑定 :冒号后面是事件的名称

值为事件的函数

 

v-on:事件名称 = 事件函数

 

 

简写：

@事件名称

 

 

指令后面用.链接的属性叫做修饰符

 

 

 

stop:阻止事件冒泡

prevent:阻止浏览器默认事件

once:事件只触发一次

enter:回车

 

 

 

如果需要使用事件对象则需要传递一个$event

cv

********v-bind：绑定属性 简写 ：属性 语法v-bind:属性 =值

title class idd alt style src href

v-model:可以用来实现双数据绑定

 

v-model这个指令只能给表单进行使用

v-model是根据表单的value值来去改变data中属性的值

 

作用:如果表单上面加了v-model那么data中与表单绑定的那个属性就会随着表单的改变而改变