vue-router 基本使用

在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中。而使用vue之后,已经能够实现页面根据数据的多少动态生成。而且代码量也大幅度减少。

利用vue.js实现被选中状态的改变方法,vue.js被选中

在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中。而使用vue之后,已经能够实现页面根据数据的多少动态生成。而且代码量也大幅度减少。

html部分的代码:

<div data-role="page " class="page "> 
 <div class="center " id="app"> 
 <div class="group "> 
 <ul> 
 <li v-for = "todo in todos "> 
  <div class="groupheader "> 
  <div class="Gheadertext ">{{todo.groupheader}}</div> 
  </div> 
  <div class = "groupbody "> 
  <ul class="list "> 
  <li v-for="cell in todo.groupbody" v-on:click="exchange($event)" class="groupcell"> 
  <div class="celltext"> 
   {{ cell.text }} 
  </div> 
  <img class="selectimg" src="img/select.png%20"> 
  </li> 
  </ul> 
  </div> 
  </li> 
 </ul> 
 </div> 
 </div> 
</div> 

数据代码:

var datas = { 
 todos :[ 
 { 
 groupheader : 'MB3101', 
 groupbody:[ 
  { text: '调整不当'}, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3102', 
 groupbody:[ 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3103', 
 groupbody:[ 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 } 
 ] 
} 

js部分的代码:

new Vue({ 
 el: '#app', 
 data:datas, 
 methods:{ 
 exchange:function(event){ 
  //获取被点击的元素对象 
  var a = event.target; 
  //获取被点击元素中的子元素<img> 
  var cellimg = a.getElementsByTagName("img")[0]; 
  if(a.className == "groupcell") { 
  a.className = "selectcell"; 
  cellimg.style.display = "block"; 
 } 
 else if(a.className == "selectcell") { 
  a.className = "groupcell"; 
  cellimg.style.display = "none"; 
 } 
 } 
 } 
}) 

效果如图所示:

图片 1

以上这篇利用vue.js实现被选中状态的改变方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持帮客之家。

在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一…

  路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about
按钮,页面中就要显示about 的内容。Home按钮  => home 内容, about按钮
=> about 内容,也可以说是一种映射.
所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。 

html部分的代码:

  点击之后,怎么做到正确的对应,比如,我点击home
按钮,页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

<div data-role="page " class="page "> 
 <div class="center " id="app"> 
 <div class="group "> 
 <ul> 
 <li v-for = "todo in todos "> 
  <div class="groupheader "> 
  <div class="Gheadertext ">{{todo.groupheader}}</div> 
  </div> 
  <div class = "groupbody "> 
  <ul class="list "> 
  <li v-for="cell in todo.groupbody" v-on:click="exchange($event)" class="groupcell"> 
  <div class="celltext"> 
   {{ cell.text }} 
  </div> 
  <img class="selectimg" src="img/select.png%20"> 
  </li> 
  </ul> 
  </div> 
  </li> 
 </ul> 
 </div> 
 </div> 
</div> 

  路由中有三个基本的概念 route, routes, router。

数据代码:

    1, route,它是一条路由,由这个英文单词也可以看出来,它是单数,
Home按钮  => home内容, 这是一条route,  about按钮 => about 内容,
这是另一条路由。

var datas = { 
 todos :[ 
 { 
 groupheader : 'MB3101', 
 groupbody:[ 
  { text: '调整不当'}, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3102', 
 groupbody:[ 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3103', 
 groupbody:[ 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 } 
 ] 
} 

    2, routes
是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮
=>home内容 }, { about按钮 => about 内容}]

js部分的代码:

    3, router
是一个机制,相当于一个管理者,它来管理路由。因为routes
只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办?
就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes
中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。

new Vue({ 
 el: '#app', 
 data:datas, 
 methods:{ 
 exchange:function(event){ 
  //获取被点击的元素对象 
  var a = event.target; 
  //获取被点击元素中的子元素<img> 
  var cellimg = a.getElementsByTagName("img")[0]; 
  if(a.className == "groupcell") { 
  a.className = "selectcell"; 
  cellimg.style.display = "block"; 
 } 
 else if(a.className == "selectcell") { 
  a.className = "groupcell"; 
  cellimg.style.display = "none"; 
 } 
 } 
 } 
}) 

    4,客户端中的路由,实际上就是dom
元素的显示和隐藏。当页面中显示home 内容的时候,about
中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash
和基于html5 history api.

效果如图所示:

  vue-router中的路由也是基于上面的内容来实现的

图片 2

  在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的,我们只要把路径和组件对应起来就可以了,然后在页面中把组件渲染出来。

以上这篇利用vue.js实现被选中状态的改变方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

  1, 页面实现(html模版中)

您可能感兴趣的文章:

  • vue中改变选中当前项的显示隐藏或者状态的实现方法
  • vue绑定的点击事件阻止冒泡的实例
  • Vue.js
    点击按钮显示/隐藏内容的实例代码

    在vue-router中, 我们看到它定义了两个标签<router-link>
和<router-view>来对应点击和显示部分。<router-link>
就是定义页面中点击的部分,<router-view>
定义显示部分,就是点击后,区配的内容显示在什么地方。所以 <router-link>
还有一个非常重要的属性 to,定义点击之后,要到哪里去,
如:<router-link  to=”/home”>Home</router-link>

  2, js 中配置路由

    首先要定义route,  一条路由的实现。它是一个对象,由两个部分组成:
path和component.  path 指路径,component 指的是组件。如:{path:’/home’,
component: home}

    我们这里有两条路由,组成一个routes: 

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

  最后创建router 对路由进行管理,它是由构造函数 new vueRouter()
创建,接受routes 参数。

const router = new VueRouter({
      routes // routes: routes 的简写
})

  配置完成后,把router 实例注入到 vue 根实例中,就可以使用路由了

const app = new Vue({
  router
}).$mount('#app')

  执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的
to 属性和 js 中配置的路径{ path: ‘/home’, component: Home}  path
一一对应,从而找到了匹配的组件, 最后把组件渲染到 <router-view>
标签所在的地方。所有的这些实现才是基于hash 实现的。

 vue-cli 创建一个项目体验一下, 当然不要忘记安装vue-router

  1, 在src 目录下新建两个组件,home.vue 和 about.vue

<template>
    <div>
        <h1>home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是home 组件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>about</h1>
        <p>{{aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是about组件'
            }
        }
    }
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注