vue概念及基础
正在上传…重新上传取消。
·
- vue
- 特点
- 渐进式javas框架
- 优点
- 中文文档，生态丰富（插件多），上手简单
- 指令，组件，虚拟化dom
- 导入与实例化
- 模板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
<title>第一个vue程序</title>
</head>
<body>
<div id="app"> {{msg}} </div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",//指定vue的模板css选择器
data:{msg:"hello Vue!"}// 指定data数据 })
</script>
</body>
</html>
- 模板
- 指令与模板
- 特点
- 指令就是v开头的特殊属性 它的值预期为JavaScript单行表达式
- 可以渲染实例的值
v-text=‘msg’
- 数学运算
v-text=‘2+3’
- 使用js表达式
v-text=‘msg.lenght’
- 如果是文本需要加‘’
v-text="'你,'+msg"
- 特点
- vue的实例
- var vm=new Vue（{}）
- vm就是new Vue创建的实例
- 文本渲染指令
- {{}}
- v-text
文本渲染指令
- v-html
html文本渲染指令
- 条件渲染指令
- v-if
以dom方式隐藏
少量切换使用
- v-else
- v-show
- v-show
以css方式隐藏
频繁切换使用
- v-if
- 遍历指令
- v-for
- 字符串，数字，列表，对象 进行遍历
- <p v-for="(item,index) in list">{{index+1}}--{{item}}</p>
item 遍历的元素 （自定义名称）
index遍历的下标（键名）
list 被遍历的数据
- v-bind:key
- 值必须唯一
- vue在渲染列表的时候更加优化
- v-for
- 属性绑定
- v-bind:title=“”
- :class :id :disabled
- :title=""
- 事件
- v-on:click=“”
@click=“”
- 事件的参数
- @click="a"
默认传入事件对象
@click="a(3)"传入实参3
@click="a($event 3)"
传入事件对象，和参数3
- @click="a"
- 事件修饰符
- once
只执行一次
- stop
阻止事件冒泡
- prevent
阻止默认事件
- once
- 系统修饰符
ctrl
shift
......
- 鼠标修饰符
left
right
middle
......
- v-on:click=“”
- 表单
- v-model=“num”
将num数据和表单绑定
- 单行 多行
- 多选
- 选中true 未选择false
- 多个值，绑定的数组动态添加/移除当前元素的value
- 单选
- 下拉selsct
- 表单修饰符
- lazy
change事件触发数据更新
- number
强制转换为数字
- lazy
- v-model='num'
简写- :value='num'
- @input='num=$event.target.value'
- v-model=“num”
- vue操作
- 让指令联接数据与dom
- 业务操作数据，实现自动更新dom
- class
- 文本
:class='active'
没有加单引号的active是一个变量不是字符串
- 对象
:class='{'active':flag}'
- 数组
：class='list'
- 文本
- style
- :style="{color:'red',fontSize:'32px'}"
- vue选项
- el 模板
- data 数据
- methods 方法
- directives 指令
-
- filters 过滤
-
- watch 监听
- 监听数据的变化执行回调函数
watch:{
'obj':{
handler(nval){
}
depp:true
}
}
- computed 计算
- 从现有数据计算出新的数据（只读）
computed:{
'total':function(){
return XXX
}
}
- props 属性
- created 创建完毕
- componets 组件
- 作用
- 组件是vue的一个重要的特点
- 实现多人协作开发
- 通过组件划分降低开发难度
- 实现复用，降低重复劳动
- 组件解释
- 组件就是定义好的一功能模块
建议多用props，少在组件中用打他（降低组件的耦合性）
- 组件就是定义好的一功能模块
- 定义与使用
- 定义
注意：template有且只有一个根节点
const steper={
template:`<span></span>`
}
- 在父组件中注册
components：{steper:steper}
- 在组件的模板中使用
<steper></steper>
- 定义
- 传参
- 父传子
- 子传父
- 子
this.$emit('update:visible',false)
- 父
监听事件，修改值
<modal @update:visible='visible=$event'>
- 子
- 父传子
- 插槽
- 插槽：组件的嵌套内容
- 父
<moeal>
<input/>
<button>确定</button>
- 作用
- 动画
- 两个状态形成过渡
- 进入 离开
v-show v-if
- transition
单个动画- 属性
- name 名称
- enter-active-class="" 指定进入class
- leave-active-class=“” 指定离开class
- 产生状态与类
- v-enter-active
进入整个状态- v-enter
进入开始状态
- v-enter-to
进入结束状态
- v-enter
- v-enter-active
- 属性
- 回顾
- 数组
- indexOf()
查找对应下标
- 删除
- shift
前 删除
- pop
后 删除
- splice
中间 删除
- shift
- 添加
- unshift
前
- push
后
- splice
- unshift
- 翻转
revese
- 转字符串
join（）
- 连接数组
concatenate（）
- 高阶
- filter 过滤
- forEach 遍历
- map 映射
- reduce 累计
- some 有一个
- every 每一个
- find 查找符合条件的元素
- findindex 查找符合条件的元素下标
- sort 排序
- indexOf()
- 字符串
- indexOf lastindexOf
查询 字符串下标，无返回-1
- split('')
分割为数组
- slice(a,b)
切割字符
- subString（a,b）
截取字符串（按下标）
- subStr（a,b）
截取字符串（按长度）
- indexOf lastindexOf
- json
- eval()
把字符串当作js执行
- JSON.parse(str)
json字符串转换为js对象
- JSON.stringify(obj)
把js对象转化为json字符串
- eval()
- 本地存储
localStorage- getItem(key)
获取
- setItem(key,value)
存储
- removeItem(key)
删除
- clear()
清空
- getItem(key)
- 数组
- 生命周期
- 概念
- 组件/vue在创建到销毁会经历一系列特殊过程，称为生命周期
- 在过程中执行的回调函数 称为生命周期钩子函数
- 作用
- 可以让我们在恰当的时期，做一些自动操作
网络请求数据
监听dom事件
执行定时器
清除定时器
解除监听
- 可以让我们在恰当的时期，做一些自动操作
-
- before
- create创建
- mount 挂载
- update更新
- destroy销毁
- 创建前后
- beforeCreate
- 特点：有this 没有data 没有$el
- created
- 特点：有data 没有$el
- 作用：
ajax请求
本地数据读取
window事件监听
定时器开启
- beforeCreate
- 挂载前后
- beforeMount
- 特点：有$el 没有渲染
- mounted
- 特点：页面有渲染
- 作用：
可以和created重复
可以操作dom
- beforeMount
- 更新前后
- beforeUpdate
- 特点：数据已更新，没有渲染
- updated
- 特点：数据更新 dom已渲染
- beforeUpdate
- 销毁前后
- beforeDestroy
- 特点：有this ，能方法实例的data
- 作用：
移除事件监听
清除定时器
- destroyed
- 特点：切断组件与dom的联系
- beforeDestroy
- 全局方法/属性
- $el组件/vue的dom节点
- $destroy()销毁当前组件/vue的方法
- $nextTick(callback)
数据更新，等待dom更新后执行callback回调函数
- $set()
- $rsfs
- $mount()手动挂载el
- 概念
- 特点
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)