Feng's Blog

kiwidict.com

0%

Vue系列之基础知识

Posted on Edited on In

TodoItem

eslint-plugin-vue todo

调试技巧 todo

前端加密的库CryptoJS使用demo todo

以及相同的流行的库有什么？

Vue的生命周期 todo

Problem Solution

Vue.js devtools灰色状态

首先要确保编译的控制台没有error,在Sources里面有源码可以debug。

Invalid prop: type check failed for prop “queryForm”. Expected Array, got Promise

原因是因为prop “queryForm”，期待拿到的是一个Array数组对象，但是传进去的却是一个Promise对象，所以抛出这个报错，类似的错误一般会有：

1
[Vue warn]: Invalid prop: type check failed for prop "data". Expected Array, got String.

Vue中监听路由参数变化的方法

1
2
3
4
5
6
7
8
watch: {
      $route(){
        this.pjtid = this.$route.query.pjtid
      },
      pjtid() {
        this.pjtdetail()
      }
}

还可以监听url的前后变化：

1
2
3
$route (to, from) {
      this.init()
}

VueRouter进不去组件的原因

有可能是父路径的path忘记以/开头了，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default [{
  path: 'index',
  component: $ => import('@/page/index/Index')
}, {
  path: 'vocabulary',
  component: $ => import('@/page/word/Search'),
  children: [{
    path: 'detail',
    component: $ => import('@/page/word/Detail')
  }, {
    path: 'starList',
    component: $ => import('@/page/word/StarList')
  }, {
    path: 'starListDetail',
    component: $ => import('@/page/word/StarListDetail')
  }]
}]

这样子的话浏览器访问http://localhost:8080/#/index会出现空白!

filters 调用到this对象的data、methods

https://blog.csdn.net/ee_11eeeeee/article/details/102961376

Avoid mutating a prop directly since the value will be overwritten whenever

props从父组件传递数据到子组件，不能子组件更改修改父组件，单向传递，用临时局部变量代替。

ios手机点击输入框页面放大，输入框失焦后，页面不复原，仍保持放大状态

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Basic Knowledge

重要备忘

  • 在标签的属性与vue的变量或者方法绑定中，千万记得不要使用this.开头，这样子会读取到标签本身的属性值的
  • vue的html标签如果属性绑定调用的是方法返回的，注意要在方法名后面加上()，不然可能会被解析为变量名
  • 引入js的单个或这个静态的方法或变量，一定要加{}，比如：
    1
    import {BILL_BUTTON_CONFIGS} from './buttonConfig'
    不能是：
    1
    import BILL_BUTTON_CONFIGS from './buttonConfig'
    不然里面的BILL_BUTTON_CONFIGS常量使用会undefined
  • v-bind绑定是可以使用三目运算符的
    1
    :class="taskVO.selected?'selected':''"

log打印

如果变量打印前面加了字符串拼接的话，chrome是不会自动打印变量的具体内容的！

API in common use

1
2
3
4
5
6
7
v:bind:attribute
v-html
v-on:click
v-on:dblclick
v-on:mousemove

v-on:可以用@代替

vue import @

@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径

使用Vue.prototype实现全局变量

当你在main.js里声明了Vue.prototype.a = 1后，因为你的每一个vue组件都是一个Vue对象的实例，所以即使你没有在组件内部使用data(){return{……}}声明a，你依然可以在组件中通过this.a来访问。

Template Literals（模板对象） in ES6

如在es5中拼凑字符串需要+’’以及变量名

1
2
var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;

在es6中新增添了${}的使用方法

1
2
var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;

no-undef

“extends”: “eslint:recommended”配置文件中的属性启用此规则。
此规则可以帮助您查找由变量和参数名称拼写错误或意外隐式全局变量（例如，var在for循环初始值设定项中遗忘关键字）导致的潜在ReferenceErrors 。

style scoped

在Vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，局部有效。如果一个项目中的所有vue组件style标签全部加上了scoped，相当于实现了样式的私有化。如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。

v-model vs :model

v-model是vue内置的控件和变量之间双向数据绑定的指令，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--input输入框，值会在<p>标签打印出来-->
<div id="app">
     <input type="text" v-model="message" placeholder="请输入">
    <p>输入的内容是: {{message}}</p>
</div>

<script>
    var  vue=new Vue({
        el:'#app',
        data:{
           message:''
        }
    });
</script>

:model相当于v-bind:model的缩写，
v-bind动态绑定指令，默认情况下控件自带属性的值是固定的。
这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。
当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。

用v-bind和v-on指令实现v-model，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--input输入框-->
<div id="app">
    <!--把message字段的值作为input标签的value属性值，同时监听输入事件，实时更新message的值-->
    <input type="text" @input="handleInput($event)"  placeholder="请输入"  v-bind:value="message">
    <p>输入的内容是: {{message}}</p>
</div>

<script>
    var  vue=new Vue({
        el:'#app',
        data:{
            message:''
        },
        methods:{
            handleInput: function (event) {
                console.info("控制台打印event详情")
                console.info(event)
                console.info(event.toLocaleString());
                this.message=event.target.value;
            }
        }
    });
</script>

XML DOM自带的validate方法

查看js源码发现，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
export interface IXMLDOMSchemaCollection {
        length: number;
        namespaceURI(index: number): string;
        validateOnLoad: boolean;

        add(namespaceURI: string, schema: string|IXMLDOMNode): void;
        addCollection(collection: IXMLDOMSchemaCollection): void;
        get(namespaceURI: string): IXMLDOMNode;
        getDeclaration(node: IXMLDOMNode): ISchemaItem;
        getSchema(namespaceURI: string): ISchema;
        remove(namespaceURI: string): void;
        validate(): void;
    }

因此，在vue的代码中，form对象可以直接调用validate()，如：

1
2
3
4
5
6
7
8
9
10
11
12
handleLogin () {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
        this.$router.push({ path: this.tagWel.value });
      }).catch(()=>{
        this.refreshCode()
      })

    }
  });
}

vue中this.$router.push()路由传值和获取的两种常见方法

https://www.cnblogs.com/toonezhr/p/10325457.html

Vue.extend, new Vue(), Vue.component(), render

https://www.jianshu.com/p/ae319db5b456

vue sync修饰符

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
https://www.jianshu.com/p/6b062af8cf01

常用属性

vm.$el
获取Vue实例关联的DOM元素；

vm.$data
获取Vue实例的data选项（对象）

vm.$options
获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods）

vm.$refs
获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）
https://www.jianshu.com/p/f6f3f00cd923

vue.use和vue.prototype的区别

watch、mounted、computed、created的区别 todo

created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点。

二者的执行顺序

嵌套组件中两者的执行顺序不同。

父组件 created

子组件 created

子组件 mounted

父组件 mounted

watch

watch的高级用法

监听变量originList的变化，如果变化了调用init方法

1
2
3
mounted () {
    this.$watch("originList", this.init)
}

$=>import(“@/components/common/Empty”)这是什么写法？

this.$options

通过this.$options调用方法：

1
his.$options.methods.getPicData.call(this)

带参数的调用：

1
this.$options.methods.getPicData.call(this,data)

this.$emit()/Vue子组件向父组件传值

1
this.$emit('refreshCodeTreeFun')
1
2
3
4
5
6
7
8
<vercode-info ref="vercodeInfo" v-if="showVercodeTable"
				:parent-id="parentId"
				:current-id="currentId"
				:parent-name="parentName"
				:default-node-type="defaultNodeType"
				:specialty-name="specialtyName"
				:specialty-id="specialtyId"
				@refreshCodeTreeFun="refreshCodeTreeFun"></vercode-info>
1
2
3
4
5
6
refreshCodeTreeFun () {
			this.showCodeTree = false
			setTimeout(() => {
				this.showCodeTree = true
			}, 1)
		}

ref属性

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

$refs 是所有注册过的ref的一个集合。

vue语法 ${ }（模版字符串）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const name = '小缘'
const age = 14
console.info(`大家好，我叫${name}，今年${age}岁了`)
// 等价于
console.info('大家好，我叫' + name + '，今年' + age + '岁了')
 
// 最大的优势是支持换行字符串
const url = '//baidu.com'
const text = '百度一下，你就知道'
const html = `
  <div class="container">
    <a href="${url}">${text}</a>
  </div>
`
————————————————
版权声明：本文为CSDN博主「Hzsilvana」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42776027/java/article/details/101197879

自定义setter方法，调用时一并返回对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export const createQueryFieldEnhance = function () {
	let field = {
		type: '', propertyName: '', fieldName: '', dataSource: [], dataSourceCode: '', isMultiple: false,
		setType (type) {
			this.type = type
			return this
		},
		setPropertyName (propertyName) {
			this.propertyName = propertyName
			return this
		},
		setFieldName (fieldName) {
			this.fieldName = fieldName
			return this
		},
		setDataSource (dataSource) {
			this.dataSource = dataSource
			return this
		},
		setDataSourceCode (dataSourceCode) {
			this.dataSourceCode = dataSourceCode
			return this
		},
		setIsMultiple (isMultiple) {
			this.isMultiple = isMultiple
			return this
		}
	}
	return field
}

vue组件之间通信的6种方式

$emit / $on

1
this.$emit(事件名,数据);
1
2
3
4
5
async mounted (){
    this.$on("refresh", $=>{
        // xxx
	})
}

输入框Input监听回车

1
<el-input v-model="name" @keyup.enter.native="onSubmit" placeholder="User Name"></el-input>

vue监听浏览器窗口的变化

https://blog.csdn.net/weixin_34049948/article/details/86021903

package.json中^和~的区别

https://blog.csdn.net/Amnesiac666/article/details/111194388

Tool

html和pug之间的转换

倒计时组件

https://www.cnblogs.com/haoning/p/11686674.html