vue(一)

1.VUE基础
1.javascript框架
2.简化Dom操作
3.响应式数据驱动
1.1 el:挂载点
el:作用:用于设置Vue挂载的实例
Vue实例的作用范围是什么?
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器?
可以使用其他的选择器,但是建议使用ID选择器
是否可以设置其他的dom元素呢?
可以使用其他的双标签,不能使用HTML和BODY
1.2 data:数据对象
Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时,遵守js的语法即可
2. 本地应用
2.1 v-text
设置标签的文本值
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
内部支持写表达式
2.2 v-html
设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本
2.3 v-on基础
为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在method属性中
方法内部通过this关键字可以访问定义在data中的数据
2.4 v-show
根据表达式的真假,切换元素的显示和隐藏
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新
2.5 v-if
根据表达式的真假,切换元素的显示与隐藏(操纵dom元素)
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中删除
频繁的切换使用v-show,反之使用v-if,前者切换消耗小
2.6 v-bind
设置元素的属性(比如:src,title,class)
完整写法是 v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名
如果设置的是class,使用对象的方式会更好
2.7 v-for
根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index)in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式
2.8 v-on补充
传递自定义参数,事件修饰符
事件绑定的方法写成函数调用的形式,可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上修饰符可以对事件进行限制
事件修饰符有多种
2.9 v-model
获取和设置表单元素的值(双向数据绑定)
绑定的数据会和表单元素值相关联
绑定的数据和表单元素的值是双向绑定的
3 网络应用
Vue结合网络数据开发应用
3.1 axios
功能强大的网络请求库
axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败的时候触发
通过回调函数的形参可以获取响应内容,或错误信息
3.2 axios+vue
axios回调函数中的this已经改变,无法访问到data中的数据
把this保存起来,回调函数中直接使用保存的this即可
和本地应用最大的区别就是改变了数据来源

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值