Vue 学习总结（一）

一，前期准备
    1，vue官网地址：https://cn.vuejs.org
    2，vue组件风格：选项式（vue2)、组合式(vue3)
    3，环境准备
        vue3需要node版本在15.0以上 node -v
    4，创建node项目
        cd 到某个目录
        npm init vue@latest
        可先全部选择 No
        自定义项目名
    5，启动项目
        cd 项目目录
        npm install
        npm run dev
    6，下载开发工具及插件
        Visual Studio + Volar 插件

二，vue项目结构说明
    .vscode    -------------VScode工具的配置文件夹
    node_modules   ---------Vue项目的运行依赖文件夹
    public  ----------------资源文件夹（浏览器图标）
    src --------------------源码文件夹
    .gitignore -------------git忽略文件
    index.html -------------入口HTML文件
    package.json -----------信息描述文件
    README.md -------------- 注释文件
    vite.config.js --------- Vue配置文件

三，Vue模板语法
    创建完项目后，将 src/components目录下所有的文件删除掉，修改 App.vue项目为：
    <script>
    </script>
    <template> 
    </template>
    模板中可以定义表达式，可以直接 retun 的
    如果变量为 html格式，想要在template模板中使用，可以在标签上加入属性 v-html ，其值为定义的变量
    如 rawHtml : "<a htef="xxxxxx">百度</a>"
    然后在template中 <p v-html="rawHtml"></p>

四，指令
1，属性绑定
    标签文本引用变量  { {xx}}
    标签上引用变量 则使用属性绑定指令 如 v-bind:id="xxx"
    v-bind 可省略 即 v-bind:id="xxx" 等同于 :id="xxx"
2，条件渲染
    <div v-if="bool">哈哈</div>
    <div v-else-if="bool">呵呵</div>
    <div v-else="bool">呵呵</div>
    <div v-show="bool">拉拉</div>
    v-show 基于 样式 display来做的，而 v-if则是将标签删除或者重建
3，列表渲染
    <div v-for="item in items">{ {item}}</div>
    <div v-for="(item,index) in items">{ {item}}-{ {index}}</div>
    <div v-for="(item,index) in items" :key="index">{ {item}}-{ {index}}</div> key表示唯一索引，一般用作排序防止重新刷新渲染
    <div v-for="(item,key,index) in items">{ {item}}-{ {key}}-{ {index}}</div> 其中 item为value值，key为name即属性名，index为下标
    <div v-for="item of items">{ {item}}</div>
    <div v-for="(item,index) of items">{ {item}}-{ {index}}</div>
4，事件处理
    <button @click="count++">Add 1</button>  内联处理器
    <button v-on:click="count++">Add 1</button>  内联处理器
    <button @click="addCount">Add 1</button>  方法处理器
    
5，事件参数
    <button @click="addCount">Add 1</button>  方法处理器
    在script标签内
    addCount(e){  //Event对象就是原生js中的Event对象
        xxxxx
    }
    <button @click="addCount('hello')">Add 1</button>  方法处理器
    在script标签内
    addCount(name){  //name值为 hello
        xxxxx
    }
    <button @click="addCount(item)" v-for="item in items">Add 1</button>  方法处理器,也可传入变量
    在script标签内
    addCount(name){  //name值为 items指定变量的值
        xxxxx
    }
    <button @click="addCount(item,$event)" v-for="item in items">Add 1</button>  方法处理器,也可传入变量，加上事件且事件必须放在最后面
    在script标签内
    addCount(name,e){  //name值为 items指定变量的值
        xxxxx
    }
6，事件修饰符
    文档地址：https://cn.vuejs.org/guide/essentials/event