vuejs

[TOC]

Model–view–viewmodel
https://vuejs.org/v2/examples/index.html
Introducing JSX
Vue Devtools https://github.com/vuejs/vue-devtools#vue-devtools
older bundlers like browserify or webpack 1.
modern bundlers like webpack 2 or Rollup.
Single File Components.
arrow functions
How do I successfully make an HTTP PUT request in Vue?
pagekit/vue-resource https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
Create a Single Page App With Go, Echo and Vue

vue和vue-resource开发版 CDN

1
2
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

vue mount点的问题

el 或者vm.$mount() 指定的挂载的元素,将被Vue产生的DOM完全替换掉,所以不推荐挂载Vue实例到html 或者是 body 元素,否则,vue不显示并且输出一个警告信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- HTML file -->
<html>
<head></head>
<body>
</body>
</html>

// JavaScript file
import Vue from 'vue';

// Example 1
new Vue({
el: 'html', // VUE_BAD_MOUNT alarm
template: '<div>Hello!</div>'
});

// Example 2
const MyComponent = Vue.extend({
template: '<div>Hello!</div>'
});
new MyComponent().$mount('body'); // VUE_BAD_MOUNT alarm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!-- HTML file -->
<html>
<head></head>
<body>
<div id="app1"></div>
<div id="app2"></div>
</body>
</html>

// JavaScript file
import Vue from 'vue';

// Example 1
new Vue({
el: '#app1',
template: '<div>Hello!</div>'
});

// Example 2
const MyComponent = Vue.extend({
template: '<div>Hello!</div>'
});
new MyComponent().$mount('#app2');

Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.

You are probably using Vue from CDN, and probably using a production build (dist/vue.min.js). Either replace it with a dev build (dist/vue.js) or add Vue.config.devtools = true to the main js file.

1
2
3
4
5
6
7
new Vue({
el: '#app',
data: {
message: 'hello world'
}
});
Vue.config.devtools = true;
1
2
3
4
5
6
7

Set the following before any references to Vue:

Vue.config.devtools = true
then also close and repopen the browser or developer console

Good Luck...
1
2
3
4

Vue.config.devtools = true;
new Vue({
el: '#app',

Select element with v-model and v-on=”change:onChange” works differently in FF

computed vs watch

on-change doesn’t work on v-select

v-model vs v-bind

1
2
3
4
5
6
7
8
9
10
11
//v-model="vueData" form input 和 vue data 双向更新     VueData <=> UI
<input v-model="message" >
//v-bind:k="vueData" 单向更新 vue Data => UI
<input v-bind:value="message">


var vm=vue{
data:{
message: '',
}
}

layout 布局

https://getbootstrap.com/docs/4.0/layout/grid/

和组件通讯的方式 props

props

components have isolated scopes of their own

发送消息

https://vuejs.org/v2/guide/components.html

calling the built-in $emit method, passing the name of the event:

1
2
3
4
5
6
7
8
9
10
11

<blog-post
...
v-on:enlarge-text="postFontSize += 0.1"
></blog-post>



<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>

Thanks to the v-on:enlarge-text="postFontSize += 0.1" listener, the parent will receive the event and update postFontSize value.

https://vuejs.org/v2/guide/components.html

1
2
3
4
5
6
7
8
9
10
11
12

<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>


Then when we listen to the event in the parent, we can access the emitted event’s value with $event:

<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>

Or, if the event handler is a method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14


<blog-post
...
v-on:enlarge-text="onEnlargeText"
></blog-post>

Then the value will be passed as the first parameter of that method:

methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}

the W3C rules for custom tag names

component names in the Style Guide.

bootstrap datepicker

https://codepen.io/Yuping/pen/xqrjE

How do I successfully make an HTTP PUT request in Vue?

fetch put method

1
2
3
4
5
6
7
8
9
10
11

fetch(`https://tap-on-it-exercise-backend.herokuapp.com/products/${product.likes}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
// data you intend to send as JSON to the server
whatever: 'ding!'
})
})

Vue el-date-picker 组件时间格式化方式

<el-date-picker size="small" v-model="editData.editItem.startTime"
                            type="datetime"
                            placeholder="选择日期时间" value-format=" yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm">
            </el-date-picker>
1
2

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since an arrow function doesnt have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Deploy a VueJS web app with nginx on Ubuntu 18.04

https://snipcart.com/blog/vue-render-functions

问题 error

$http.get(…).success is not a function