Vue

相关

• 官网

• 另一个学习文档

• Vue.js模板和表达式进行数据关联展示

  • {{ msg}} 模板语法，Mustache语法
  • {{ * msg }} 只绑定一次
  • {{{msg }}} HTML转译输出
  • 可以写入JSON数据(变量) / 数字 / 字符串(得加引号) / 表达式(不推荐写复杂内容，常写三元运算，字符串拼接，简单运算等) ......

• 模板的组成和使用

  • 创建视图容器
  • 创建vue实例，配置

实例的生命周期

• 什么是生命周期
  • 实例在被创建前会经过的一系列初始化过程叫生命周期
• 周期 (四个，每个周期阶段都有两个钩子函数)
  • create(创建)：beforeCreate 、created
  • mount(挂在)：beforeMount 、mounted
  • update(更新)：beforeUpdate 、updated
  • destroy(销毁)：beforeDestroy 、destroyed

钩子函数

• 在生命周期中被自动调用的函数叫做生命周期钩子
• 钩子函数的用途
  • 我们可以利用钩子函数，来自定义自己需要的一些逻辑
• 钩子函数的书写位置：与data 、methods等配置项同级...
• 钩子函数有哪些
  • beforeCreate 、created 、beforeMount 、mounted 、beforeUpdate 、updated 、beforeDestroy 、destroyed

单文件组件

• 单文件组件的定义：

-----item.vue文件-----
-----这个文件就是一个完整的组件-----
<template>
    <div class="itemWrap">
         <span><slot name='icon-gray'></slot></span>
         <span><slot name='icon-color'></slot></span>
         <span>{{txt}}</span>
    </div>
</template>

<script>
    export default{
        props:['txt','mark'],
        data:function(){
            return{}
        },
        methods:{}
    }
</script>

<style>
    .itemWrap{......}
    .itemWrap>img{......}
    .itemWrap>span{......}
</style>

---------------------------------------------------------
-----在其他的文件中使用item组件----------------

<script>
import Item from './item'       // 一、先要从item.vue这个文件导入组件Item

    export default {
          components:{
            Item              // 二 、然后在components配置项中定义Item
          },
          data:function(){
            return{}
          },
          methods:{}
    }
</script>

-------------------------------------------------------------------------------------------
**********************************************************************************
        computed:{        //计算属性，定义需要通过简单逻辑判断后，才能最终确定值的变量 
            bol:function(){
                if(this.mark==this.sel){
                    return false;
                }else{
                    return true;
                }
                
            }
        }

---

tabbar完整代码

---

`