菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 康利20221215Vue02 [打印本页]

作者: 智商不在服务区 时间: 2023-1-5 19:00
标题: 康利20221215Vue02
一、学习内容：
什么是vue：
是一套用于构建用户界面的渐进式javascript框架
什么是渐进式框架
可以和传统的网站开发融合在一起，例如可以简单的把他当做一个类似于jq的库来使用
也可以使用vue全家桶框架来开发大型的大页面应用程序
使用原因：
体积小，编码简单，运行效率高
无dom操作，提高开发效率
事件对象的固定写法$event
事件修饰符
.stop  阻止冒泡
.once  只执行一次
.self只有自己是事件源的时候才触发
.capture  事件捕获
prevent  阻止默认行为
按键修饰符
监听键盘
@事件.keycode=function
class  绑定
动态绑定class
方式1
：class=“键名”
键名是变量
方式2
对象
：class={类名：boolean ,类名2：boolean}
数组
：class=[]加引号是字符串不加引号是变量
控制style
：style
v-bind：style{“”：“”}
或者小驼峰
多个之间放在数组总
分支语句
v-if
v-else-if
v-else
分支语句之间不能有其他的标签
v-for=“()参数 in 字符，数组，对象”
（item，index）  值索引
类名必须是存在的
对象的参数是三个  value  key  index
前端框架分类
angular
react
vue
使用过的库
jq，swiper，echarts
核心思想
组件化和数据驱动
es模块化
为什么需要组件化
相同代码的冗余，维护性差
核心：
将页面ui进行从上而下的拆分
把通用的可复用的功能封装到一个组件中  比如轮播图导航栏
MVVM模型
model ----view ---viewmodel
new Vue({
el:"选择器"，
data:{
键1：值1，
键2：值2，
键3：值3
}
});
{{键}}
v-text="键"
插值语法{{属性名}}
什么是指令
vue的模板语法
本质是自定义属性
格式：v-text,v-html ,
v-text ="xxxxxx"
将值赋值给
覆盖原有的内容只显示我自己的值
v-html 可以解析标签
覆盖原有内容
v-model  表单元素里面使用双向绑定
获得text的值  v-model=“键名”
获得的radio的值 value=“”  v-model=“data属性”
获得select的值 value=“”  在select  写v-model=“data属性值”
获得checkbox的值  每一个里面都要写属性值需要用数组接收
textarea  和input一样
v-once只变更一次  在赋值以后不在改变
标签属性 v-once 值在标签里
v-bind
给标签绑定属性，单向绑定属性
v-bind:属性名=“”
:属性名=“” v-bind的简写
v-on  绑定事件
v-on：事件名=回调函数
@事件名称=回调函数
data和methods  里面的键名不能重复
所有的数据使用都要在选定的区域内
如果methods 里面需要用到data 的属性值  需要加this.键名

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)