网上学习 (11)Vue
1.配置环境
1.1安装Nodejs
1.2 @Vue/cli安装
1.3启动Vue自移植的图形项目管理接口
常见问题1:在Windows上运行Vue表明该文件不能加载,显示用户权限不足。
解决方案:打开端口,输入管理员身份,输入set-ExecutionPolicy RemoteSigned,然后输入y
2.基本概念
script部分
export default对象的属性：
- 组件名称
- components：存储中用到的所有组件
- props:存储从父组件到子组件传递的数据
- watch()：当某个数据发生变化时触发
- 某些数据动态计算
- setup(props, context)：初始化变量、函数
- ref定义变量，可以用.value属性重新赋值
- reactive定义不能重新分配的对象
- props存储由母组件传递的数据
- context.emit():触发母组件绑定的函数
模板部分
<slot></slot>把父母组件保存给孩子们.- v-on:click或@click属性:绑定事件
- v-if, v-else, v-else-if属性:判断
- v-for属性：循环，:key循环的每个元素需要有唯一的key
- v-bind:或::binding属性
style部分
<style>在标签添加范围属性后,不同组件之间的css不会相互影响。
第三方组件
- View-router包:实现路由函数。
- Viewx: 存储全球状态, 仅全球.
- state: 存储所有数据，可以用modules属性划分成若干模块
- getters：根据state中的值计算新的值
- mutations：所有对state的修改操作都需要定义在这里，不支持异步，可以通过$store.commit()触发
- actions：定义对state的复杂修改操作，支持异步，可以通过$store.dispatch()触发。注意不能直接修改state，只能通过mutations修改state。
- 模块:定义状态的子模块
项目组成
- views：用于写各个页面，每个页面对应一个 view，里面也可以写组件。 components：组件。
- 路由器:路由器。
- Main.js:整个输入和根组件将根组件上传到 index.html中。
- .vue：每个页面是一个 .vue 文件，是 vue 自定义的文件类型，每个 .vue 文件都有三部分组成，分别是 html，css 和
js。每个 .vue 文件都会 export 一个对象。
3.Vue3实战
在安装插件后启动项目
在输入列中找到运行地址后,打开网页。
3.1 实现导航栏
在App中添加需要导入的视图包
将NavBar添加到组件中。 视图,html部分直接使用bootstrap:
3.2 实现内容基础组件
ContentBase是在组件之外创建的,因为有多个页面的相似部分。 view,所以你可以直接在其他页面上调用countentBase组件:
在homeview.vue中使用contentBase:
3.3写LoginView.View,未找到View.View,RegisterView.view等,并添加路径
在路由器/索引中,在js中添加路径:
添加路由后, 您可以通过点击URL目录让网页跳跃.
用路由器链接替换NavBar中的所有标签,并执行页面NavBar上的链接跳跃。
3.4 实现用户ProfileInfo 、 UserProfilePosts 和 UserProfileWrite:
用户动态主页面UserProfileView.vue:
UserProfileInfo.vue:
UserProfilePosts.vue:
UserProfileWrite.vue;