目录1. 语法1.1 配置环境1.2 基本概念补充说明1.3 父子组件传递1.4 与后端交互1.4.1 用户登录状态的维护1.4.2 前端的主要四种操作对应的api1.4.3 项目部署参考文献1. 语法本文介绍vue3的主要语法1。Vue3和React框架相似只是Vue3和普通的html页面相似而React更加抽象。1.1 配置环境终端Linux和Mac上可以用自带的终端。Windows上推荐用powershell或者cmd。Git Bash有些指令不兼容。安装vue/cli打开Git Bash执行npmi-gvue/cli启动vue自带的图形化项目管理界面vue ui1.2 基本概念script部分export default对象的属性name组件的名称components存储template中用到的所有组件props存储父组件传递给子组件的数据watch()当某个数据发生变化时触发computed通过传递一个函数动态计算某个数据。setup(props, context)初始化变量、函数ref定义变量可以用.value属性重新赋值reactive定义对象不可重新赋值props存储父组件传递过来的数据context.emit()触发父组件绑定的函数。例如context.emit(父组件的事件名参数)。{{ x }}用于取变量x的值例如template部分slot/slot存放父组件传过来的children。slot/slot等价于this.props.children。v-on:click或click属性绑定事件v-if、v-else、v-else-if属性判断v-for属性循环:key循环的每个元素需要有唯一的keyv-bind:或:绑定属性例如v-for的例子divv-forpost in posts.posts:keypost.id{{ post.content }}/divv-model的例子constcontentref();//存储非对象元素用reftextareav-modelcontent/textareav-model将textarea里的内容和变量content绑定到一起当content修改时(通过.value修改)textarea里的内容也会修改。v-bind的例子img:srcuser.photoalt加上:src后不同于src的字符串不是普通字符串而是会把字符串里的内容取值style部分style标签添加scope属性后不同组件间的css不会相互影响。例如在前端渲染的时候会将相同的样式通过[id]进行区分其中id为随机值。如h3[data-v-469af010]{margin:40px 0 0;}第三方组件view-router包实现路由功能。vuex存储全局状态全局唯一。state: 存储所有数据可以用modules属性划分成若干模块getters根据state中的值计算新的值mutations所有对state的修改操作都需要定义在这里不支持异步可以通过$store.commit()触发actions定义对state的复杂修改操作支持异步可以通过$store.dispatch()触发。注意不能直接修改state只能通过mutations修改state。modules定义state的子模块注意actions不能直接修改statemutations不支持异步补充说明vuex因为非父子组件间的通信不方便所以引入了vuex的机制如下图所示。类似于react里面的redux。当我们多个组件间需要交互数据时可以将数据放到同一个地方来维护vue的特点一个vue文件会同时包含htmljscssrouter-link :to“{name: }”/router-link绑定路由事件ref的运行效率会比reactive稍微低一些ref可以用来接受普通的变量类型 如字符串和数字reactive只能用于接受对象vuex维护全局变量通过维护一个state树实现定义初始化变量、函数可以简化setup:(){}// 简写为setup(){}路由通配符的写法{path:/:catchAll(.*)}访问参数的路由写法{path:/userprofile/:userId/,name:userprofile,component:UserProfileView}其中:userId表示通过userId来访问用户可以通过useRoute来获取userId如下所示constrouteuseRoute();console.log(route.params.userId);一边拒绝默认的事件行为一边触发自定义的事件formsubmit.preventlogin/form1.3 父子组件传递父组件调用子组件通过props子组件调用父组件通过event事件例如父组件传递子组件UserProfileInfov-bind:useruser/// 简写为UserProfileInfo:useruser/// 字符串不是普通的字符串而是一个表达式子组件接受父组件传递子组件scriptexportdefault{name:UserProfileInfo,props:{user:{type:Object,// 规定必须是对象类型required:true// 规定必须传值不传则报错}},setup(props){letfullNamecomputed(()props.user.lastName props.user.firstName);return{fullName}}}/script1.4 与后端交互与后端进行交互获得数据获取数据的方式ajax和axios推荐使用ajax1.4.1 用户登录状态的维护传统方式——基于session_id的查询session_id一般存在cookie中但跨域很难维护登录状态经典方式——基于JWT(json web token)的查询服务器不存储jwt只存储在客户端服务器可以验证jwt是否合法jwt是字符串或者json验证方式——公私钥结合通过哈希方式判断公钥和私钥的哈希结果该方法基于哈希从左到右很容易计算但从右到左很难推出私钥或者需要的推理时间很长jwt公钥的具体内容base64编码的结果access: 访问令牌有效期5分钟。通过get请求进行传递refresh: 刷新令牌有效期14天。通过post请求进行传递context里面是传一些api同步与异步早期可以认为但是不一定正确凡是访问链接的就是异步的凡是不访问链接的就是同步的1.4.2 前端的主要四种操作对应的api增删改查分别对应postdeleteputget1.4.3 项目部署通过vue ui打开网页版的界面然后点击build即可打包的index.html包括index.html两个css文件自己写的和引用第三方库的css文件两个js文件自己写的和引用第三方库的js文件参考文献Web应用课 ↩︎