vue 基础知识

---

什么是vue,可以在官方文档上得到很系统的介绍。
一、vue项目文件结构

├── build --------------------------------- webpack相关配置文件
│   ├── build.js --------------------------webpack打包配置文件
│   ├── check-versions.js ------------------------------ 检查npm,nodejs版本
│   ├── dev-client.js ---------------------------------- 设置环境
│   ├── dev-server.js ---------------------------------- 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目
│   ├── utils.js --------------------------------------- 配置资源路径，配置css加载器
│   ├── vue-loader.conf.js ----------------------------- 配置css加载器等
│   ├── webpack.base.conf.js --------------------------- webpack基本配置
│   ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
│   ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
├── config ---------------------------------- 配置文件
├── node_modules ---------------------------- 存放依赖的目录
├── src ------------------------------------- 源码(主要操作文件夹)
│   ├── assets ------------------------------ 静态文件(图片、字体、外部css)
│   ├── components -------------------------- 组件 (vue组件)
│   ├── page -------------------------------- 页面(vue页面)
│   ├── config ------------------------------ 相关配置文件
│   ├── libry ------------------------------- 自定义js库
│   ├── plugs ------------------------------- 第三方插件(改装)
│   ├── main.js ----------------------------- 主js
│   ├── App.vue ----------------------------- 项目入口组件
│   ├── router ------------------------------ 路由文件夹
├── static ---------------------------------- 外部静态文件(图片、json数据等)
├── package.json ---------------------------- node配置文件
├── .gitignore------------------------------- 配置git可忽略的文件
├── README.md ------------------------------- 项目说明

二、vue单文件结构

//形式一
<template>
  HTML代码
  <button @click="myclick"></button>
</template>
<script>
  //js代码
  export default {
    data() {
      return {
        datalist:[]
      }
    },
    methods: {
      myclick: ()=>{
        alert('123');
      }
    }
  }
</script>
<style scoped>
  css代码
</style>        
//形式二
<template>
  HTML代码
</template>
<script src="外部的js"></script>
<style scoped src="外部的css"></style>

<template> -HTML代码，最多可以包括一个
<script> -js代码，最多可以包括一个
<style> -css代码，可以包含多个;style标签 加上scoped属性; style标签 可以加上scss属性; 自动处理图片路径

三、vue基础语法

1. 模板语法
    (1)插值
        a.文本{{}}
        b.纯HTML
            v-html 防止XSS
        c.表达式   
    (2)指令：是带有 v- 前缀的特殊属性
        v-bind
        v-if
        v-on:click
    (3)缩写
        v-bind:src => :src
        v-on:click => @click
2. 计算属性-复杂逻辑computed
    (1)基础例子
    (2)计算缓存 VS methods
        计算属性是基于它们的依赖进行缓存的。
        计算属性只有在它的相关依赖改变时才会重新计算。
    (3)计算缓存 VS watch
        watch 监听任意一个属性是否改变
    (4)计算setter
3. class与style
    (1)绑定HTMLclass
        -对象语法
        -数组语法
    (2)绑定内联样式
        -对象语法
        -数组语法
        //font-size=>fontSize将-去掉，下一个字母大写
    class部分：    
    <p class="default" :class="isShow?'aaa':'bbb'">                 三目运算
    <p class="default" :class="{active:isShow,active2:isShow2}">    对象语法
    <p class="default" :class="['active','show']">                  数组语法
    style部分：
    <p class="default" :class="{background:'red'}">                     对象语法
    <p class="default" :class="[{background:'red'},{fontSize:'30px'}]"> 对象语法
4. 条件渲染
    (1)v-if         是否创建该节点，支持template模板语法
    (2)v-else
    (3)template v-if
    (4)v-show           已创建节点,是否显示,不支持template模板语法
5. 列表渲染
    (1)v-for
        a. in
        b. of
        <li v-for="(data,index) in datalist">
            {{data}}~{{index}}
        <li>
        <li v-for="(data,index) of datalist">
            {{data}}~{{index}}
        <li>
    (2)key:
        *跟踪每个节点的身份，从而重用和重新排序现有元素
        *理想的key值是每项都有的且唯一的id。
        <li v-for="(data,index) in datalist" :key="index">
            {{data}}~{{index}}
        <li>
    (3)数组更新检测
        a. 使用以下方法操作数组，可以检测变动push(),pop(),shift(),unshift(),splice(),sort(),reverse()
        b. filter(),concat()和slice(),新数组替换旧数组
        c. 不能检测已下变动的数组
            vm.items[indexOfItem] = newValue
            *解决办法* Vue.set(examples1.items,indexOfIndex,newValue)
    (4)应用:显示过滤结果
        -使用计算属性
        computed:{
            computedDataList:{
                return this.datalist.filter(item=>item.indexOf(this.mytext)>-1);
            }
        }

  本节为vue的基础知识，后期将进行深入了解。
  河流之所以能够到达目的地，是因为它懂得怎样避开障碍。