VUE--初步 II

138 阅读2分钟

一:路由---可以让根组件自动挂载各组件--不需要手动去挂载。

1.vue-router 安装: npm install vue-router. a.创建组件;b.定义路由。c.实例化vue-rounter;d.挂载;e.在根组件的模板中放置《rounter-view>《/rounter-view》-根据不同的URL地址自动挂载不同组件 (官方插件,main.js中引入,使用);

2.《rounter-link to="/home"》首页《/rounter-link》

3.重定向和别名,默认跳转:{path:'*',redirect:'/home'}

4.动态路由和get传值:

5.Vue 路由结合 请求数据:

6.编程式导航,使用JS跳转页面--列如登录页面,就不能使用路由URL来进行跳转。默认哈希模式,可以修改成history模式,需要结合后端服务器做一些配置。

7.路由的嵌套:路由里面还包含了路由。父子路由。

8.Vue UI框架:1.element UI--pc端UI ;2.Mint UI --移动端UI 饿了么公司开发。GitHub上面搜索比较好。mian.js中引入,看文档使用。看文档运行不起来的去GitHub上看demo具体使用。

9.elementUI 完全引入和按需引入。.ttf webpack解析不了这个字体文件,需要再配置一个(1.1.4版本中有些)file.loader;按需引入的好处理项目体积稍微比较小点,修改配置文件需要重新运行。

10.VueX:解决问题:1.不同组件之间的数据共享问题以及数据持久化;小项目中尽量不要使用,大型项目中VueX比较适用。四个核心方法:1.state ;2.getter; 3. ; 4. ; 首先新建VueX文件夹,然后下面新建一个store.js文件夹;然后安装VUEX;在store.js中引入VueX并且实例化;1.state 用于存储数据;mutations 里面主要是放的方法,主要用于改变state里面的数据;export default store ; 暴露出来,方便接收。 以下方法正常情况下使用不到。3.getter:在改变数据的时候可以做一些操作。4.action:类似于mutations,里面可以执行一下异步的方法。