网站建设工作的函,网站开发中常见的注册界面,济宁网站运营策略,wordpress更改发布的文章Vue指令—通过vue实现常见的网页效果 1、内容绑定#xff0c;事件绑定 #xff08;1#xff09;v-text设置标签的文本值/内容#xff08;textContent#xff09; 默认写法会替换全部内容#xff0c;使用差值表达式可以替换指定内容#xff0c;内部支持表达式。可简写为{…Vue指令—通过vue实现常见的网页效果 1、内容绑定事件绑定 1v-text设置标签的文本值/内容textContent 默认写法会替换全部内容使用差值表达式可以替换指定内容内部支持表达式。可简写为{{}} 2v-html设置标签的innerHTML 若是普通文本和v-text没有什么差异若是html结构v-html可以被解析为标签去渲染v-text不行无论内容是什么只会被解析为文本。 3v-on为元素绑定事件v-on:事件名”方法名” 或者简写为 事件名”方法名” 点击click移入monseenter、双击dbclick不需要写on了,绑定的方法写在定义的vue的实例的methods属性中。在方法中拿到dom中的数据需要通过关键字this 方法内部通过this关键字可以访问定义在data中的数据。
2、显示切换、属性绑定 1v-show根据表达值的真假切换元素的显示状态显示和隐藏 原理是修改元素的display样式但标签一直都在实现显示隐藏。 指令后面的内容最终都会解析为布尔值 true显示元素,false元素隐藏同时display值会被修改 2v-if根据表达值的真假切换元素的显示和隐藏改变的不是样式而是直接操纵dom元素移除或添加 表达式的值为true,元素存在于dom树中为false从dom树中移除 3v-bind:设置元素的属性(如src, title, class),为元素绑定属性 完整语法v-bind属性名表达式简写属性名表达式 需要动态的增删class建议使用对象的方式 案列图片切换 定义图片数组、添加图片索引、 图片的更改本质是图片的src属性被更改了v-bind 图片切换逻辑改变索引 事件绑定v-on 第一张和最后一张需要隐藏某个a标签v-show显示状态切换 总结列表数据使用数组保存 v-bind指定可以设置元素属性比如src v-show和v-if都可以切换元素的显示状态频繁切换用v-show 3、列表循环、表单元素绑定 (1)v-for根据数据生成列表结构响应式 数组经常和v-for结合使用 语法是(item,index) in 数据 item代表每一项数据,index代表索引 数组长度的更新会同步到页面上是响应式的 2v-on补充传递自定义参数事件修饰符 事件修饰符https://cn.vuejs.org/v2/api/#v-on 事件绑定的方法写成函数调用的形式可以传入自定义参数 定义方法时需要定义形参来接收传入的实参 事件的后面跟上.修饰符可以对事件进行限制 .enter可以限制除法的按键为回车 事件修饰符有多种 3v-model 作用是便捷的获取和设置表单元素如文本框input的值双向数据绑定 绑定的数据会和表单元素值相关联 绑定的数据和表单元素值是双向绑定的无论修改谁另外一个都会同步更新
网络应用 Vue结合网络数据开发应用
1axios网络请求库内部是ajax 功能强大的网络请求库 Get请求 axios.get(地址?查询字符串).then(function(response){},function(err){}) 响应成功调用第一个回调函数失败第二个 查询字符串格式keyvaluekey2value2 Post请求 axios.post(地址,参数对象).then(function(response){},function(err){}) 数据以对象的形式写在第二个参数内 参数对象格式{ keyvaluekey2value2} 可以访问的请求接口要保证联网状态 2axiosvue Axios回调函数中的this已经改变无法访问到data中的数据 解决办法把this保存起来回调函数中直接使用保存的this去获取即可 和本地应该最大的区别就是改变了数据来源
总结axios必须先导入才可以使用使用get或post方法即可发送对应的请求then方法中的回调函数会在请求成功或者失败时触发通过回调函数的形参可以获取响应内容或错误信息。 Axios官方文档传送门https://github.com/axios/axios
