Vue.js初学备忘录（三）

最新推荐文章于 2023-02-12 01:34:30 发布

星旅zl

最新推荐文章于 2023-02-12 01:34:30 发布

阅读量336

点赞数

分类专栏： JS相关

本文链接：https://blog.csdn.net/nzzl54/article/details/86737444

版权

JS相关专栏收录该内容

18 篇文章 0 订阅

订阅专栏

官方文档：https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

参考文档：https://www.cnblogs.com/dreling/p/6892684.html

摸索中前进...我借鉴了上面这篇文档的路由配置，还是一点一点coding吧

一、简单了解一下vue的方法

1、index.html，这里重点看app1和app2里面的方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test-pro2</title>
  </head>
  <body>
    <div id="app">
      <!--真实代码不写这里，写在App.vue即可-->

    </div>
    <div id = "app1">
      <input v-model="message"/>
      <button v-on:click="show">点我</button>
    </div>
    <div id = "app2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>

  </body>
  <script>

  </script>
</html>

2、main.js里面加入上面对应的两个关联方法

new Vue({
  el: '#app1',
  data: {
    message: 'Hello world'
  },
  methods: {
    show: function () {
      alert('run...' + this.message)
    }
  }
})

new Vue({
  el: '#app2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

3、效果如下：

二、路由配置

1、在components文件夹下新建两个组件vue:TestCompoent1.vue 和 TestComponent2.vue

<template>
  <div class="testcone">
    <h1>{{ msg }}</h1>
    <h2>{{p1}}</h2>
  </div>
</template>

<script>
export default {
  name: 'testcone',
  data () {
    return {
      msg: 'This is TestComponent1',
      p1: '111111'
    }
  }
}
</script>

<style>
</style>

<template>
  <div class="testctwo">
    <h1>{{ msg }}</h1>
    <h2>{{p1}}</h2>
  </div>
</template>

<script>
export default {
  name: 'testctwo',
  data () {
    return {
      msg: 'This is TestComponent2',
      p1: '222222'
    }
  }
}
</script>

<style>
</style>

2、在scr下新建router.js文件，这里还需要命令行去安装router的东西(

终端安装 vue-router。

cnpm install vue-router --save

)下面写用法

（划重点：如果不想新建router.js，可以在Vue提供了路径src/router/index.js,直接加入下面代码，然后在main.js添加引入import router from './router/index.js'）

npm install vue-router --save

import Vue from 'vue'
import Router from 'vue-router'
import TestComponent1 from '@/components/TestComponent1'
import TestComponent2 from '@/components/TestComponent2'

Vue.use(Router)

export default new Router({
  linkActiveClass: 'active',
  // 路由配置
  routes: [
    {
      path: '/view1',
      name: 'TestComponent1',
      component: TestComponent1
    },
    {
      path: '/view2',
      name: 'TestComponent2',
      component: TestComponent2
    },
    {
      path: '/',
      component: TestComponent1
    }
  ]
})

3、修改main.js:

//注意：默认为./router
import router from './router.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)
})

4、在App.vue中（注意一点，在index.html中不需要写什么new Vue，只引用组件就好；new Vue在main.js写方法就好了，这里页面可以直接使用，就和上面一的例子一样）

<router-link to="/view1">Go to view1</router-link>
<router-link to="/view2">Go to view2</router-link>
<router-view></router-view>
</div>
</template>

效果图如下：我们点击链接就可以看到页面下面会显示不同view的内容了（显示在<router-view></router-view>里面）

三、接着上面，如果想要在<router-view></router-view>显示别的内容

1、在components文件夹下新建组件Fine.vue

<template>
  <div class="fine">
    <h1>{{ msg }}</h1>
    <h2>{{p1}}</h2>
  </div>
</template>

<script>
export default {
  name: 'fine1',
  data () {
    return {
      msg: 'This is a component name Fine',
      p1: 'fine!!'
    }
  }
}
</script>

<style>
</style>

2、在router/index.js下添加该组件

{
path: '/fine',
name: 'Fine',
component: Fine,
meta: {
title: '测试页面'
}
}

3、打开连接http://localhost:8099/#/fine，可以看到<router-view></router-view>里面内容不一样了

这里通篇都是在修改App.vue，实际上直接用新建项目建好之后的默认的HelloWorld.vue来改就行了（本来App.vue就是引用了HelloWorld.vue组件）

只要设置它在路由里为默认页就可以了

{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}

星旅zl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js初学备忘录（三）

官方文档：https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5参考文档：https://www.cnblogs.com/dreling/p/6892684.html摸索中前进...我借鉴了上面这篇文档的路由配置，还是一点一点coding吧一、简单了解一下vue的方法1、index.html，这里重点看app1和app2里面的方法...
复制链接

扫一扫