标签：lock 静态 绑定 标签 而且 link pyc charm tab
安装环境
1 到官网下载node安装包，并安装
2 然后在安装换源
3 在安装脚手架
创建项目
1 先cd到你要创建项目的文件夹
2 执行命令 vue create 项目名称
3 初始化项目
1 进去过后，选着第二个，然后添加sorte，router，点回车
2 然后一直选第一个，有提示输入又或者n的，就选着大写的
3 在pycharm中添加项目，先找到项目文件夹，然后在设置npm然后就是添加run server
注意dote 和npm的环境一定要对
4 组件中，必须要导出 export default，小组件中是不需要写东西得，当视图组件中是不需要注册小组件的，而且还要先导入小组件文件，然后在export default中的components中注册
5 全局脚本文件main.js中就是跟组件
里面需要挂摘点，和路由和，还有返回函数render，然后就可以到app.vue中
6 生命周期
1 先是在main.js中启动项目
2 然后就是在router.vue中提供路由服务，在跟组件中必须要有router-view这个标签，所有的视图组件都会通过这个标签渲染，
3 如果请求的链接改变，就会重新匹配路由，然胡重新渲染页面
7 全局样式，我们先在静态文件夹中写一个css文件样式，然后在main.js中配置导入
import ‘@文件路径’
8 新增视图组件
1先在视图组件中template中写出自己的样式
3 最后将小组件的导入到视图组件中，完成注册就可以了
9 生命周期钩子函数，created 在组件创建完成过后执行，beforcreate 在组件创建之前执行
10 导航条，光标渲染
逻辑渲染，应为我们是给li绑定的事件，所以我们点击的是li，但是li是不会跳转页面的
实际上跳转页面的还是a标签router-link标签
我们通过点击事件然后通过this.$router.push(路径)就可以跳转这个页面
为什么不能给data中的变量赋值，应为当我们点击其他的标签是，就会重新渲染data中的值，使其再次为空
然后我们用了钩子函数create当组件渲染完毕过后在将该路径拿到，让钩子函数通过this.$route.path拿到当前访问的路径，在赋值给data中的变量，让它与template中的li中的：class=‘{active：i===‘/’}’去判断，如果有这个li就有光标了
这里的template中的逻辑就是我们让我们的文本通过router-link这个渲染的a标签来跳转
然后就是通过么一个li绑定点击事键，将路径传给事件函数，然胡就是同归data中的变量与class属性来比较
标签：lock 静态 绑定 标签 而且 link pyc charm tab
原文地址：https://www.cnblogs.com/cherish937426/p/11651419.html
