11 2021 档案
摘要：#侦听属性: watch 当属性变化时, 回调函数自动调用, 在函数内部进行计算 监视的属性必须存在,才能进监视 ####监视的两种写法: new Vue时传入watch配置 watch:{ isHot:{ immediate:true,//初始化时，让handler调用一下 deep:true,/
阅读全文
摘要：路由的基本使用 注意事项 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹 通过切换，"隐藏"了路由的组件，默认是被销毁的，需要的时候再去挂载 每个组件都有自己的$route属性，里面存储着自己的路由信息 整个应用只有一个router，可以通过组件的$router属性
阅读全文
摘要：Vuex状态管理 快速上手 进入项目，在命令行中输入安装指令，回车: npm install vuex --save 然后配置 vuex，使其工作起来：在src路径下创建store文件夹，然后创建index.js文件，文件内容如下: import Vue from 'vue'; import Vue
阅读全文
摘要：小的配置项 ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上，获取的是真实的DOM元素，应用在组件标签上是组件实例对象(vc) <h1 ref="xxx"> ... </h1> # 或者 <School/ ref="xxx"> # 获取: this.$refs.xx
阅读全文
摘要：循环遍历 当我们有一组数据需 要进行渲染时,我们就可以使用v-for来完成。 v-for的语法类似于JavaScript中的for循环。 格式如下: item in items的形式。 <div id="app"> <!-- 1.在遍历的过程中，没有使用索引值（下标值） --> <ul> <li v
阅读全文
摘要：表单绑定 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交,需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定。 <body> <div id="app"> <input type="text" v-model="massage"> {{massage}} </
阅读全文
摘要：计算属性 什么是计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。 <div id="app"> <h2>{{firstNam
阅读全文
摘要：事件监听 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 获取到浏览器参数的event对象: $event <div id="app"> <h2>{{counter}}</h2> <button v-on:click="increment">+</butt
阅读全文
摘要：条件判断 v-if的原理： v-if后面的条件为false时,对应的元素以及其子元素不会渲染。 也就是根本没有不会有对应的标签出现在DOM中。 <div id="app"> <h2 v-if="score>90">优秀</h2> <h2 v-else-if="score>80">良好</h2> <h
阅读全文
摘要：基本语法 Mustache语法 <div id="app"> <h2>{{massage}}</h2> <h2>{{firstName+lastName}}</h2> <h2>{{firstName+' '+lastName}}</h2> <h2>{{counter*2}}</h2> </div>
阅读全文
摘要：绑定属性 v-bind v-bind用于绑定一个或多个属性值,或者向另-一个组件传递props值 <div id="app"> <!-- <img src="{{imgURL}}" alt=""> --> <!-- 错误的用法:这里不可以使用mustache语法--> <!-- 正确用法：使用v-b
阅读全文
摘要：MVVM 模式 MVVM 源自于经典的 Model–View–Controller（MVC）模式（期间还演化出了 Model-View-Presenter（MVP）模式，可忽略不计）。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 View
阅读全文
摘要：生命周期 什么是生命周期: 从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ 生命周期钩子 = 生命周期函数 = 生命周期事件 主要的生命周期函数分类： 创建期间的生命周期函数： beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 dat
阅读全文
摘要：组件三大属性 state 理解 state 是组件对象最重要的属性,值是一个对象(可以包含多组 key-value) 组件被称为"状态机",通过更新组件的 state 来更新对应的页面(重新渲染组件) 强烈注意 组件render()中的 this 是组件实例对象 组件中自定义方法中的this为 un
阅读全文
摘要：受控组件与柯里化写法 理解 React 以setState()的方式控制表单取值与元素输入就叫做“受控组件”。 编码示例 例如，如果我们想让一个示例在提交时打印出名称，我们可以将表单写为受控组件： class Demo extends React.Component { //初始化状态 state
阅读全文
摘要：函数组件与 class 组件 函数组件 //创建函数式组件 function Mycomponent() { console.log(this); //此处的 this 为 undefined,因为Babel编译后开启了严格模式 return <div>我是用 函数组件 创建的组件,适用于简单场景<
阅读全文
浙公网安备 33010602011771号