可能有用1
1.this.$set()
给data对象新增属性，并触发视图更新
this.$set(this.student,"age", 24)
2.邮箱验证
表单页面的邮箱验证之类的
有空格不能通过正则验证
可以让邮箱的输入框失去焦点时自动去掉空格
vue中watch邮箱的v-model
或@input="qwe"
然后 .replace(/\s/g, '')
邮箱正则---
3.mixins
相当于在引入后，父组件的各种属性方法都被扩充了。
import {cs} from './../assets/js/cs';
export default {
mixins:[cs],
name: 'hello',
data () {
return {
msg: '测试'
}
}
}
4.在ES6模块特性中，import时如何正确使用花括号'{ }'
在一个文件或模块中，export、import可以有多个，export default仅有一个
通过export方式导出，在导入时要加{ }，export default则不需要
https://www.cnblogs.com/xiaotanke/p/7448383.html#top
原文地址 --- https://segmentfault.com/a/1190000010651936
假如有一个B.js，想要通过import语法引用模块A.js，那么可以这么写：
// B.js import A from './A'
而上面的代码生效的前提是，只有在如下A.js中有默认导出的export default语法时才会生效。也就是：
// A.js export default 42
在这种不使用{}来引用模块的情况下，import模块时的命名是随意的，即如下三种引用命名都是正确的：
// B.js import A from './A' import MyA from './A' import Something from './A'
因为它总是会解析到A.js中默认的export default
而下面是使用了花括号命名的方式{A}来导入A.js：
import { A } from './A'
上面代码生效的前提是，只有在模块A.js中有如下命名导出为A的export name的代码，也就是：
export const A = 42
而且，在明确声明了命名导出后，那么在另一个js中使用{}引用模块时，import时的模块命名是有意义的，如下：
// B.js import { A } from './A' // 正确，因为A.js中有命名为A的export import { myA } from './A' // 错误！因为A.js中没有命名为myA的export import { Something } from './A' // 错误！因为A.js中没有命名为Something的export
要想上述代码正确执行，你需要明确声明每一个命名导出：
// A.js export const A = 42 export const myA = 43 export const Something = 44
5.@param
原地址---https://www.cnblogs.com/SLchuck/p/4376200.html
/**
* @param title 题目
* @param imgUrl 图片路径
* @param path 页面路径
*/
@param 这是代码注释---注释参数和类型
6.Vue.js中 watch 的高级用法
原文---https://blog.csdn.net/wandoumm/article/details/80259908
参考---https://www.jianshu.com/p/f208b32b5ff6
https://www.cnblogs.com/jin-zhe/p/9319648.html
handler方法和immediate属性
这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。
那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？
我们需要修改一下我们的 watch 写法，修改过后的 watch 代码如下：
watch: { firstName: { handler(newName, oldName) { this.fullName = newName + ' ' + this.lastName; }, // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法 immediate: true } }
注意到handler了吗，我们给 firstName 绑定了一个handler方法，
之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，
最终编译出来其实就是这个handler。
而immediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，
如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
deep属性
watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听
当被监听的属性为对象时，默认不会监听对象内部属性的变化，而是只监听属性被赋值时的变化，解决办法添加说明deep:true（默认为false），此时监听器会深度遍历给对象的每一个属性都带上监听器，更新写法
// 监听对象的所有属性 watch: { activeTab: { handler(newValue, oldValue) { console.log(newValue, oldValue); this.getList(); }, // 深度监听 deep: true } } // 监听对象的某些属性 watch: { 'activeTab.index': { handler(newValue, oldValue) { console.log(newValue, oldValue); this.getList(); } } }
watch:{ childrens:{ handler:function(val,oldval){ console.log(val.name) }, deep:true//对象内部的属性监听，也叫深度监听 }, 'childrens.name':function(val,oldval){ console.log(val+"aaa") },//键路径必须加上引号 lastName:function(val,oldval){ console.log(this.lastName) } },//以V-model绑定数据时使用的数据变化监测
7.vue的入口文件
原文地址---https://blog.csdn.net/qq_36145914/article/details/86497123
在vue cli构建的项目中，main.js是项目的入口文件，定义了vue实例
并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上
vue实例挂载后，会对节点原内容进行覆盖
所以，即便index.html和app.vue中都定义了<div id="app"></app>, 最终网页也不会出现两个id为app的节点
main.js为什么叫入口文件，什么是“入口文件”
若不做特殊设置，index.html实际页面中仅挂载了app.js一个脚本，所有组件去哪儿了，app.js是如何形成的
vue实例化在main.js中，但在index.html中并没有引入main.js，main.js与index.html是如何产生关联的
vue cli搭建的项目本质是一个集成预设置的webpack项目。是webpack驱动着项目的打包，热重载和本地运行。
而上述问题都是由webpack逐一处理的
入口文件是一个webpack概念;入口文件是webpack构建内部依赖图的起点。
app.js是由webpack打包生成的输出文件。
而将app.js挂载到index.html这一过程是由html-webpack-plugin完成的。
8.export和import的坑
只是想在html文件中普通的使用important和export试一下 是不行的
首先需要起一个本地的服务,然后
<script type="module">
在这种模式中
<input id="nmb" onclick="cs()">
是不行的 会报错 cs找不到 需要正常的写
document.getElementById('nmb').onclick =function cs() {}
9.live-server localhost
npm install -g live-server
live-server
10.vscode ctrl点击跳转新开页面 不覆盖原页面
在settings.json中加上
"workbench.editor.enablePreview": false,
浙公网安备 33010602011771号