随笔分类 - vue.js
摘要：1、VueComponent.prototype.__proto__ Vue.prototype 2、让组件实例对象（vc）可以访问到Vue原型上的属性、方法 图片如下： 案例： Vue.prototype.x=99 const vm = new Vue({ el:"#root", data:{ m
阅读全文
摘要：Vue中使用组件的三大步骤： 1、定义组件（创建） 2、注册组件 3、使用组件（写组件标签） 一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options 和 new Vue(options)时传入的options几乎一样，但也有点区别 区别如下： （1）el不要写，为
阅读全文
摘要：Vue生命周期图： 一、生命周期图的解读 new Vue（）:首先需要创建一个 Vue的实例对象 Init Events & Lifecycle :初始化：生命周期、事件（如：v-once）,但数据代理还未开始（vm._data还未创建） 1、第一对：beforeCreate() 和 create(
阅读全文
摘要：一、定义语法： （1）局部指令： new Vue({directives:{指令名：配置对象}}) 或 new Vue({directives:{指令名：回调函数}}) （2）全局指令： Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数) 二、配置对象
阅读全文
摘要：v-once指令： 1、v-once 所在节点在初始化动态渲染后，就视为静态内容了 2、以后数据的改变不会引起v-once所在结构的更新，可用于优化性能 v-pre指令： 1、跳过其所在节点的编译过程 2、可利用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译 v-once案例： <hea
阅读全文
摘要：v-cloak指令： 1、本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉 v-cloak属性 2、使用 CSS配合v-cloak可以解决网速慢时，页面展示出{{XXX}}模板的问题 案例: 1、可能会出问题的写法： html: <h2 > {{name}} </h2> 调用网络上的Vue
阅读全文
摘要：v-html指令总结： 1、作用：向指定节点中渲染包含html结构的内容 2、与插值语法的区别： （1）v-html 会替换掉节点中所有的内容，{{}}则不会 （2）v-html 可以识别html 结构 3、特别注意： （1）在网站上动态动态渲染任意HTML是非常危险的，容易导致XSS攻击 （2）一
阅读全文
摘要：Vue 过滤器总结： 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理） 语法： 1、注册过滤器： Vue.filter(name,callback) 或 new Vue{filters:{}} 2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx
阅读全文
摘要：From案例分析： 1、Html 部分： <form @submit.prevent="" style=" border: 1px solid rgb(109, 200, 253);background-color: aliceblue;padding:8px;margin:8px; width:3
阅读全文
摘要：一、Vue 更改数组中的值，页面不刷新问题 data{ hobby:["打游戏"，“想静静”，“发呆”] } 1、错误写法（页面不刷新）： this.hobby[0]="学习"； 2、正确写法（页面刷新）： （1）方法1，调用列表操作函数更新数组数据 ： this.hobby.splice(0,1,
阅读全文
摘要：总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state commit: 同步操作 存储 this.$store.commit('changeValue',name) 取值 this.$store.state.changeValew dispatch: 异步操作存储
阅读全文
摘要：1、在components目录下新建一个组件 如Test.vue 2、在router目录下的index.js文件中为Test.vue组件配置路由（import导入组件，配置访问路径和定位组件位置） 3、在其他组件中引用该组件 4、效果展示（点击测试页链接后）
阅读全文
摘要：组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 案例： 使用到的vue名词：v-for,component,template,pr
阅读全文
摘要：官网：https://cn.vuejs.org/v2/guide/components-slots.html 理解this.$emit自定义事件分发 案例 功能：使用嵌套插槽，并在子插槽中调用主页面函数，对元素进行删除 <!DOCTYPE html> <html lang="en"> <head>
阅读全文
摘要：天气查询接口： 请求路径：http://wthrcdn.etouch.cn/weather_mini 请求方法：get 请求参数：city（查询的城市名） 响应内容：天气信息 功能： 点击“北京”、“上海”、“上海”、“深圳”按钮可查询对应城市的5天天气 输入城市名，回车或点击“搜索”按钮 也可查询
阅读全文
摘要：axios回调函数中的this已经改变，无法返回到data中数据 把this保存起来，回调函数中直接使用保存的this即可 this是指当前位置的上下文 结果截图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
阅读全文
摘要：Axios:前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以并不具备通信能力。 此时，就需要额外使用一个通信框架与服务器交互，相当于jQuery提供的ajax通信。 首先导包：<script src="https://unpkg.com/axios/dist/axios.min.js"
阅读全文
摘要：小码记事本 案例，知识巩固 功能：添加笔记、删除笔记、清空笔记、统计笔记 用到的vue语法：v-on、v-for、v-model、v-text 效果图： html代码： 1 <!-- 主体区域 --> 2 <section id="todoapp" class=""> 3 <!-- 输入框 -->
阅读全文
摘要：列表数据使用数组保存 v-bind指令可以设置元素属性，比如src v-show和v-if都可以切换元素的显示状态，频繁切换用v-show html代码： js代码： css代码： 结果图：
阅读全文
摘要：创建vue示例时：el（挂载点），data（数据），methods（方法） v-on指令的作用是绑定事件，简称为@ 方法中通过this,关键字获取data中的数据 v-text指令的作用是：设置元素的文本值，简写为{{}} html代码： css代码： js代码： 结果：
阅读全文
