Vue 渐进式js框架
Vue.js的核心是利用vue的简洁模板语法来声明式的将数据渲染进dom/html页面的结构中 来展示数据
编译过程： vue→框架→js代码
优点：
- 易用：熟悉HTML、css、javascript可以快速上手
- 灵活：可简单到库 复杂到框架 伸缩自如 支持简单到复杂的项目进行开发
- 高效：20kb运行大小 超快虚拟DOM
缺点： 首次加载慢 单页应用程序不利于搜索引擎搜索
解决： 服务器渲染
vue中的this指向： 一般是指向new出来的vue实例对象 所以data中的数据才可以用this来拿到
vue基本使用
<!-- body中的标签 -->
<body>
<div id="app">
<!-- 利用差值表达将传入的数据插入页面中 -->
<div>
{{mas}} <!-- 此处显示的就是srcipt标签中mas数值 -->
</div>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 在js中的使用
var vm = new Vue({
el:'元素挂载位置' // 类选择器.或者是id #选择器或者是标签名
data:{
mas：'传入的数据'
}, // data是一个对象
methods:{
// 点击事件中的函数存放点
xxx:function(){
this // 函数中的this 指向vue对象
}
}
})
// 在html中的使用
// 插值表达式:{{mas}} 支持表达式操作
// 差值表达式存在闪动问题 在代码未解析时会短暂的显示源代码 解决方法是在渲染的标签上添加指令 v-cloak = <div v-cloak> mas <div>
</script>
区别：比起之前模板多了事件绑定 ???
注意点：
vue中的js文件引入必须在js代码之前
vue中data的中设置指令并不会编译 因为不识别 只是一个存放数据的位置
插值表达式 {{mas}} ： 支持表达式操作 差值表达式存在闪动问题 在代码未解析时会短暂的显示源代码
MVVM设计思想：√
-
m 模型：数据层 = vue中的data 存放数据的地方
-
v 视图：网页页面 = vue中的html标签结构 和数据是完全分离的
-
vm 视图模型 ：逻辑处理 让以上两种建立起一种联系关系
*所谓的数据驱动视图：
以往都是视图上的界面被用户改变 数据随着改变 数据改变后再驱动视图改变
然而mvvm设计思想通过将数据和视图分离 再次通过视图模型将两者绑定到一起 进行双向绑定 数据发生改变 视图会立即变化 省去了第一步的视图改变数据
数据响应式
数据驱动视图 根据数据来驱动视图
- 如何理解响应式
- html5中的响应式（屏幕尺寸的变化导致样式的变化）
- 数据的响应式（数据的变化导致页面内容的变化）
- 数据绑定
- 数据绑定：将数据填充到标签中
- v-once 只编译一次
- 显示内容之后不再具有响应式功能
mvvm框架中的核心语法
Object.defineProperty(obj, prop, descriptor)：
obj：定义的对象
prop：要定义或修改的属性的名称。
descriptor：将被定义或修改的属性描述符。
返回值：返回被添加属性的对象
是js的一个方法 可以精确添加或修改对象的属性
指令
概念：指令本质就是自定义属性 以 v-名称 来定义指令 写在标签上
数据绑定语法：<div v-xxx></div> // 指令加在有需求的标签内
事件绑定语法：<button @click='handle'>计算</button>
事件修饰符语法：<button @click.stop='handle01'>点击1</button>
数据绑定指令
- *v-text：填充纯文本
- 比插值表达式更简洁 本身自带解决闪动
- 不识别html 类似于innerhtml 能进行字符串拼接
- *v-html：填充html文本
- 存在安全问题 跨站脚本攻击
- 本服务器内部数据可用 第三方数不可用
- 本身自带解决闪动 识别html标签
- v-pre：填充原始信息
- 跳过编译过程 显示原始代码 加快渲染提高速度
- 一些静态的内容不需要编译加这个指令可以加快渲染
- v-once：只编译一次显示信息 后续不在修改
- 减少了后台的监听 提高程序性能
*双向数据绑定 v-model
- v-model 双向数据绑定
- 页面数据变化 数据也跟着变化 相反 数据变化发生变化 绑定的此属性的页面标签中的内容也会变化
- 和data中的数据进行绑定
- v-model是一个指令，限制在
<input>、<select>、<textarea>、components中使用
<div id="app">
<input v-model="mas">
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app // 类选择器.或者是id #选择器或者是标签名
data:{
mas：''
} // data是一个对象
})
</script>
*** 双向数据绑定的原理 : ** 通过数据劫持和发布订阅模式方式实现的，核心的 API 是通过Object.defineProperty()来劫持各个属性的setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调
事件绑定 @
- 事件绑定 v-on:click=’’
- 简写：@click = ''
- 事件绑定this指向实例对象
<div id="app">
<buttn @click="getLst()">点击获取</buttn>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app // 类选择器.或者是id #选择器或者是标签名
data:{
mas：''
}, // data是一个对象me
methods:{
// 点击事件中的函数存放点
getLst:function(){
this // 函数中的this 指向vue对象
}
}
})
</script>
事件绑定传入参数
- 事件中传递参数 *@click='函数名称($event)'
- 函数调用方式 传递参数在括号内
- 传递参数位置不固定 绑定函数调用
- 事件中传递参数 v-on:click=‘函数名称’
- 直接绑定函数名称不传参数 默认会将第一个事件对象当做参数传递 但是不推荐 一般都带个小括号
事件修饰符
- 语法：
@click.stop='函数名()' - 事件修饰符 阻止冒泡**
.stop** 阻止默认行为**.prevent** - 按钮修饰符 回车**
.enter** 删除**.delete** - 修饰符可以串联 比如
@click.stop.prevent既阻止冒泡 又阻止默认行为 - 修饰符需要注意 顺序关系
按键修饰符
-
语法：
@keyup.13='函数名()'13：键盘对应的ALLIS字符集 -
当触动键盘上的某个键 触发定义的函数
-
同时也可以串联
@keyup.13.enter当触动键盘上的13键和enter键时都可以触发这个函数 -
常用的按键修饰符
.enter => enter键 .tab => tab键 .delete (捕获“删除”和“退格”按键) => 删除键 .esc => 取消键 .space => 空格键 .up => 上 .down => 下 .left => 左 .right => 右
自定义修饰符 config.keyCodes
名字是自定义的 对应的值必须是按键对应event.keyCodes值
- 自定义按钮修饰符 定义全局变量存放keyCodes码 Vue.config.keyCodes.fl = 112
- 112=keycodes码 fl按钮名
v-bind :
-
绑定对象
:class名='{键值对数据}' -
绑定 v-bind:href= ‘data中的数据’
- href = 链接的意思
- v-bind：可以简写为 :
- 静态绑定 href=‘url’ url现在是字符串
-
动态绑定 :href=‘url’ 在动态绑定时需要体现字符串时加单引号
-
绑定类语法
-
对象语法
<div :class="{active: isActive,error: isError}"> //参数是以键值对形式存放 键是类名 值是布尔值 值存放在data中 -
数组语法
<div :class="[activeClass,errorClass]"> //直接存放了类名
-
注：class 和普通的class类名共存 能绑定表单元素属性 属性的值存放在data中
绑定对象和绑定数组的区别
- 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
- 绑定数组的时候数组里面存的是data 中的数据
绑定style
-
style样式处理
- 对象语法
<div :style="{color: activeColor,fontSize: fontSize,background:'red'}"> //属性名不是小驼峰的用引号包裹起来 // activeColor可以是字面量 也可以是data数据中的名称- 数组语法
<div :style="[styleObj1, styleObj2]"> // 数组存放的只是类名 数据存放在style中
分支结构
作用：
1- 多个元素 通过条件判断展示或者隐藏某个元素或者多个元素
2- 进行两个视图之间的切换
- v-if :
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
// 根据seen属性中的数值来确定是否显示标签
- v-else
- v-else-if
- v-show
√ 两者的区别 v-if v-show
- v-show本质就是标签display设置为none，控制隐藏
- v-show只编译一次，后面其实就是控制css显示和隐藏 并不会再次创建节点，而v-if不停的销毁和创建，故v-show性能更好一点。
- v-if是动态的向DOM树内添加或者删除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中不断的销毁和重建内部的事件监听和子组件 在频繁需要修改的情况下性能较差
if show使用场景：
如果存在频繁的显示隐藏 就使用show
如果编译完成 后续不再改动 就用if
循环结构
-
v-for:
// 数组语法： <div v-for= '自定义名称 in 循环的数组名'>{{自定义名称}}</div> <div v-for= '(自定义名称,index) in 循环的数组名'>{{自定义名称}} + {{index}}</div> // 数组具有索引号属性 index // 对象语法： <div v-for= '(自定义名称,key,index) in 循环的数组名'>{{自定义名称}} + {{index}}</div> -
key: 给每条数据设置一个唯一的表示 区分不同元素 提高性能
<div v-for= '(i,index)' key='index'>{{自定义名称}}</div> // 以上代码循环了一组数据 并给每条数据设置了单独的key -
保证在当前for循环内是唯一存在的数值 例: id
- 在使用for时 都加上key 以便于查找数据提高性能 表面看不出变化
- 不提供id属性时 可以使用索引 索引号也是唯一
-
v-if v-for结合使用
<div v-if='i==12' v-for= '(i,index) in 循环数据' :key='index'></div> // 当循环的数据等于12时停止循环 -
java script 代码
let app = new Vue({
el:'#app',
data: {
todos: [
{ text: '数据01'},
{ text: '数据01'},
{ text: '数据01'}
]
}
})
// html范围下的代码全部需要被名id=app的根元素包裹
案例
- 寻找重复的地方 提取数据到data
- 删除页面中的重复数据 利用循环 依次将数据循环到页面中
- 三元表达式 判断当前是否为默认页面
- 利用索引号来给vlue赋值
1035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
