博客

• vue

Vue单词大全
  0~9
     vue:(view)视图，视觉;
     message:消息;
     item:项目;
     in:在...里面;在(某范围或空间内的)某一点;在(某物的形体或范围)中;在…内;在…中;进入;
     counter:计数器;柜台;对立面;
     el:(element)(计算计)挂载元素;Vue实例挂载的元素节点;
     data:数据;
     methods:方法,方法论;
     add:添加;
     reduce:减少;
  10~19
     funciton:函数;
     say:说,谈,谈论;
     alert:警报;向…报警;使警觉;使警惕;使戒备;使意识到;使认识到;
     value:值;
     test:测试;
     cloak:掩盖;(尤指旧时的)披风，斗篷;遮盖物;
     //vue模板语法中的插值操作6种基础指令
     {{}}:mustache模板的表达式,频繁用于绑定数据直接显示在页面;
     v-once:该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变;
     v-html:此指令用于解析数据中的html代码并渲染;
  20~29
     v-text:v-text作用和Mustache比较相似：都是用于将数据显示界面中，但v-text是直接替换标签中的内容，而mustache语法可以加其它内容;
     v-pre:仅标签内的内容原封不动的显示，不解析;
     v-cloak:1，在没完成vue解析之前，div中有一个属性v-cloak 2,在完成vue解析之后，div中没有一个属性v-cloak，此属性被删除 根据v-cloak的特性，可以用属性选择器控制元素解析前的样式;
     v-bind:动态绑定属性，缩写为":";
     current:当前的;现时发生的;现在的;通用的;流通的;流行的;(海洋或江河的)水流;气流;电流;思潮;潮流;趋向;
     index:索引;
     click:点击;
     final:最终的;最后的;(指结果)最终的;决定性的;不可改变的;决赛;大学毕业考试;期终结业考试;期终考试;
     get:获取;得到;拿到;取得;夺取;
     computed:(计算机)计算属性;
  30~39
     base:基础;根基;基底;底座;根据;出发点;以…为据点(或总部等);
     total:总数;总的;总计的;全体的;全部的;彻底的;完全的;总额;合计;总计;总数达;共计;把…加起来;计算…的总和;彻底毁坏(汽车)
     price:价格;
     full:充满;完全;丰富;(关于某事物)想得很多，谈得很多;直接地;径直地
     button:按钮;
     var btns = document.getElementsByTagName("button"); //通过标签名取得一个相同标签名形成的元素数组
     btns[i].addEventListener("click", function () { 代码块 }); //元素添加事件监听,点击动作,绑定事件
     v-on:绑定事件监听器,缩写为"@"
     //六种v-on修饰符
     @click.stop = "btnClick" //调用event.stopPropagation() 停止冒泡
  40~49
     @click.prevent="submitClick" //调用event.preventDefault() 阻止默认行为
     @click.native="change" //监听组件根元素的原生事件
     @click.once="change_up" //只触发一次回调语句,一次性的
     @keyup.{keyCode | keyAlias} (键码或键简写) = "keyX" //只当事件是从特定键触发回调
     /* 1.字母和数字键的键码值(keyCode)
     A-- - 65; B-- - 66; C-- - 67; D-- - 68; E-- - 69; F-- - 70; G-- - 71; H-- - 72; I-- - 73; J-- - 74; K-- - 75; L-- - 76; M-- - 77; N-- - 78;
     O-- - 79; P-- - 80; Q-- - 81; R-- - 82; S-- - 83; T-- - 84; U-- - 85; V-- - 86; W-- - 87; S-- - 83; Y-- - 89; Z-- - 90;
     0-- - 48; 1-- - 49; 2-- - 50; 3-- - 51; 4-- - 52; 5-- - 53; 6-- - 54; 7-- - 55; 8-- - 56; 9-- - 57;
     2.数字键盘上的键的键码值(keyCode)
     0-- - 96; 1-- - 97; 2-- - 98; 3-- - 99; 4-- - 100; 5-- - 101; 6-- - 102; 7-- - 103; 8-- - 104; 9-- - 105;
  50~59
     * --- 106; +--- 107; ENTER-- - 108; - --- 109; .--- 110; / ---111;
     F1-- - 112; F2-- - 113; F3-- - 114; F4-- - 115; F5-- - 116; F6-- - 117; F7-- - 118; F8-- - 119; F9-- - 120; F10-- - 121; F11-- - 122; F12-- - 123;
     3.控制键键码值(keyCode)
     Backspace-- - 8; Tab-- - 9; Clear-- - 12; Enter-- - 13; Shift-- - 16; Control-- - 17; Alt-- - 18; Cape Lock-- - 20; Esc-- - 27;
     Spacebar-- - 32; Page Up-- - 33; Page Down-- - 34; End-- - 35; Home-- - 36; Left Arrow-- - 37; Up Arrow-- - 38;
     Right Arrow-- - 39; Dw Arrow-- - 40; Insert-- - 45; Delete-- - 46; Num Lock-- - 144;
     ;: --- 186; =+ --- 187; ,< --- 188; -_-- - 189;.> --- 190; /?---191;`~---192;[{---219;|---220;]}---221;'"---222;
     3.多媒体键码值(keyCode)
     音量加-- - 175；
     音量减-- - 174；
  60~69
     停止-- - 179；
     静音-- - 173；
     浏览器-- - 172；
     邮件-- - 180；
     搜索-- - 170；
     收藏-- - 171；
     4，Event 对象
     鼠标 / 键盘属性
     属性 描述
     altKey 返回当事件被触发时，"ALT" 是否被按下。
  70~79
     button 返回当事件被触发时，哪个鼠标按钮被点击。
     clientX 返回当事件被触发时，鼠标指针的水平坐标。
     clientY 返回当事件被触发时，鼠标指针的垂直坐标。
     ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
     metaKey 返回当事件被触发时，"meta" 键是否被按下。
     relatedTarget 返回与事件的目标节点相关的节点。
     screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
     screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
     shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
     x 返回当事件被触发时，鼠标指针在当前元素的坐标系中的水平坐标。
  80~89
     y 返回当事件被触发时，鼠标指针在当前元素的坐标系中的垂直坐标。
     */
     v-if: v-if后面的条件为false时，对应的元素以及其子元素不会渲染,也就是根本不会有对应的标签出现在DOM中;
     v-else-if: 当v-if的条件不符合时，而v-else-if的条件为true，则对应的元素以及其子元素会渲染，反之,当v-if的条件不符合时，v-else-if的条件为false，DOM中不会有对应的标签，对应的元素以及其子元素也不会渲染;
     v-else: 当v-if与所有的v-else-if的条件都不符合时，其它情况出现时，对应的元素以及其子元素就会渲染，反之，DOM中不会有对应的标签，对应的元素以及其子元素也不会渲染;
     :key="key1" :key属性为每个节点的唯一标识;官方推荐编程时使用v-for时，应给对应的元素或组件添加上一个:key属性，以此高效的更新虚拟DOM;
     //那些方法是响应式的,执行时返回值将直接替换原属性值
     arr.push(str1) //响应式,数组末尾添加元素
     arr[0]="字符串" //不是响应式，通过索引修改数组中的元素
     arr.pop() //响应式，数组末尾删除元素
  90~99
     arr.shift() //响应式，首位删除
     arr.unshift() //响应式，首位添加多个元素
     arr.splice(start,delNumber,tag1...) //响应式，数组删除元素/插入元素/替换元素
     arr.sort() //响应式，数组有序排列
     arr.reverse() //响应式，数组反序
     Vue.set(arr,0,"字符串") //响应式，通过Vue对象的set方法修改数组中的元素
     ...n :剩余参数，n是用于存放参数的数组;
     sum:太阳，阳光;
     length:长度;
     increment:增长;
  100~109
     decrement:减量，消耗;
     remove:移除，去除，消除;
     id:身份证件,本我;
     name:名字，名称;
     date:日期;
     count:数量;
     spacing:间隙，间距;
     arr.filter(function (n) { return n<10;}) //过滤函数(高阶函数);
     arr.map(function (n) { return n * 2; }); //映射函数(高阶函数)
     arr.reduce(function (preValue, n) { return preValue + n; }, 0); //汇总函数(高阶函数)
  110~119
     v-model:使用v-model指令来实现表单元素和数据的双向绑定;v-model相当于两条指令:1,v-bind绑定一个value属性 2，v-on指令给当前元素绑定input事件;
     <input type="text" :value="message" @input="valueChange">
     {{message}}
     <input type="text" v-model="message"><!-- v-model双向绑定 -->
     {{message}}
     valueChange(event) {
     /* 把最新的value赋值给message */
     this.message = event.target.value; }
     sex:性别;
     female:女性;
  120~129
     male:男性;
     agree:同意;
     hobbies:爱好;喜好;
     fruit:水果;
     selects:选择(复数);
     origin:起源;
     number:数字，数量，号码;
     trim:修剪;修整;切去，割掉，剪下;
     watch:监听，观察，看;
     filters:{} //过滤器
  130~139
     constructor:构造器;
     component:组件;
     components:组件(复数);
     extend:继承，延伸;
     template:模板;
     const cpn1 = Vue.extend({ template:"dom" }); //创建组件构造器
     Vue.component("cpn1",cpn1); //注册组件
     <template id="cpn2"> dom </template> //使用template模板标签创建模板
     Vue.component("cpn2", { template:"#cpn2" }); //注册组件
     parse:解析;
  140~149
     float:浮动;
     props:接收属性;
     @emit:发射属性;
     languages:语言(复数);
     flag:旗帜，标志旗，信号旗;
     module:模块，模块化;
     bundle:(一)捆，包，扎;一批(同类事物或出售的货品);;
     module.exports={flag=true, test(a,b){ return a+b; }, demo(a,b){ return a+b; } } //导出属性及属性值
     let {test,demo,flag}=require("moduleA"); //导入属性及属性值
     person:人类，人;
  150~159
     default:默认;系统设定值;预置值;
     author:作者;
     as:作为;当作;像;如同;(比较时用)像…一样，如同;(指事情以同样的方式发生)和…一样;当…时;随着;照…方式;因为;由于;
     like:喜爱;
     love:爱,真爱;
     //webpack工具
     install:安装;
     save:保存，节省，节约;
     loader: 装载机;
     config:配置;
  160~169
     run:运行，跪;
     build:建造，构造，搭建;
     npm:(计算机)node.js下一个常用工具包;
     less:更少，极少;
     CLI:(Vue Command-Line Interface) 翻译为Vue命令行界面，俗称脚手架;
     npm install -g @vue/cli //全局安装最新版vue脚手架
     VueCLI2初始化项目 :'vue init webpack my_project'; VueCLI3初始化项目 :'vue create my_project';
     render:提供，使变得，给予;
     npm run dev //运行程序
     'node init':初始化node.js,生成node_modules文件夹; 'npm uninstall webpack -g':删除全局的webpack;
  170~179
     'npm install webpack@3.6.0 -g' :全局安装webpack打包工具;
     'npm install webpack --save-dev -g' :全局安装最新版webpack打包工具;
     'npm config set registry https://registry.npm.taobao.org'&'npm info underscore':npm设置为连接国内镜像;
     'npm install -g @vue/cli':全局安装vuecLI脚手架;
     'npm install @vue/cli-init -g':安装vueCLI版本切换器;
     'vue init webpack my_project':VueCLI2初始化项目;
     'vue create my_project':VueCLI3初始化项目;
     'node my_file':直接运行文件;
     'npm run my_script':运行脚本;
     'npm run dev':程序开始运行(cli2);
  180~189
     'npm run serve':程序开始运行(cli3);
     'vue ui':可视化项目管理器(本地服务器);
     /* webpack命令行 */;
     'npm install --save-dev vue-loader vue-template-compiler':安装.vue文件编译和加载到dom插件(vue-loader版本应为13.x);
     /* vuex命令行 */;
     'npm install vuex --save':安装最新版vuex插件运行时使用;
     'vue create my_project':VueCLI3初始化并创建项目;
     'cd my_project':选中我的项目;
     'npm run serve':运行我的项目;
     'npm install vue-router --save':安装路由;
  190~199
     //
     router:路由;
     reference:参考;
     state:州，国家，状况，情况;
     history:历史;
     replace:替换;
     promise:承诺;答应;保证;使很可能;预示;许诺;
     resolve:决心;决定;作出决定;作出决议;表决;解决(问题或困难);决心;坚定的信念;
     reject:拒绝,拒绝接受;不予考虑;拒收;不录用;拒绝接纳;(因质量差)不用，不出售，不出版;
     then:然后;(指过去)当时，那时;(指将来)到那时，届时;接着;其后;后来;那么;因此;既然如此
  200~209
     err:犯错误;做错事;出差错;
     new Promise((resolve, reject) => { $ajax({ url: "url1", success: function (data1) { resolve(data1); } }); })
     pending:等待;
     fulfill:满足状态;
     reject:拒绝;
     //Vuex有五个比较核心的概念:
     1，State :数据(根据单一状态树的说法一般只有一个State);
     2,Getters :计算属性；
     3，Mutation :方法(State更新方法和普通方法);
     4,Action :异步操作;
  210~219
     5,Module :模块化数据管理;
    
     vue-axios:vue轴心（网络请求）;
     const axios =axios.create({ }); //axios的实例
     common:常见的;通常的;普遍的;共有的;共享的;共同的;普通的;平常的;寻常的;平凡的;
     assets:资产;
     network:网络;网状系统;关系网;人际网;相互关系(或配合)的系统;(互联)网络;将…连接成网络;联播;建立工作关系;
     views:意见;
     :;
          @沉木 2021/3/5