vue学习笔记

vue

一个vue文件通常由三部分构成，其最终输出结果等同于html。

【template】：html的模板，真正的DOM结构，不同点是支持vue指令，由script和stype来调整，也可以是纯粹的html。
【script】：js脚本，用于修改template的数据。
【style】：css样式，用于修改template的样式。
【components】：依赖组件。

一个vue可以称作为一个组件，更准确的说，一个包含了template的变量就是一个组件。

一个组件本身也是一个实例，

核心手册：

使用变量：{{ param }}, 在指令中可以直接引用变量（v-if="param"）
数据处理：data(){ return {} }
缓存计算：computed:{ 方法名:function(param) }
绑定数据：v-bind:变量=依赖属性
监听事件：v-on:事件名=依赖处理器
触发事件：$emit(事件接收器, 参数)
传递数据：props:[父属性]
监听数据：watch:{ k:function(v) }
搭建面板：去element-ui官网拷贝代码放入template中修改

请求接口：

  request({
      url: '/api/v1/articleList',
      method: 'get',
      params: query
  }).then(response=>{
    response.data.total_amt
  })

实现跳转：

  <router-link to='two.html'><button>跳转</button></router-link>

  this.$router.push({ path:'/two.html' })
  this.$router.go(-1); // 返回上一页

动态渲染：

  // 实际渲染组件由currentRole属性值决定
  <component :is="currentRole" />

  data() {
    return {
      currentRole: "实际组件名"
    };
  }

元素唯一key属性：

  // 作用1：让Vue记住这个元素及其渲染时的顺序，当新增或修改时能直接定位增量，而不用全部重渲染
  <div v-for="(value, key, index) in numbers" :key="index">
    {{ value }}
  </div>

  // 作用2：强制替换元素，key所指定的元素发生变化时，触发生命周期钩子或者过渡，Vue新建一个元素来替换掉原有的元素
  <transition>
    <span :key="text">{{text}}</span> // 如果text发生改变，整个<span>元素会发生更新
  </transition>

0、经验理解

export default：默认输出，一个组件只能写一个default，变量名就变成任意的了。
import 任意名字 from 用default的子组件：子组件必须包含export，如果是default，则import的名字任意起，且不需要加’{}’
redirect:'/dashboard'：在某一级路由下添加redirect重定向，会自动跳转，如果添加的重定向还是子级路由时，相当于自动点击到子页面。
computed vs methods：计算属性的好处是有对于其依赖的缓存机制，即依赖的值不变，则直接返回缓存；而method总是重新计算。

1、指令

在表达式的值改变时，将某些行为应用到 DOM 上。

<p v-if="seen">现在你看到我了</p>
<h1 v-show="seen">现在你看到我了</h1>

2、参数

在指令后以冒号指明。

<!--【v-bind】指令被用来响应地更新 HTML 属性-->
<a v-bind:href="url">菜鸟教程</a>
<a :href="url">菜鸟教程</a> <!--缩写形式-->

<!--【v-on】指令，用于监听 DOM 事件-->
<a v-on:click="doSomething">
<a @click="doSomething"> <!--缩写形式-->

3、修饰符

以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<!--告诉 v-on 指令对于触发的事件调用 event.preventDefault()-->
<form v-on:submit.prevent="onSubmit"></form>

4、用户输入

【v-model】指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<!--输入数据送入到【v-model】指定的变量中-->
<input v-model="message">

5、过滤器

使用管道符’|'进行过滤传递处理。

<div id="app">
  {{ message | filterA('arg1', arg2) }} <!--message是隐含第一个参数arg0，第二个参数arg1，第三个参数arg2-->
</div>

生命周期：

element-ui

响应式布局

参考bootstrap的响应式，预设四个尺寸，都分为1-12份

xs <768px
sm ≥768px
md ≥992
lg ≥120

如超小屏一行展示1个，小屏时一行展示2个，中屏时一行显示3个，大屏时一行显示6个
xs:‘12’ sm:‘6’ md:‘4’ lg:‘2’

插槽

< template slot-scope="scope" >{{ scope.$index }} {{ scope.row }}</template>

// slot-scope="scope"：接收一个单元格对象到scope变量中
// scope.$index：单元格对应的索引编号
// scope.row：单元格对应的数据对象
// scope.row.Name：单元格对应的数据对象的Name属性