VUE
关注
分享
扫一扫
VUE
小森呀
这个作者很懒，什么都没留下…
展开
-
ES6基础
声明变量的方式：var 声明变量，存在变量提升 属于顶层对象的属性 function - 属于顶层对象的属性 let 声明变量，不存在变量提升 不属于顶层对象的属性 const 声明常量，不可修改常量的内存地址 不属于顶层对象的属性 class - 不属于顶层对象的属性 import - - 顶层对象浏览器 window node global 运算符扩展运算符 ......原创 2021-11-28 16:29:33 · 123 阅读 · 0 评论 -
vue基础
{{}} 插值 el 挂载点（双标签，不能为html和body） data 数据 methods 方法，方法内部this指向data v-text 设置文本 v-html 设置文本 v-on:事件名="方法" 绑定事件 @事件名="方法" 绑定事件，简写 @keyup.enter ...原创 2021-04-21 22:42:46 · 143 阅读 · 0 评论 -
computed与watch
完整写法：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-10-19 23:10:32 · 124 阅读 · 0 评论 -
key的作用及原理
作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM]，随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较原理（比较规则）： 1.旧虚拟DOM中找到了与新虚拟DOM相同的key: a.若虚拟DOM中内容没变，直接使用之前的直DOM! b.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 2.旧虚拟DOM中...原创 2021-10-31 15:09:01 · 2781 阅读 · 0 评论 -
class与style
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-10-31 11:58:31 · 232 阅读 · 0 评论 -
render
render(createElement) { return createElement("h1", "你好"); }, render: (createElement) => createElement("h1", "你好"),render: (h) => h("App"),原创 2021-11-07 16:49:56 · 92 阅读 · 0 评论 -
props的写法
第一种：props: ["name", "sex", "age"]第二种：props:{ name:String, sex:String, age:Number }第三种：props: { name: { type: String, required: true,//是否必要性 }, sex: { type: String, default: "男",//没参数时的默认值 }原创 2021-11-07 21:20:22 · 268 阅读 · 0 评论 -
vue插件
1.创建插件（一个js文件）export default { install(Vue,参数...) { // 插件内容 },};2.使用插件Vue.use("插件名",参数...);原创 2021-11-07 21:44:51 · 92 阅读 · 0 评论 -
vue插槽
基本使用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &原创 2021-11-13 19:50:58 · 658 阅读 · 0 评论 -
vue生命周期
vue生命周期beforeCreate 实例初始化前 无法访问到data中的数据和methods中的方法 created 实例初始化后 可以访问到data中的数据和methods中的方法 beforeMount 实例挂载前 页面呈现的是未经vue编译的dom结构，对dom的操作不奏效 mounted 实例挂载后 页面呈现的是经过vue编译的dom结构，对dom的操作奏效 beforeUpdate 数据更新前 此时数据是新的，页面原创 2021-11-21 12:08:38 · 232 阅读 · 0 评论 -
VueComponent(组件)
1.组件的本质是一个名为VueComponent的构造函数，由vue.extend生成2.vue解析组件标签时会创建组件的实例对象3.每次调用vue.extend，返回的都是一个全新的VueComponent4.this指向 a.组件配置中，data、methods、watch、computed中的函数的this均是指向VueComponent实例对象 b.vue配置中，data、methods、watch、computed中的函数的this均是指向Vue实例对象Vue与...原创 2021-11-21 15:51:59 · 733 阅读 · 0 评论 -
router基础
<router-link active-class="" to=""></router-link> router导航 <router-view></router-view> router展示 router配置import Vue from "vue";import VueRouter from "vue-router";import A from "../components/A.vue";import B from "../c原创 2021-11-14 11:44:05 · 661 阅读 · 0 评论 -
vue-cli
1、下载安装nodejs（cmd中node -v查看版本号）2、使用淘宝镜像加速下载（$符号不要,下载后可以使用cnpm）3、npm i -g vue（全局下载vue，在C盘）4、npm i -g vue-cli5、vue init webpack feicui（创建一个项目，下载vue-route处选yes，下载相关依赖处选择自己下载）6、cd feicui 进入项目中7、npm i 下载项目中package.json中的相关依赖8、npm run dev 运行项目npm.原创 2020-06-20 13:59:58 · 154 阅读 · 0 评论 -
defineProperty给对象追加属性
方法一<script> let number = 20; let man = { name: "张三", sex: "男", }; Object.defineProperty(man, "age", { value: number, enumerable: true, //控制添加的内容是否参与遍历 writable: true, //控制添加的内容是否可以修改 configurable原创 2021-09-25 00:25:53 · 208 阅读 · 0 评论 -
vue组件通信
访问自己的data数据Vue.component("my", { template: "#an", data() { return { h1: "我是标题", }; }, });原创 2021-05-05 22:58:22 · 157 阅读 · 0 评论 -
less基础
注释&变量混合合并属性命名空间引入@import (参数) “文件”once 只包含一次，默认 reference 引用less文件但不输出 inline 引用less文件但不进行操作 less 无论是什么格式的文件都把他作为less文件操作 css 无论是什么格式的文件都把他作为css文件操作 multiple 允许引入多次相同文件名的文件 函数字符串函数数学函数ceil()...原创 2021-08-27 22:51:43 · 93 阅读 · 0 评论 -
git基础
远程库git remote 查看远程仓库别名 git remote -v 查看远程库别名 git remote add 别名 远程库http链接 创建远程库别名 git push 远程库别名 分支名 将分支推送到远程库 git pull 远程库别名 分支名 将分支从远程库拉取到本地（会合并分支） git fetch 远程库别名 分支名 将分支从远程库抓取到本地 git fetch --all 将远程库所有分支抓取到本地 git clo原创 2021-08-17 23:23:20 · 97 阅读 · 0 评论 -
vue数据代理
<script> //原数据 var data = { name: "Andy", }; // 数据收集 var _data = data; // 数据代理 var vm = {}; Object.defineProperty(vm, "name", { set(value) { _data.name = value; }, get() { retu..原创 2021-05-16 18:41:37 · 100 阅读 · 0 评论 -
v-model双向绑定原理
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-05-07 23:28:51 · 111 阅读 · 0 评论 -
Vue-Router
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-05-25 23:46:32 · 111 阅读 · 0 评论 -
vue组件访问
父组件访问子组件 el作用范围内必须有子组件注册的标签存在this.$children不建议使用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="wid.原创 2021-05-06 00:33:26 · 137 阅读 · 0 评论 -
vue组件
1.全局组件 // 创建组件构造器 var an = Vue.extend({ template: `<h1>我的</h1>`, }); // 注册组件，在vue实例范围中使用<my></my> Vue.component('my',an)2.局部组件 // 创建组件构造器 var an = Vue.extend({ template: `<h1>我的</h原创 2021-05-04 14:04:57 · 130 阅读 · 0 评论