摘要：
1).使用命令创建Vue项目 命令：vue create my-project 选择Manually select features(选择特性以创建项目) 勾选特性可以用空格进行勾选。 是否选用历史模式的路由：n ESLint选择：ESLint + Standard config 何时进行ESLin 阅读全文
posted @ 2022-02-11 16:25
Harry宗
阅读(3319)
评论(0)
推荐(0)
摘要：
A.安装babel 打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill B.创 阅读全文
posted @ 2022-02-11 16:21
Harry宗
阅读(416)
评论(1)
推荐(0)
摘要：
阅读全文
posted @ 2022-02-11 16:00
Harry宗
阅读(34)
评论(0)
推荐(0)
摘要：
var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过name属性为路由添加一个别名 { path: "/user/:id", component: User, name:"user"}, ] }) //添加了别名之后，可以使用别名 阅读全文
posted @ 2022-02-11 15:57
Harry宗
阅读(60)
评论(0)
推荐(0)
摘要：
var User = { template: "<div>This is User</div>" } //Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符 var Login = { template: `<div> <h1>This is Login</h1> <hr> <ro 阅读全文
posted @ 2022-02-11 15:53
Harry宗
阅读(61)
评论(0)
推荐(0)
摘要：
A.导入js文件<script src="lib/vue_2.5.22.js"></script><script src="lib/vue-router_3.0.2.js"></script> B.添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为 阅读全文
posted @ 2022-02-11 15:19
Harry宗
阅读(134)
评论(0)
推荐(0)
摘要：
前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）核心实现依靠一个事件，即监听hash值变化的事件 window.onhashchange = function(){ //location.hash可以获取到最新的ha 阅读全文
posted @ 2022-02-11 15:15
Harry宗
阅读(48)
评论(0)
推荐(0)
摘要：
async 和 await async作为一个关键字放到函数前面 任何一个async函数都会隐式返回一个promise await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象 await函数不能单独使用 async/await 让异步代码看 阅读全文
posted @ 2022-02-11 15:06
Harry宗
阅读(65)
评论(0)
推荐(0)
摘要：
axios基础用法 get和 delete请求传递参数 通过传统的url 以 ? 的形式传递参数 restful 形式传递参数 通过params 形式传递参数 post 和 put 请求传递参数 通过选项传递参数 通过 URLSearchParams 传递参数 axios 全局配置 # 配置公共的请 阅读全文
posted @ 2022-02-11 15:05
Harry宗
阅读(108)
评论(0)
推荐(0)
摘要：
promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容易 <script type="text/javascript"> /* 1. Promise基本使用 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个 阅读全文
posted @ 2022-02-11 14:55
Harry宗
阅读(31)
评论(0)
推荐(0)
摘要：
<div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <alert-box></alert-box 阅读全文
posted @ 2022-02-11 14:47
Harry宗
阅读(78)
评论(0)
推荐(0)
摘要：
父组件向子组件传值 父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性props接收 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div> <!--1、menu-item 在 AP 阅读全文
posted @ 2022-02-11 11:41
Harry宗
阅读(153)
评论(0)
推荐(0)
摘要：
<div id="app"> <my-component></my-component> </div> <script> // 定义组件的模板 var Child = { template: '<div>A custom component!</div>' } new Vue({ //局部注册组件 阅读全文
posted @ 2022-02-11 11:32
Harry宗
阅读(109)
评论(0)
推荐(0)
摘要：
组件注册 全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象 全局组件注册后，任何vue实例都可以用 <div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component> 阅读全文
posted @ 2022-02-11 11:30
Harry宗
阅读(324)
评论(0)
推荐(0)
摘要：
动态数组响应式数据 Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来 a是要更改的数据 、 b是数据的第几项、 c是更改后的数据 阅读全文
posted @ 2022-02-11 11:26
Harry宗
阅读(75)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2022-02-11 11:21
Harry宗
阅读(33)
评论(0)
推荐(0)
摘要：
Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和v-bind表达式。 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示 支持级联操作 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本 全局注册时是filte 阅读全文
posted @ 2022-02-11 11:15
Harry宗
阅读(44)
评论(0)
推荐(0)
摘要：
使用watch来响应数据的变化 一般用于异步或者开销较大的操作 watch 中的属性 一定是data 中 已经存在的数据 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听 <div id="a 阅读全文
posted @ 2022-02-11 11:10
Harry宗
阅读(54)
评论(0)
推荐(0)
摘要：
模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁 计算属性是基于它们的响应式依赖进行缓存的 computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 <div id="app"> <!-- 阅读全文
posted @ 2022-02-11 11:05
Harry宗
阅读(76)
评论(0)
推荐(0)
摘要：
局部指令，需要定义在 directives 的选项 用法和全局用法一样 局部指令只能在当前组件里面使用 当全局指令和局部指令同名时以局部指令为准 <input type="text" v-color='msg'> <input type="text" v-focus> <script type="t 阅读全文
posted @ 2022-02-11 11:01
Harry宗
阅读(113)
评论(0)
推荐(0)
摘要：
<!-- 使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 --> <input type="text" v-focus> <script> // 注意点： // 1、 在自定义指令中 如果以驼峰命名的方式定义 如 Vue.direct 阅读全文
posted @ 2022-02-11 11:00
Harry宗
阅读(297)
评论(0)
推荐(0)
摘要：
表单修饰符 .number 转换为数值 注意点： 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。 .trim 自动过滤用户输入的首尾空白字符 只能去掉首尾的 不能去除中间的空格 .lazy 将input事件切换成 阅读全文
posted @ 2022-02-11 10:55
Harry宗
阅读(89)
评论(0)
推荐(0)
摘要：
<ul id="example-1"> <!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> <li v-for="item in items"> {{ item.message }} </li> </ul> <scrip 阅读全文
posted @ 2022-02-11 10:53
Harry宗
阅读(58)
评论(0)
推荐(0)
摘要：
绑定style <div v-bind:style="styleObject">绑定样式对象</div>' <!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) --> <div v-bind:style="{ color: act 阅读全文
posted @ 2022-02-11 10:48
Harry宗
阅读(64)
评论(0)
推荐(0)
摘要：
v-bind v-bind 指令被用来响应地更新 HTML 属性 v-bind:href 可以缩写为 :href; <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> 绑定对象 我们可以给v-bi 阅读全文
posted @ 2022-02-11 10:35
Harry宗
阅读(340)
评论(0)
推荐(0)
摘要：
v-on事件函数中传入参数 <body> <div id="app"> <div>{{num}}</div> <div> <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 --> <button v-on:click='handle1'>点击1</button> < 阅读全文
posted @ 2022-02-11 10:29
Harry宗
阅读(43)
评论(0)
推荐(0)
浙公网安备 33010602011771号