refs的基本用法,深入理解vue路由的使用

本身近年在商量vue 的路上,看到了vue
$refs的用法,那么前几日也算个上学笔记吧!

<div id="app">
    <input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>

<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>
<div id="app">
    <input type="text" ref="input1" class="input1"/>
    <button @click="add">添加</button>
</div>

<script>
new Vue({
    el: "#app",
    methods:{
        add:function(){
          this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>

vue-router是Vue.js官方的路由插件,它和vue.js是深浅集成的,适合用来构建单页面应用。vue的单页面应用是依附路由和组件的,路由用于设定访谈路线,并将路线和零部件映射起来。守旧的页面使用,是用部分超链接来落到实处页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也正是组件的切换。

<div id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</div>


<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

一般来说,获取DOM元素,需document.querySelector(”.input1″)获取那几个dom节点,然后在获得input1的值。

一般来说,获取DOM元素,需document.querySelector(”.input1″)获取这些dom节点,然后在取得input1的值。

正文将以示范的款式来介绍vue-router的逐个脾气,一共满含6个示范,种种示例都有乞讨的人版,前5个示范有圣上版。
乞讨的人版是将享有代码混杂在一同的HTML页面,主公版是依赖vue-webpack-simple模板创设的。

一般来讲,获取DOM成分,需document.querySelector(”.input1″)获取这么些dom节点,然后在获得input1的值。

但是用ref绑定之后,我们就无需在得到dom节点了,直接在上头的input上绑定input1,然后$refs里面调用就行。

不过用ref绑定之后,大家就没有须要在获得dom节点了,直接在上头的input上绑定input1,然后$refs里面调用就行。

首先个单页面应用(01)

只是用ref绑定之后,我们就没有需求在获得dom节点了,直接在上边的input上绑定input1,然后$refs里面调用就行。

refs的基本用法,深入理解vue路由的使用。下一场在javascript里面这么调用:this.$refs.input1
 那样就足以减去获取dom节点的损耗了

接下来在javascript里面这么调用:this.$refs.input1
那样就足以减去获取dom节点的费用了

现今我们以二个轻松的单页面应用开启vue-router之旅,这一个单页面应用有多个门路:/home和/about,与那五个路子对应的是多个零件Home和About。

下一场在javascript里面这么调用:this.$refs.input1 
那样就能够减去获取dom节点的损耗了

图片 1

如上正是本文的全部内容,希望对咱们的学习抱有援助,也可望我们多多援救脚本之家。

1. 开立组件

你可能感兴趣的稿子:

  • 浅谈Vue.js中ref
    ($refs)用法举个例子总括
  • vue中使用refs定位dom出现undefined的消除方式
  • Vue
    2.0就学笔记之使用$refs访谈Vue中的DOM
  • vue组件
    $children,$refs,$parent的使用详解
  • 消除vue里碰着 $refs
    的难点的点子
  • vue中$refs的用法及功效详解

第一引进vue.js和vue-router.js:

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

然后创建两个组件构造器Home和About:
var Home = Vue.extend({
 template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
 data: function() {
 return {
  msg: 'Hello, vue router!'
 }
 }
})

var About = Vue.extend({
 template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

2. 创建Router

var router = new VueRouter()

调用构造器VueRouter,成立一个路由器实例router。

3. 映射路由

router.map({
 '/home': { component: Home },
 '/about': { component: About }
})

调用router的map方法映射路由,每条路由以key-value的样式存在,key是门路,value是组件。

举个例子:’/home’是一条路由的key,它意味着路线;{component:
Home}则意味该条路由映射的机件。

4. 使用v-link指令

<div class="list-group">
 <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
 <a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

在a成分上应用v-link指令跳转到钦赐路径。

5. 使用<router-view>标签

<router-view></router-view>

在页面上运用<router-view></router-view>标签,它用于渲染相配的零部件。

6. 运行路由

var App = Vue.extend({})
router.start(App, '#app')

路由器的周转必要贰个根组件,router.start(App, ‘#app’)
表示router会创设二个App实例,何况挂载到#app元素。

瞩目:使用vue-router的运用,不要求显式地制造Vue实例,而是调用start方法将根组件挂载到某些成分。

图片 2

 当您从GitHub上获得到最新的源代码后,借使想运营天皇版,以demo01为例,在Git
Bash下实行以下命令:

npm run demo01-dev

图片 3

然后在浏览器中访谈地址

假使要编写翻译和揭橥,请在Git Bash下施行以下命令:

npm run demo01-build

编排单页面包车型客车步调

地方的6个步骤,能够说是成立八个单页面应用的基本步骤:

图片 4

JavaScript

1.创造组件:创制单页面应用须求渲染的机件

2.创立路由:创立VueRouter实例

3.映射路由:调用VueRouter实例的map方法

4.初步路由:调用VueRouter实例的start方法

HTML

1.使用v-link指令

2.使用<router-view>标签

router.redirect

动用在第三次运行时入手是一片空白,应用一般都会有三个首页,譬喻:Home页。

利用router.redirect方法将根路线重定向到/home路径:

router.redirect({
 '/': '/home'
})

router.redirect方法用于为路由器定义全局的重定向准则,全局的重定向会在合营当前路径在此以前施行。

实践进度

当用户点击v-link指令成分时,大家得以大概猜度一下那中档产生了如何事业:

  1. vue-router首先会去搜求v-link指令的路由映射
  2. 然后依据路由映射找到相配的组件
  3. 最后将零件渲染到<router-view>标签
网站地图xml地图