Vue前端基础入门

10月24日 收藏 0 评论 0 前端开发

Vue前端基础入门

转载声明:文章来源:https://blog.csdn.net/qq_52475404/article/details/122440353

Vue简介:1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动

第一个Vue程序
1.导入开发版本的Vue.js
2.创建Vue实例对象,设置el属性和data属性
3.使用简洁的模板语法把数据渲染到页面上

el:挂载点:是用来设置Vue实例挂载(管理)的元素

<div id = "app">
{{message}}
</div>

var app = new Vue({
el:"#app",
data:{
message:"牛奶小柒"
}
})

①Vue会管理el选项命中元素及其内部的后代元素
②可以使用其他的选择器,但是建议使用ID选择器
③可以使用其他的双标签,不能使用HTML和BODY

data:数据对象

Vue中用到的数据定义在data中.
data中可以写复杂类型的数据.
渲染复杂类型数据时,遵守js的语法即可.
本地应用:
①v-text:设置标签的文本值
②v-html:设置标签的innerHTML,标签解析
③v-on:为元素绑定事件 v-on:click=@click
④计数器
⑤v-show:根据表达值的真假切换元素的显示和隐藏
   原理:修改元素的display,实现显示隐藏
⑥v-if:根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)
⑦v-bind:设置元素的属性(比如src,title,class)
⑧图片切换:1.列表数据使用数组保存 2.v-blind指令可以设置元素属性,比如src 3.v-show和v-if都可以切换元素的显示状态,频繁切换用v-show
⑨v-for:根据数据生成列表结构
⑩v-on补充:传递自定义参数,事件修饰符 v-model指令:1.v-model指令的作用是便捷的设置和获取表单元素的值 2.绑定的数据会和表单元素值相关联 3.绑定的数据<–>表单元素的值

网络应用:
Vue结合网络数据开发应用

axios:网络请求库

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容或错误信息
axios+Vue

axios回调函数中的this已经改变,无法访问到data中的数据
把this保存起来,回调函数中直接使用保存的this即可

C 0条回复 评论

帖子还没人回复快来抢沙发