Vue基础学习

了解一下vue框架,主要是为了了解前端是如何接收后端的数据的.因此只是粗浅地了解该框架

vue简介:
1.vue是一个javaScript框架
2.简化Dom操作
3.响应式数据驱动
官方文档:https://cn.vuejs.org

Vue实例的作用范围:
Vue会管理el选项命中的元素及其内部的后代元素

Vue可以使用其他选择器,但是建议使用ID选择器

Vue可以使用其他的双标签,但是不能使用HTML和BODY

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时,遵守js的语法即可

v-on指令的作用:为元素绑定事件,事件名不需要写on,指令可以简写成@
绑定的方法定义在methods属性中.事件绑定的方法写成函数调用的形式,可以传入自定义参数
定义方法时需要定义形参来接收传入的实参.事件的后面跟上.修饰符可以对事件进行限制

v-if指令:根据表达式的真假切换元素的显示状态,本质是通过操作dom元素来切换显示状态

v-bind指令为元素绑定属性.简写可只保留:属性名

v-for指令作用是根据数据生成列表结构,经常结合数组使用,语法是(item,index) in 数据.
item和index可以结合其他指令一起使用,数组长度的更新会同步到页面上,是响应式的

v-model指令作用是便捷地设置和获取表单元素的值,绑定的数据回合表单元素的值相关联,并且是双向的

更新

网络应用:

与axios结合

axios:功能强大的网络请求库,<script src:"https://unpkg.com/axios/dist/axios.min.js"></script>
axios必须先导入才可以使用,使用get或post方法即可发送对应的请求,then方法中的回调函数会在请求成功或失败时触发,通过回调函数的形参可以获取响应内容或错误信息
axios.get(地址?key=value&...).then(function(response){},function(err){})
axios.post(地址,{key:value,..}.).then(function(response){},function(err){})