vue路由 | 易学教程

vue入门介绍以及语法

阅读更多关于 vue入门介绍以及语法

一丶介绍 1.vue是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官方网站：https://cn.vuejs.org 2、初始Vue.js 创建文件夹vue.js 创建demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body>  <div id=app>  {{message}} </div> <script src='vue.min.js'></script> <script> //创建一个vue new Vue({ el: '#app',

Vue小结

阅读更多关于 Vue小结

一、本尊建议的学习顺序：https://zhuanlan.zhihu.com/p/23134551（侵删）二、安装： 1、安装 Node.js，可以去Node.js的官网上下载； 2、（非必选）如果想日后方便使用，安装依赖包快一点，切一下淘宝 npm 的镜像，不会的百度：切换淘宝npm镜像，就会出来一大堆，自己看！ 3、安装webpack，运行：npm install webpack -g，这里有全局安装和局部安装（区别在后面的 -g 参数），建议选全局的； 4、然后通过 vue-cli 的脚手架一步一步的搭建一个vue的项目，直到能跑起来为止。详情：https://blog.csdn.net/six_six_six_666/article/details/82633731 （侵删） 5、文件夹目录：三、部分知识整理： 1、vue单文件：以*.vue结尾的文件，最终通过webpack也会编译成*.js在浏览器运行（webpack找人来理解你的单文件代码） <style> /* pageFullScreen在index.css */ #xxxFullScreen { background-color: #eee; } </style> <template> <div class="pageFullScreen" id="xxxFullScreen"> </div> <

vue-router 基本使用

阅读更多关于 vue-router 基本使用

　　点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。　　路由中有三个基本的概念 route, routes, router。　　　　2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}] 　　　　3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。　　　　4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api. 　　 vue-router中的路由也是基于上面的内容来实现的　　在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。　　1，页面实现（html模版中）　　　　　　2， js

vue-router-基础

阅读更多关于 vue-router-基础

vue-router-基础 vue 路由的mode(模式)有几种，分别是什么？在那些环境下运行？【黄金】 hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/home history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【这个模式不常用】 hash/history 常用于浏览器端，abstract用于服务端路由的使用步骤 . 装 vue-router - yarn add vue-router 在src目录下创建一个router目录，里面创建一个index.js文件，这个目录就是router的模块引入第三方的依赖包, 并注册路由 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use( VueRouter ) //使用vue-router这个第三方插件注意： import这个关键字要放在整个文件的上层创建了一个router对象实例，并且创建路由表 const routes = [ { path: '/home'

vue-router-基础

阅读更多关于 vue-router-基础

Vue.js面试题整理（转载）

阅读更多关于 Vue.js面试题整理（转载）

一、什么是MVVM？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和Model的对象（桥梁）。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。区别：vue数据驱动

vue路由传参的三种基本方式

阅读更多关于 vue路由传参的三种基本方式

vue路由传参的三种基本方式方案一：点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。 <li v-for="article in articles" @click="getDescribe(article.id)"> getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }) // 方案一，需要对应路由配置如下： { path: '/describe/:id', name: 'Describe', component: Describe } // 在子组件中可以使用来获取传递的参数值 this.$route.params.id 方案二：父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。 this.$router.push({ name: 'Describe', params: { id: id } }) // 对应路由配置: 这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示 { path: '/describe', name: 'Describe', component: Describe } // 子组件中: 这样来获取参数 this.$route.params

Vue程序化导航---又称编程式导航

阅读更多关于 Vue程序化导航---又称编程式导航

当然还可以这样：　　　　1》this.$router.push('/home/newsinfo'+id)=====>这是router中写的path; 　　　　2》this.$router.push({path:'/home/newsinfo'+id});=======>传递对象　　　　3》this.$router.push({name:'newsinfo',params:{id:id}})====>传递路由，就是图片上那种形式那么路由中如何接收呢？来源： https://www.cnblogs.com/hou-yuan-zhen/p/11750687.html

Vue-基础(二)

阅读更多关于 Vue-基础(二)

一,Vue中的组件化开发: 　　Vue中的组件也就是Vue实例　　组件类型: 　　　　通用组件(例如,表单,弹窗,布局类等) 　　　　业务组件(抽奖,机器分类) 　　　　页面组件(单页面开发程序的每个页面都是一个组件) 　　组件开发三部曲:声明,注册,使用二.slot插槽和 ref .$parent 　　1.插槽slot 　　　　slot就是子组件里给DOM留下来的坑位,可以理解为动态的DOM 　　　　例如　　2.ref获取子组件实例　　　　-在子组件上使用属性ref="xxx" 　　　　-获取this.$refs.xxx获取元素, 　　3.$parent 可以在子组件中获取父组件的实例三.父子组件的通信　　父传子: 　　　　父用子的时候通过属性传递, 　　　　子要声明props:[属性名]来接收　　　　收到了就是自己的了,随便你用 <script type="text/javascript"> //子组件定义好了props直接用 var Child={ template:` <div> 我是子组件{{sendchild}} <button @click='sendparent'>我要反馈东西给父亲</button> </div> `,　　　　　　　//通过props属性来接收父组件传递过来的信息 props:['sendchild'], methods:{

【vue】如何跳转路由到指定页面位置

阅读更多关于【vue】如何跳转路由到指定页面位置

项目有一个需求，点击导航栏进入该页面时，进入指定的位置，刚开始用的绝对位置，没有考虑到不同的显示器，后来经过大佬的计算，实现了此功能。 .js <script> //获取浏览器高度 data() { return { height: `$ { document.documentElement.clientHeight } `, } } //后端会给一个值，来确定浏览器需要跳转到哪个位置，4个位置在正常的显示屏需要跳转的高度分别为，260,380,495,715 //此方法放置在页面加载时间中 if (vm.two == 1) { vm.y = 260 - ( 937 - vm.height ) / 7.8 ; } if (vm.two == 2) { vm.y = 380- ( 937 - vm.height ) / 7.8 ; } if (vm.two == 3) { vm.y = 495 - ( 937 - vm.height ) / 7.8 ; } if (vm.two == 4) { vm.y = 715 - ( 937 - vm.height ) / 7.8 ; } //跳转到该位置 window. scrollTo ( 0, vm.y ) ; </script> 效果进来就跳转到该位置，切换小屏也可以成功！来源： https://blog.csdn.net

订阅 vue路由