VUE和VUE路由的介绍和基本使用

一、Vue的介绍和基本使用

1、新建vue对象

2、数据绑定

3、事件绑定

4、表单控件绑定

 

1、新建vue对象

 

 

 

1.1引用js
首先在html文件中引入 vue.js的文件，或者CDN地址 

1.2需要一个独立id的标签，用于创建Vue对象

1.3new vue进行实例化

js变量 myVue 就是Vue创建的一个对象，可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象，

这个对象就是myVue，el是Vue的保留字，用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器，告诉Vue要实例化ID=“firstVue”的这个标签。

至此，就完成了一个简单的vue对象的创建，但是如果我们访问这个页面并不能看到任何效果,一篇空白

 

2、数据绑定

 

 

2.1我们给上一步的<div>标签添加下面一句话 {{my_data}}

这个双大括号的语法叫做mustache 语法，大括号里面的是作为变量形式出现的

2.3然后在创建 vue实例的代码中加入数据声明:

data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔，上面我们绑定了自定义变量my_data，并赋初值'test'

完成数据绑定工作，<div>标签里的{{myData}}数据会随着myVue实例里的myData数据的变动而变动，浏览器查看当前页面,会出现'test'字符串，说明数据绑定成功

 

 

 上面是对HTML标签的数据绑定，那么如果想绑定HTML标签的其他属性值，比如绑定是否可见的属性(hidden)，就要用到v-bind:属性了，那么就应该这么写:

 

 

 

 

 

 

 

 

 

当然，v-bind:不仅可以绑定hidden属性，disabled属性，style属性, color属性，凡是标签有的属性，都可以通过这个方法进行绑定

或者绑定一个title属性

 

 

 

3、事件绑定

v-bind:是用来绑定数据的，v-on:则是用来绑定事件的，v-on可以绑定load , doubleclick , mouseon , mousedown

比如我要绑定一个<button>的 click事件就这么写

 

 

 将click动作绑定到clickButton()函数，之后就需要在vue中实现这个函数了,需要在之前的vue实例中加入新字段methods，进行事件操作

 

 

 

对this的说明：如果需要在vue实例中引用data字段的变量，需要加this后面直接写要引用的变量就可以了

如果不加this，系统会默认你想引用的是一个全局变量

另外，v-on:语法同样有一个缩写@，比如v-on:click="clickButton"就等价于@click="clickButton"

 

4、表单控件绑定

例如：从DOM中实时获取用户输入的数据赋值给vue实例。

这用到了Vue.js提供给了v-model ,这个语法将数据从DOM传送给vue实例数据。

代码中，增加了一个<input>标签，并且用v-model语法绑定了之前定义的变量my_data

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

当我们在<input>输入框输入值的时候，v-model会实时将最新值(value)赋值给vue实例的my_data变量，而my_data变量又将实时展现在<p>标签中

 

 

二、Vue路由的介绍和基本使用

Vue 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue 可以实现单页面多视图的 Web 应用SPA（single page web application）

Vue.js 路由需要载入vue-router 库

效果：

 

 1、引入 vue.js 和 vue-router.js

 

 
2、定义 Main、Message、Mine 组件

 

 

组件显示在 <router-view /> 标签中

 

3、声明路由规则

 

 

声明路由规则，把路径所对应要跳转的组件先定义出来，相当于一个配置项 ，到时候浏览器根据对应的路由，显示对应的组件

 

4、创建 router 实例

 

 

创建 router 实例，并把 路由规则routes 传递进去

 

5、注册 router「把 router 实例注入到指定的挂载点下」

 

 

路由定义完成。

 

结束语：

如果说是JQuery是手工作坊，那么Vue.js就像是一座现代化工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是vue较优。