vue零散知识总结
VUE实例中挂载vue文件的标签结构方式：
- 写法
- el:"#app"
- .$mount("#app")
- .mount("#app")
- 区别：没有实质性区别，el是直接挂载读取渲染，$mount是手动挂载
什么时候叫方法，什么时候叫函数
- 方法：在类里面一般叫方法，方法与实例对象挂钩
- 函数：function 函数名（）{} 一般直接写的叫函数
vue-cli中的代码规范
-
.editconfig文件中规定代码规范
[*.{js,jsx,ts,tsx,vue}] indent_style = space indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true
冷门指令
-
v-once 只执行一次
-
v-cloak（斗篷） 闪动效果
<div v-cloak> {{ message }} </div> <style> [v-cloak] { display: none; } </style> -
v-text 显示文本
-
v-pre 跳过编译直接显示原文本
-
label中的for=“id” 属性 for属性可以把label绑定到另外一个元素。form=""属性规定label字段所属的一个或多个表单
数据双向绑定的原理
-
v-model可以实现数据的双向绑定，双向绑定的原理是
<input type="text" v-model="message"> {{message}}-
v-bind绑定一个value属性
<input type="text" v-bind:value="message"> -
v-on指令给当前元素绑定input事件
<input type="text" v-bind:value="message" @input="message=$event.target.value">
-
ES6
-
作用域与闭包问题
- 变量作用域：变量在什么范围内是可用的
- var没有块级作用域，容易形成变量污染
- 块级作用域：函数，let
- 闭包：闭包可已解决问题是因为函数是一个作用域，在函数被调用的时候，变量就已经确定下来，任凭外面的变量如何更改，函数中的变量值是不会变的
- 常量含义指向对象不能修改，但可以改变对象内部的属性
-
对象的增强写法
//ES6写法 const name = "hsy" const age = 18 const height = 1.88 const obj={ name, age, height } -
函数的增强写法
// ES6写法 const obj = { run(){ }， eat(){ } } -
事件绑定参数传递问题
- @后可以是click也可以是keyup之类的事件指令
- 在事件定义时，写方法时省略了小括号，但是方法本身需要一个参数，这时候Vue会默认将浏览器产生的event事件对象作为参数传入到方法
- 手动获取浏览器参数的event对象：通过$event这个参数传入
-
事件修饰符
- .stop 阻止事件冒泡
- .prevent 阻止默认事件
- .native 监听组件根元素的原生事件
- .once 只触发一次回调
-
高阶函数的使用
- filter : 过滤 回到函数有一个要求：必须返回一个布尔值
- 返回为true时，函数内部会自动将这回调的n加入到数组中
- 返回为false时，函数内部会过滤掉这次的n
- map : 映射
- reduce ：对数组中所有值进行汇总累加
- filter : 过滤 回到函数有一个要求：必须返回一个布尔值
-
Promise对象
- 对象的状态不受外界影响。
- pending : 初始状态
- fulfilled ： 操作完成状态
- rejected ：操作失败
- 一旦状态改变就不会再变，任何时候都可以得到这个结果
- 有两个参数resolve,reject
- .then() 链式操作 第一个函数
- .catch()
<script> console.log(123) var myFirstPromise = new Promise(function (resolve, reject) { //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...) //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法. // console.log(963) setTimeout(function () { resolve('成功!') //代码正常执行！ console.log(852) }, 250) }).then(function (successMessage) { //successMessage的值是上面调用resolve(...)方法传入的值. //successMessage参数不一定非要是字符串类型，这里只是举个例子 console.log('Yay! ' + successMessage) console.log(789) }) console.log(456) </script>执行结果：123=》456=》852=》Yay! 成功!=》789
-
async await 函数
-
程序执行先后顺序
- 同步任务
- process.nextTick
- 微任务
- 宏任务
- setImmediate()
-
ES6模块化开发中的导入导出
-
export（导出）
- export {}
- export var num1 =1000
- export function mul(参数，参数…){} // 导出函数/类
- export default function (argument){} //默认导出
-
export导出与export default 导出的区别
- 在一个文件模板中，export，import可以有多个，export default只能有一个
- export 导出，导入时要加{}，export default 不需要
-
import
- import {} from “地址” //导入export中的变量函数或者类
- import aaa from “地址” // 导入export default 模块中的内容
- import * as 模块名 from “地址” // 统一全部导入
-
导入方式import 和 require 的区别
- require ：复杂类型引入，运行时创建
- import ：单纯的只读引入
-
- 对象的状态不受外界影响。
webpack（前端模块化静态打包工具）
-
目录 ：
- src 源码文件目录
- main.js 入口文件
- dist=》distribution（发布）打包完成的文件目录存储位置
- src 源码文件目录
-
webpack配置文件的分离
-
创建一个build文件夹
-
创建三个文件分别为base.config.js/dev.config.js/prod.config.js
-
在package.json中增加如下代码
-
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config ./build/prod.config.js", "dev": "webpack-dev-server --open --config ./build/dev.config.js" },
-
-
作用：配置文件分离，代码更清晰，配置文件之间互不影响
-
vue运行过程
-
runtime-compiler
-
runtime-only-----(1.性能更高 2.下面的代码量更少)
-
render函数详解
-
render:h=>h(App) //箭头函数形式 -
// 普通函数形式 render:function(createElement){ // 1.普通写法 : createElement("标签"，{标签的属性}，['']) createElement 有三个参数 第一个参数为标签元素，第二个参数为标签属性，第三个参数为标签内容 return createElement( 'h2', {class:'box'}, [ "Hello world", createElement( 'button', ['按钮'] ) ] ) // 2.传入组件对象：return createElement(组件对象名) return createElement(App) } -
.vue文件中的template是由 package.json中的devDependencies中的vue-template-compiler解析成render函数
-
v-for遍历数组与对象
- 官方建议给定key值
- 遍历数组默认遍历数组中的每一个元素
- 遍历对象，如果遍历列表为整个对象，则默认遍历对象中的value值
- 如何保证Vue渲染的DOM元素中的内容值（value）不被复用：
- 保证元素的key不同即可
数组方法总结
- 改变原数组的方法
- push() 在数组后添加一个元素
- pop() 删除数组中的最后一个元素
- unshift() 在数组最前面添加元素
- shift() 删除数组中的第一个元素
- splice() 数组的添加替换删除方法 删除元素/插入元素/替换元素
- splice(1) 删除元素：第二个参数传入你要删除几个元素，如果没有传就删除后面所有的元素
- splice(1,2,“3”) 替换元素：第二个参数表示我们要替换几个元素，后面是用于替换前面的元素
- splice(1，0，“x”,“y”) 插入元素，第二个参数传入0，并且后面要跟上要插入的元素
- 总结：第二个参数为重点参数，决定此方法的作用
- sort() 数组的简单排序方法
- reverse() 数组首位翻转方法 改变原来的数据，但不会产生新数组
- 不改变原数组的方法
- concat() 合并两个数组
- join() 把数组转换成字符串返回
- slice(start,end) 更换数组中的元素
- Vue.set(要修改的对象，索引值，修改后的值)
组件化
-
步骤：创建=》注册=》使用
-
components:{ 组件标签名：组件构造器}
-
全局注册
-
import 组件 from "组件地址" Vue.use(组件名)
-
-
局部注册
-
import 组件 from "组件地址" components:{ 组件名：组件构造器 }
-
data为什么是函数
如果data不是函数，组件之间数据会互相影响，如果data为一个对象，且多个组件共用data中的一个变量，那么这个变量相当于把data的地址进行赋值，且多个组件共用同一个对象地址，数据将会被使用这个变量的所有组件更改。data为函数则是每次调用这个函数，且数据都是独立的互不影响
组件通信
-
父传子
-
props:[]
props:["子组件中需要使用的变量名","..."] -
props:{}
props:{ 子组件使用的变量名：{ type: 传递参数的类型， default: 默认类型， // 默认类型如果为数组或者对象，且vue版本在2.5.17之后的版本，需要写成函数return的形式 default(){ return [""] return {""} } default:()=>() required:true 必传参数 } } //自定义验证形式,可以做简单的验证 props:{ validator:function(value){ return ["需要验证的参数"，"..."].indexof(value)!== -1 } } //自定义构造函数 function Person(firstName,lastName){ this.firstName=firstName this.lastName=lastName } vue.component("组件名",{ props:{ author:Person } })
-
-
子传父
- 父组件导入，注册子组件=》标签内定义自定义事件，定义带参数方法=》子组件$emit（“父组件自定义事件名”，要传递的参数）
-
父访问子
- $children
- $refs
-
子访问父
- $parent
- $root
插槽
-
默认插槽：如果在组件插槽中设置了默认内容，则组件中显示插槽的默认内容；如果不想让显示默认内容，则可以在组件标签中设置想要显示的内容来替换默认内容
-
具名插槽：给插槽命名给一个name属性，以达到控制单个确定插槽的目的
-
<div id="app"> //第一种写法 <cpn><span slot="left">标题</span></cpn> //第二种写法 <cpn><template v-slot:center><button>登录</button></template></cpn> //第三种写法 <cpn><template #right><button>返回</button></template></cpn> </div> <template id="cpn"> <slot name="left"><span>左边</span></slot> <slot name="center"><span>中间</span></slot> <slot name="right"><span>右边</span></slot> </template>
-
-
作用域插槽：用来进行父子组件之间的数据传递
-
// 子组件 <slot name="title" :row="row" :ot="other"></slot> <script> data(){ return{ row:{ name:"hushiyi", age:24 }, other:"我是子数据" } } </script> // 父组件 <Child> <template #title="{row,ot}"> {{scope.row}} {{scope.ot}} </template> </Child>
-
1514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
