了解一下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){})