1) 安装node
2) sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
3) sudo cnpm install --global vue-cli
4)vue init webpack my_project
5) cd my_project
6) cnpm run dev
==========
参考：https://cloud.tencent.com/developer/article/1020338?fromSource=waitui
https://cloud.tencent.com/developer/article/1020416
props是专门用来暴露组件的属性接口的
在Vue中怎么绑定事件呢，用methods属性,methods属性中可以写任何的自定义函数,
v-XXX是Vue里的一些关键字，叫做指令，v-on:click可以缩写为@click，当然还有其他的事件比如v-on:tab等等；
v-bind:class=XXX 可以缩写成 ：class=XXX
：class=XXX和class=XXX的区别在于不带冒号的是静态的字符串绑定，带冒号的是动态的变量绑定
用msg属性来自定义按钮的文案
这种做法叫做监听，由引用方（暂且叫做父组件）监听子组件的内置方法；同时在子组件中，需要触发这个事件
$emit，也叫触发机制，父组件监听，子组件触发
如果按钮组件的结构除了开发时候预设的那些dom结构之外，允许我们在调用的时候添加一些自己想要的结构，那是不是解决了呢，是的，Vue早就为我们考虑了这一点，他就是slot标签
用props给按钮自定义文案，用on和emit给按钮自定义点击触发，用slot给按钮添加一些自定义结构
component标签，这是Vue自带的一个标签，可以把它当作一个容器，这个容器可以用来装按钮，也可以用来装箭头。决定这个容器装的是哪个组件的关键代码在于：is="currentView"，当currentView的值为qui-btn的时候，这个容器就是按钮组件，当它是qui-arrow的时候，就是箭头组件
其实关于动态组件，不一定要用：is+component来实现，在Vue中有一个指令叫做v-if / v-else / v-else-if，统称判断指令，配合展示指令v-show，可以根据指定的值来决定对应的组件是否应该展示
回调函数：
<script>
export default {
components: {
'qui-list': quiList
},
beforeCreate:function(){},//组件实例化之前
created:function(){},//组件实例化了
beforeMount:function(){},//组件写入dom结构之前
mounted:function(){//组件写入dom结构了
console.log(this.$children);
console.log(this.$refs);
},
beforeUpdate:function(){},//组件更新前
updated:function(){},//组件更新比如修改了文案
beforeDestroy:function(){},//组件销毁之前
destroyed:function(){}//组件已经销毁
}
</script>
==========参考：https://v3.cn.vuejs.org/guide/installation.html
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定，如：
<div id="two-way-binding">
<p>{{ message }}</p>
<input v-model="message" />
</div>
v-bind attribute 为指令用来给元素绑定属性，如：<span v-bind:title="message">
v-on 指令添加一个事件监听器，如：<button v-on:click="reverseMessage">反转 Message</button>
控制切换一个元素是否显示：<span v-if="seen">现在你看到我了</span>
v-for 指令可以绑定数组的数据来渲染一个项目列表：
<li v-for="todo in todos">
{{ todo.text }}
</li>
父组件通过v-bind attribute给子组件传参，子组件通过props接收父组件传递的值
组件属性：data, methods，props，computed，inject 和 setup
组件内置属性：如 $attrs 和 $emit。这些 property 都有一个 $ 前缀，以避免与用户定义的 property 名冲突
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html 指令：
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
指令 (Directives) 是带有 v- 前缀的特殊 attribute。
在指令参数中使用 JavaScript 表达式，方法是用方括号括起来：
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
v-bind 缩写是:
v-on 缩写是@
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：<a v-bind:['foo' + bar]="value"> ... </a>
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
组件的 data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。
直接将不包含在 data 中的新 property 添加到组件实例是可行的。但由于该 property 不在背后的响应式 $data 对象内，所以 Vue 的响应性系统不会自动跟踪它。
用 methods 选项向组件实例添加方法，Vue 自动为 methods 绑定 this，以便于它始终指向组件实例
vue 没有内置支持防抖和节流，但可以使用 Lodash 等库来实现。
计算属性（computed）只会在相关响应式依赖发生改变时重新求值,而方法（methods）在每次被调用时都会执行。如果你不希望有缓存，请用 method 来替代
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
Vue 通过 watch 选项提供了一个方法来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。