Xherlock - Vue
type: channel
link: http://xherlock.top/index.php/category/Vue/
items: Vue（三）
items: Vue（二）
items: Vue（一）

Vue（三）
type: item
date: 2022-03-29T21:56:00+08:00
description: Vue（三）本地应用记事本具有添加、删除、统计、清空、隐藏的功能 Vue 记事本 {{ index+1 }}. {{ item }} X {{ list.length }} items left Clear 网络应用网络请求库：axiosaxios的基本使用 axios必须先导入才可以使用使用get或post方法即可发送对应的请求then方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取相应内容，或错误信息axios+vueaxios结合vue开发网络应用随机获取一条笑话 {{ joke }} 天知道——应用 搜索 北京 上海 成都 郑州 {{ item.type }} {{ item.low }} ~ {{ item.high }} {{ item.date }} 应用的逻辑代码建议和页面分离，使用单独的js文件编写axios回调函数中this指向改变，需要额外保存一份服务器返回的数据比较复杂需要注意层级结构自定义参数可以让代码的复用性更高methods中定义的方法内部，可以通过this关键字点出其他的方法综合应用音乐播放器歌曲搜索searchMusic:function(){ var that = this; axios.get("https://autumnfish.cn/search?keywords="+this.query) .then(function(response){ // console.log(response.data.result.songs); that.musicList = response.data.result.songs; },function(err){}) },播放歌曲playMusic:function(musicId){ // console.log(musicId); var that = this; axios.get("https://autumnfish.cn/song/url?id="+musicId) .then(function(response){ // console.log(response); that.musicUrl = response.data.data[0].url; },function(err){}) }

Vue（二）
type: item
date: 2022-03-23T21:59:00+08:00
description: Vue（二）本地应用v-if根据表达式真假，切换元素的显示和隐藏（操纵dom元素） Xherlock v-if指令作用是：根据表达式的真假切换元素的显示状态本质是通过操纵dom元素来切换显示状态表达式的值为true，元素存在于dom树中；为false，从dom树中移除频繁的切换v-show，反之使用v-if，前者的切换消耗少v-bind设置元素的属性（eg：src、title、class） v-bind指令的作用是：为元素绑定属性完整写法v-bind:属性名简写可省略v-bind需要动态的增删class建议使用对象的方式图片切换简单轮播效果 Vue Xherlock v-for根据数据生成列表结构 {{ index+1 }} : Xherlock~{{item}} {{ item.name }} v-for指令的作用是：根据数据生成列表数组经常和v-for结合使用语法(item,index) in 数据item和index可以结合其他指令一起使用v-on补充传递自定义参数，事件修饰符 v-model获取和设置表单元素的值（双向数据绑定） {{message}} v-model指令的作用是便捷的设置和获取表单元素的值绑定的数据会和表单元素值相关联绑定的数据$\longleftrightarrow$表单元素的值

Vue（一）
type: item
date: 2022-03-22T20:26:00+08:00
description: Vue（一）Vue基础简介JavaScript框架简化Dom操作响应式数据驱动第一个Vue程序 Vue {{ message }} 步骤导入开发版本的Vue.js创建Vue实例对象，设置el属性和data属性使用简介的模板语法把数据渲染到页面上el：挂载点Vue实例作用范围：管理el选项命中的元素及其内部的后代元素id: el:"#app" class: el:".app"建议使用id选择器vue不能挂载到html、body标签上data数据对象 Vue {{ info.message }} by {{ info.author }} from {{ loc[0] }} Vue中用到的数据定义在data中data中可以写复杂类型的数据渲染复杂类型数据时遵守js语法即可本地应用v-text设置标签的文本值（textContent），差值表达式：{{}}eg： ，想要加入其他字符在双引号中+'xxx'单引号包含要加的内容 Vue v-html设置标签的innerHTMLeg： v-on为元素绑定事件eg： methods:{ // 不要少了s doIt:function(){ // 逻辑 } } 事件名不需要写on指令可以简写为@绑定的方法定义在methods属性中方法内部通过this关键字可以访问定义在data中的数据计数器 Vue - {{num}} + v-show根据表达值的真假，切换元素的显示与隐藏eg： ，不显示图片 原理是修改元素的display，实现显示和隐藏指令后面的内容，最终都会解析成布尔值值为true元素显示，false元素隐藏数据改变之后，对应元素的显示状态会同步更新