Author: Wang Jiaojiao
When: August 30, 2017
1. npm Taobao mirror
Installing vue-cli directly with npm will be very slow. You can install a Taobao image before installing vue-cli. The installation command after that is still the same as npm, except that npm is changed to cnpm, but the speed is no longer a level, swish swish~~~
npm install -g cnpm --registry=https://registry.npm.taobao.org2. Steps to install vue project
In a few easy steps, you can create and start a project with hot reloading, static checking on save, and a production-ready build configuration.
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目（项目名称：vue-webpack）
$ vue init webpack vue-webpack
# 安装依赖，走你
$ cd my-project
$ cnpm install
# 运行项目
$ cnpm run devThe generated directory structure is as follows:
3. Vue components
The following figure is a single-file component:
The essence of a vue single-file component is actually a file composed of html, css, and js, but it must be written in the format specified by vue, that is, the corresponding html, js and css are written in the template, script, and style of the following figure. :
How does the vue component map to the page, look at the following figure to understand (with the help of webpack analysis):
4. Vue important options
The following introduces the important options (properties) of the vue component:
(1) data: the data of the vue object
new Vue({
data: {
a: 1
}
})
<p> {{ a }} </p>(2) methods: methods of vue objects
new Vue({
data: {
a: 1
},
methods: {
doSomething: function() {
console.log(this.a);
}
}
})(3) watch: set the method of object monitoring
Monitor any data you want to monitor. The following figure monitors the change of data "a", which can print out the value before the change and the current value.
new Vue({
data: {
a: 1
},
methods: {
doSomething: function() {
console.log(this.a);
}
},
watch: {
'a': function(val, oldVal) {
console.log(val.oldVal);
},
//深度watch（适用于监听的数据结构比较复杂，例如 c = { list: "apple", isFinished: true} ，那监听c的变化就建议选择深度watch，而且必须当deep为true时生效，false时不生效（例如，将isFinished改为false，结果还是true））
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})5. Template instructions
The settings in the Vue object are associated with html directives (that is, two-way data binding). Important directives include:
(1) Rendering data: v-text, v-html, {{}}
<P> {{ a }} </p>
<P v-text="a"></p>
<P v-html="a"></p>
new Vue({
data: {
a: 1
}
}){{}} is a shorthand for v-text.
The difference between v-text and v-html : v-text will escape HTML tags into text, while v-html will not.
(2) Control display and hide: v-if, v-show
<p v-if="isShow"></p> //直接不渲染
<p v-show="isShow"></p> //渲染这个dom元素，通过css的display属性来控制
new Vue({
data: {
isShow: true
}
})(3) Loop rendering: v-for
<ul>
<li v-for='item in items'>
<p v-text='item.label'></p>
</li>
</ul>
data: {
items: [
{
label: 'apple'
},
{
label: 'banana'
}
]
}
(4) Binding event: v-on
<button v-on:click="doThis"></button>
<button @click="doThis"></button> //简写@
methods: {
doThis: function someThing) {
}
}(5) Binding property: v-bind
<img v-bind:src="imageSrc"> //字符串
<div :class="{ red: isRed }"></div> //布尔值
<div :class="[classA, classB]"></div> //字符串
<div :class="[classA, { classB: isB, classC: isC }]"></div>
6. How to divide components
Simple pages are fine. Once a large website with complex functions is involved, it is necessary to plan the division of components. How should the components be divided, or what principles should be used to divide them?
Although there are no strong rules to demand, there are still principles to follow. I think components can be roughly divided into two categories, that is, functional modules and page areas . You can divide them according to your own situation. The following divisions are for your reference only:
- Function modules: select, pagenation...
- Page area: header, footer, sidebar...
（1）components
So the question is, after the components are divided, how do these components call each other?
The official debut of components ! ! !
App.vue is the component entry, footer.vue and header.vue are components.
（2）props
The problem of calling each other is solved, let's talk about the communication between components - props .
The following is the information msg that the parent component transmits to the child component. Only after the msg is registered with props, the value of msg can be obtained in the child component. Otherwise, no matter what value is passed, the child component cannot get it.
What about the child component passing information to the parent component?
Then the child component can directly use $on or $emit to trigger events to transmit information to the parent component. The following figure is an example of $emit.
//父组件App.vue（自定义child-tell-me事件，触发listenToMyBoy方法）
<header-a v-on:child-tell-me='listenToMyBoy'></header-a>
methods: {
listenToMyBoy: function(msg){
this.childWords = msg;
}
}//子组件（点击按钮将msg发送给父组件）
<button @click="onClickMe">Click!</button>
export default {
data () {
return {
msg: "Hello Vue"
}
},
methods: {
onClickMe: function(){
this.$emit("child-tell-me",this.msg);
}
}
}