vue构建用户界面的前端框架
构建用户界面:指令 数据驱动视图 事件绑定
前端框架:构建用户界面一整套的解决方案 vue全家桶（vue+vue-router+vuex+组件库）辅助开发工具（vue-cli + vite+ vue-devtools）
vue的特性
数据驱动视图（监听数据变化，自动重新渲染页面）单向数据绑定 双向数据绑定
MVVM是实现数据驱动视图和双向数据绑定的核心原理 view viewmodel model
vue2和vue3的区别
vue3支持vue2的大部分API，新增了新特性（组合式API 更好的typescript的支持） 废弃了过滤器，不支持$on $off $onde等实例方法
基本使用
1.导入vue.js的script脚本
2.在页面声明一个将要被vue所控制的DOM区域
3.创建vm实例对象（vue的实例对象）
<body>
//将要被vue所控制的DOM区域
<div id=app>{{name}}</div>
//导入脚本
<script src='/vue.js'></script>
<script >
//创建vm实例对象（vue的实例对象） viewmodel
const vm=new Vue({
//使用el属性指定vue要控制的区域 view
el：'#app'
//数据源 model
data：{
name：'zs'
}
})
</script>
</body>
指令
内容渲染指令 v-text <p v-text="b">a</p> b数据会覆盖默认内容 a
{{b}} 插值表达式 不会覆盖默认内容
v-html 可以渲染标签
属性绑定指令 v-bind <p v-bind:a="b">w1</p> 动态绑定属性 简写 : <p :a="b">w1</p>
表达式运算 {{ ok? 'true' : 'false'}} {{number + 1}} {{ message.spilt('') }} <p :id=" ' list-' + id">w1</p>
事件绑定指令 v-on v-on:click v-on:onput <p v-on:click="fun">a</p> 简写 <p @click="fun">a</p>
事件对象event 事件不传形参的时候，fun（e）e是默认事件，可以使用e.target 获取当前事件元素
事件传形参 fun（step，$event) 传事件对象必须是$event
事件修饰符 .prevent 阻止默认行为（阻止a链接的跳转 阻止表单提交）
.stop 阻止冒泡
.capture 以捕获模式触发当前的事件处理函数
.once 绑定的事件只触发一次
.self 只有在event.target是当前元素自身触发事件的处理函数 点谁触发谁不会触发冒泡
按键(键盘)修饰符 .enter 监听按下enter键
.esc 监听按下esc
v-model双向数据绑定 修饰符 .number 自动把用户输入的数据转换成数字型
.trim 去除两端空格
.lazy 在chang时而非在input时更新
条件渲染指令（控制页面元素的显示和隐藏） v-if 动态创建或移除DOM元素 切换开销 运行条件少时使用
v-show 动态添加或移除 style="diaplay:none”初始渲染开销 频繁切换时使用
v-if v-else-if v-else
列表渲染指令 v-for="(item,index) in list" <li v-for="(item,index) in list">{{item}}{{index}}</li>
key属性 列表渲染时，默认情况vue会尽可能复用已存在的dom，从而提升渲染性能，但是会导致有状态的列表无法被正确更新，为了给vue一个提示，
以便更新每一个节点，从而保证有状态的列表被正确更新的前提下，提升渲染性能，需要为每项提供一个唯一的key属性
注意：key只能是number或者string类型 key值唯一性(不建议使用index作为key值) 使用v-for一定使用key
过滤器（vue3前版本） （Filters）常用文本格式化 过滤器可以串联的调用多个管道符
{{mesage | cap}} v-bind:id="mesage | cap" 管道符
filters：{ //在filters节点下定于 "过滤器”
cap（str）{ // str 当前过滤器管道符前面的值 处理函数的的第一个参数永远都是当前过滤器管道符前面的值
return str+1
}
}
全局过滤器 Vue.filter('cap',(str)=>{return str +1 }) 两个参数 参数1：全局过滤器名称 参数2：全局过滤器的处理函数
过滤器传参 {{mesage | cap（5）}} Vue.filter('cap',(str,len)=>{return str +len }) 处理函数的的第一个参数永远都是当前过滤器管道符前面的值 ，第1个后面为传的参数
find() array.find(function(currentValue, index, arr),thisValue) 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
filter() array.filter(function(currentValue,index,arr), thisValue) 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
单页面应用程序
SPA单页面应用程序优点：
良好的交互体验
单页面应用的内容的改变不需要重新加载整个页面
获取数据也是通过Ajax异步获取
没有页面之间的跳转，不会出现 白屏现象
良好的前后端工作分离模式
后端专注提供API接口，更易实现API接口的复用
前端专注页面的渲染，更利于前端工程化发展
减轻服务器压力
服务器只提供数据，不负责页面的合成和逻辑的处理，吞吐能力提高几倍
SPA单页面应用程序缺点：
首屏加载慢
解决：路由懒加载
代码压缩
CDN加速
网络传输压缩
不利于SEO
解决：SSR服务器渲染
创建SPA项目
vite：仅支持vue3 不基于webpack 运行速度快 功能小而巧
vue-cli ：支持vue3 vue2 基于webpack 运行速度慢 功能大而全
vite创建项目:
npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev
main文件：
1、导入createApp函数 import { createApp } from 'vue'
2、导入待渲染App.vue组件 import App from './App.vue'
3、调用createApp函数，创建SPA应用实例 const app=cteateApp(App)
4、调用mount()函数，把App组件的模板结构渲染到 index.html的el区域中 app.mount('#app')
template:
vue2支持一个根节点 vue3支持多个根节点
script：
export default{}
style：默认lang='css'
lass的安装 npm i less -D
组件：
组件的注册使用:
全局注册：在mian文件的app实例中 用 app.component('组件名称'，组件） app.component('my-swiper',Swiper)
<my-swiper></my-swiper>
局部注册：在script的节点下 components：{my-swiper'：Swiper} 键值对
组件之间的样式冲突：
原因：默认情况下，写在 .vue组件中的样式会全局生效，因此很容易出现组件之间的样式冲突问题，原因是单页面应用程序中，
所有的DOM结构都是基于唯一一个index.html页面进行呈现的，每个组件的样式都会影响index.html页面中的DOM元素
解决：1：为style节点添加 scoped属性 <style scoped></style>
2:在每个组件的每个标签中添加 data-001等属性 <p data-v-001></p> 在style中使用 p[data-v-001] {} 写样式
/deep/样式穿透：
如果给当前组件的style添加scoped属性，则当前组件的样式对其子组件是不生效的。如果想让去某些样式对子组件生效，
可以使用/deep/深度选择器
.title { color：blue} 不加 /deep/时，生成的选择器格式为 .title[data-v-001]
/deep/ .title { color：blue} 加 /deep/时，生成的选择器格式为 [data-v-001] .title
/deep/是vue2实现的样式穿透的方案，在vue3中推荐使用 :deep() 代替/deep/
:deep( .title) { color：blue}
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
