VUE第七天学习

内容：歌曲播放页面、搜索页面、stylus、vuex 一、歌曲播放页 1.获取歌曲播放地址 https://music.163.com/song/media/outer/url?id=歌曲编号.mp3 2.获取歌曲信息 接口地址： http://localhost:3000/song/detail?ids=歌曲编号 二、搜索页 接口地址： 1.热搜词 http://localhost:3000/search/hot 2.搜索 http://localhost:3000/search 必选参数：keywords 要搜索的关键 可选参数：limit 返回结果的条数 三、项目打包 npm run build 四、stylus 富于表现力、动态的、健壮的 CSS 冒号可有可无 分号可有可无 逗号可有可无 括号可有可无 变量 插值（Interpolation） 混合（Mixin） 数学计算 强制类型转换 动态引入 条件表达式 迭代 嵌套选择器 父级引用 Variable function calls 词法作用域 内置函数（超过 60 个） 语法内函数（In-language functions） 压缩可选 图像内联可选 Stylus 可执行程序 健壮的错误报告 单行和多行注释 CSS 字面量 字符转义 TextMate 捆绑 1.安装 npm install stylus stylus-loader --save 2.使用 (1)基本使用 .mask width 100vw height 100vh background-color rgba(0,0,0,0.5) .content width 400px height 300px background-color #fff transform translateY(50%) border-radius 20px .form-container margin-top 50px text-align center 注意：要依靠缩进来控制元素层级 (2)定义外部styl文件来预设样式 我们可以项目中用到的颜色、尺寸、表格、表单等样式预先设置好，在组件中引入设置好的文件即可使用stylus，达到样式预处理的作用。 五、vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 仓库 ​ state、mutations、getters、actions、module 1.安装 ​ npm install vuex --save 2.引用 import Vuex from 'vuex' Vue.use(Vuex) const store = Vuex.Store({ }) 3.核心概念 (1)state ​ 类似单页面data ​ Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。 (2)mutations ​ 类似单页面methods ​ 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数 mutation 同步操作 (3)actions Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 (4)getters 类似computed 有时候我们需要从 store 中的 state 中派生出一些状态 示例代码 /src/main.js来定义仓库 import Vuex from 'vuex' Vue.use(Vuex) //创建仓库 const store = new Vuex.Store({ state:{ msg:'hello vuex', count:5 }, mutations:{ setMsg(state,txt){ state.msg = txt }, setCount(state){ state.count+=2 } }, actions:{ setCount(context){ console.log('actions被执行了') context.commit('setCount') } }, getters:{ newCount:state=>{ return state.count*3 } } }); 在页面组件中使用/改变仓库中的数据：

本文章由javascript技术分享原创和收集