4、VUE前后端交互
Ajax请求 参考：Ajax Promise 参考：Promise Axios 参考：Axios fetch 参考：fetch Async 参考：async 图书管理重构 展示列表 列表展示即后台请求数据，然后放到vue对象列表中。 请求数据使用axios进行请求，为了方便后续操作，先对axios对象设置基于地址与拦截器（直接返回相应内容）。 axios.defaults.baseURL = 'http://localhost:3000/'; axios.interceptors.response.use(function(res){ return res.data; }, function(error){ console.log(error) }); 接下来在全局对象中定义一个方法用于获取数据 methods: { queryData: async function(){ this.books = await axios.get('books'); } ...
5、VUE中的组件
组件 组件就是可复用的单元模块。 组件的data部分是一个函数，返回值是一个对象，在这个对象中传递要传递的值。 Vue.component('组件名称', {组件选项}) 组件名称遵循自定义组件命名规范：全小写、连字符（虽然驼峰式一般也没问题） 组件选项与 new Vue 选项配置基本一致（也有一些细节的不同） 全局组件通过Vue对象进行创建，局部组件通过在组件的内部属性components创建。 new Vue({ ..., components: { '组件名称': {组件选项} } }) data 在非 new Vue 的组件中，data 必须为函数，函数返回值必须是一个对象，作为组件的最终 data components: { 'xk-circle': { data() { return {pi: 3.14} }, } ...
3、VUE组件开发
组件注册 Vue.component(组件名称,{ data:组件数据, template:组件模板内容 }) 简单用法 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button @click="add">点击了{{count}}次</button>', methods: { add() { this.count++ } }, }) <div id="app"> <button-counter><button-counter> </div> 组件可以多次复用，并且每个组件之间互不影响 ...
2、VUE常用特性
表单操作 <body> <div id="app"> <form action="http://itcast.cn"> <div> <span>姓名：</span> <span> <input type="text" v-model="uname" /> </span> </div> <div> <span>性别：</span> <span> <input type="radio" id="male" value="1" v-model="gender" /> <label for="male">男</label> <input type="radio" id="female" value="2" v-model="gender" /> <labe ...
1、VUE模板语法
基本使用 使用Vue的步骤 需要提供标签用于填充数据 引入VUE.js文件 可以使用vue的语法做功能 把vue提供的数据填充到标签里 <body> <div id="app"> <!-- 插值表达式 可以做简单的运算 --> <h1>{{title}}</h1> </div> <script src="../js/vue.js"></script> <script> new Vue({ // 元素挂载的位置，可以是CSS选择器或者DOM元素 el: '#app', // 模型数据 data: { title: 'xiaokang' } }) </script> </body> 指 ...
4、VUE中的computed和watch
computed 在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况，vue 定义了一个专门用来处理这种派生数据的选项：computed <div id="app"> <label><input type="radio" v-model="gender" value="" /> 所有</label> <label><input type="radio" v-model="gender" value="男" /> 男</label> <label><input type="radio" v-model="gender" value="女" /> 女</label> <hr> <ul> <li v-for="user of showUsers"> {{user.username}} </li> </ul> </div> let app = n ...
3、VUE的事件
绑定事件 在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @ <组件 v-on:事件名称="表达式" /> <组件 @事件名称="表达式" /> 组件的 methods 选项 在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问 let app = new Vue({ el: '#app', methods: { fn() { console.log(123); } }, }); 通过内联方式绑定事件处理函数 直接调用函数，不传递参数 <button v-on:click="fn">开课吧</button> 此种情况在methods中接受的第一个参数为事件对象。 methods: { fn(e) { console.log(e); } & ...
开发中GIT的常用操作
配置 配置当前项目 git config user.name '你的名字' git config user.email '你的邮箱' 修改全局配置 git --global config user.name '你的名字' git --global config user.email '你的邮箱' 检查配置 # 打印所有config git config --list # 打印指定config git config user.name 仓库 初始化仓库 git init 添加工作区文件到暂存区 # 添加单个文件 git add 1.txt # 添加多个文件 git add 2.txt 3.txt # 添加整个目录 git add ./a # 添加多个目录 git add ./b ./c # 添加所有文件 git add . 创建版本 git commit -m 'xxx' 以上命令会直接添加本次提交的备注，一般用于改动不大的情况。 git commit 以上命令会调用出默认的编辑器去编辑信息。 修改默认的编辑器 以vacode为例（Windows）。首 ...
一、前端模块化
模块化是什么 所谓模块化，就是指根据功能的不同进行划分，每个功能就是一个模块。最终，一个完整的产品是由各个模块组合而成的 独立性。可以针对一个模块单独进行设计、研发，相对工作量和难度变小。 复用性。一些通用模块（例如登录或注册）可以被重复使用，而不用每次重新开发。 解耦性。模块与模块之间，将相互影响降到最低，使得更换、升级或添加某个模块，不影响其他模块的工作。 灵活性。通过选择和组合不同的模块，可以快速构建一个新的产品。 ES5中的模块化 函数的封装 每个函数的作用域仅在内部有效 函数作用域之间没有关系，低耦合 污染全局命名空间 对象封装 两个对象相互之间是独立的，低耦合 全局与用语中可以随意修改 自调函数 低耦合 在全局作用域中无法访问自调函数内部的函数或方法 自调函数配合全局对象 ES6中的模块化 当使用JavaScript文件当作是一个模块 当前JavaScript模块文件自动开启严格模式 使用export命令将当前模块内容导出 export导出 var v = 100; const c = 1000; function fn( ...
