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发生改变，整个元素会发生更新
    </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、参数

在指令后以冒号指明。

<a v-bind:href="url">菜鸟教程a>
<a :href="url">菜鸟教程a> 


<a v-on:click="doSomething">
<a @click="doSomething"> 

3、修饰符

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

<form v-on:submit.prevent="onSubmit">form> 

4、用户输入

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

<input v-model="message">

5、过滤器

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

<div id="app">
  {
    { message | filterA('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属性