您的位置: 首页  >  文章  >  Vue.js初学备忘录（三）

Vue.js初学备忘录（三）

分类: 文章 • 2024-04-07 19:16:09

官方文档：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、效果如下：

Vue.js初学备忘录（三）

二、路由配置

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的东西，详细解释可以看上面的参考文章，这里指写用法

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写方法就好了，这里页面可以直接使用，就和上面一的例子一样）

<template>
  <div id="app">

    <router-link to="/view1">Go to view1</router-link>
    <router-link to="/view2">Go to view2</router-link>
    <router-view></router-view>
    <h1>{{hw}}</h1>
  </div>
</template>

<script>
import TestCOne from './components/TestComponent1.vue'
import TestCTwo from './components/TestComponent2.vue'
export default {
  name: 'app',
  data () {
    return {
      hw: 'HelloWorld'
    }
  },
  components: {
    TestCOne, TestCTwo
  }
}
</script>

效果图如下：我们点击链接就可以看到页面下面会显示不同view的内容了

Vue.js初学备忘录（三）

相关推荐