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

标题: 程灿---20221214--vue第一天 [打印本页]

作者: Cc7507    时间: 2023-1-7 09:25
标题: 程灿---20221214--vue第一天
什么是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/) Powered by Discuz! X3.4