vue

在线教程：http://vue_book.siwei.me/

官网教程：https://cn.vuejs.org/guide/introduction.html

通过ref调用控件的事件或属性：例如 this.$refs.loginFormRef.resetFields()

路由导航守卫：router.beforeEach(to,from next)

.eslintrc.js: 修改eslint语法规则

配置vs的格式化规则：.prettierrc

若自己设置的样式没生效，可能是因为默认样式的权重比较高，可以通过 !important来使自己的样式生效

.el-scrollbar__wrap {

  height: 290px !important;

}

作用域插槽：slot-scope

<el-table-column label="权限等级" prop="level">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level === '0'">一级</el-tag>
            <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
            <el-tag type="warning" v-else>三级</el-tag>
          </template>
        </el-table-column>

=====

通过图像化界面创建vue项目：cd到一个目录，然后执行 vue ui

 ====不存在跨域，则使用cookie或session，否则使用token

 

http://vue_book.siwei.me/preparation.html

cnpm install vue vue-cli -g
vue init webpack my-project
cd my-project
cnpm install
npm run dev

 

 

 

win10

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli
vue create my_vue1
cd my_vue1
npm run serve

 

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

 cnpm官网：https://npmmirror.com/

==========

参考：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 选项提供了一个方法来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。