2.初识vue3.0

vue提供的vue 全家桶

1. vue ---核心库
   2.vue-router --- 路由方案
   3.vuex --- 状态管理方案
   4.vue组件库 --- 快速搭建页面UI效果方案
   辅助vue开发的工具
2. vue-cli 一键生成工程化项目 -- 大而全面
3. vite 一键生成工程化项目 -- 小而精巧
4. vue-devtools 浏览器插件，辅助调试工具
5. vetur vscode 插件 提供语法高亮和智能提示

vue2.x调试工具 devtools
vue3.x调试工具 devtools
不可以混用

vue指令
1.内容渲染指令
v-text(会替换元素文本) {{}} (会与元素文本结合使用) v-html (可以渲染标签)
2.属性绑定指令
v-bind 简写:
3.事件绑定指令
v-on 简写 @
小技巧 1.可以通过事件直接拿到事件源 e ，来操作事件源身上的属性 e.target.style
2.如果事件参数被占用 如 add(a), 那么可以这样拿到事件源 add(2,$event) ,使用 add(a,e){}
事件修饰符 常用有5个
.prevent 阻止默认行为 ，如a链接跳转，表单提交等
.stop 阻止事件冒泡
.capture 以捕获模式出发当前事件处理函数
.once 绑定事件只触发一次
.self 只有在event.target 是当前元素自身时触发
4.双向绑定指令
v-model 只能配合表单元素一起使用 三个修饰符
.number 自动转为数值类型
.trim 自动过滤首尾空白字符
.lazy 在 change 而非 input 时更新 ，也就是输入框只在失去焦点时更新数据
5.条件渲染指令
v-if v-show v-else
6.列表渲染指令
v-for
注意:在 (itme,index) in itmes 中，把index值作为 :key 没有任何意义,index值不具有唯一性，会随着数据变化而变化
过滤器 filters
常用于文本格式化 如 将 hello -> Hello
<p>{{ mes | cap }} </p> // 前面是需要处理的值，后面是过滤器方法
创建过滤器 ,在与data平级创建
filters:{
cap(str){ //把首字母转为大写
return str.charAt(0).toUpperCase()+str.slice(1)
}
}
注意 -- filters 中定义的过滤器属于私有过滤器，只能在当前实例中生效
创建全局过滤器 -- filter 不带S
Vue.filter('cap',(str)=>{
return str.charAt(0).toUpperCase()+str.slice(1)
})
注意：如果全局和私有过滤器冲突，私有过滤器优先
过滤器可以串联调用,还可以传参 如
<p>{{ mes | cap | max(a,b)}} </p>
重点：过滤器功能仅仅在VUE1.0和2.0中支持，3.0剔除了过滤器功能 ，官方建议使用计算属性或方法代替
filter 方法的使用 (学习)

第二部分 -- 组件基础
1.首屏加载慢的解决方案
路由懒加载/代码压缩/CDN加速/网络传输压缩/开启GZIP
2.不利于SEO优化
SSR服务器端渲染技术

可以使用两种方式创建工程化项目   Vite   vue-cli 详细了解
使用Vite创建项目 
    npm init vite-app 项目名称
    cd 项目名称
    npm install
    npm run dev
1.把APP.vue中的模板内容渲染到index.html页面的el区域

VUE 3.0 标准用法，在main.js中

    1.从vue中按需导入createApp函数，createApp函数的作用是创建vue'单页面应用实例'
    import {createApp} from 'vue'
    2.导入待渲染的app组件
    import App from './App.vue'
    3.调用 createApp() 函数 返回值是 单页面应用程序的实例 用常量 spa_app进行接收
    同时把App组件作为参数传给 createApp 函数 表示要把app 渲染到 index.html上
    const spa_app = createApp(App)
    4.调用 spa_app 实例的 mount 方法  来指定 Vue 实际要控制的区域
    spa_app.mount('#app')
vue2.0中，仅支持单个根节点
vue3.0中 ，取消了限制，可以支持多个根节点
添加name 属性的作用，方便调试工具，可以更方便的进行调试
export default{
    name:'MyApp'
} 

style 节点的使用 （less下载）

npm i less -D
<style lang="less">
</style>