如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优。
Vue.js的官方中文教程其实也是一个不错的教程,不过相比于一次性把所有概念掌握,我更倾向于先会用,之后再在实际应用中把未涉及到的知识点逐步补全。
就像开车,不是非要知道发动机的工作原理才能上路的,甚至你可能一辈子也不用知道。
好了,开始吧
准备
首先,以下几点希望你已经知道或者做到了:
- 你会用html+css+javascript 写一些网页
- 你知道什么是DOM和BOM(Browser Object Model)
- 你知道Vue.js是一个框架而不是一个新语言
- 你会用百度或者Google其中之一去查找答案
接着,我会围绕以下几个Vue.js的基本(核心)使用方法逐个做测试和使用说明:
- 新建vue对象
- 数据绑定
- 事件绑定
- 表单控件绑定
最后,根据上面的知识点结合起来写出我们的第一个vuejs前端页面
新建Vue对象
- 引用vue.js
在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址 https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
- 新建Vue实例
在Vue.html中插入一个id为firstVue的<div>
<div id="firstVue"></div>
在Vue.html中插入下面js代码:
<script type="text/javascript"> var myVue = new Vue({ el:"#firstVue" }) </script>
然后整个代码看起来是这样的:
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el: "#firstVue" }) </script> </html>
解释一下代码
js变量 myVue 就是Vue创建的一个对象,可以理解成把<div id="firstVue></div>
和这个标签里面包含的所有DOM都实例化成了一个JS对象, 这个对象就是myVue
el是Vue的保留字,用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器,告诉Vue要实例化ID=“firstVue”
的这个标签。
至此,Vue.js框架在html页面的引入工作完成,但是如果我们访问这个页面并不能看到任何效果,一篇空白
数据绑定
VUE这个框架的数据流向是单向的,不懂没关系,记住就好了
所以数据绑定后的数据流向是从
vue实例——>DOM文档的
我们给上一步的<div>
标签添加下面一句话
{{ my_data }}
变成这样
<div id="firstVue"> {{my_data}}</div>
这个双大括号的语法叫做mustache 语法,大括号里面的是作为变量形式出现的。
然后在创建 vue实例的代码中加入下面数据声明:
data:{ my_data: "test" }
整个代码看起来向下面这样:
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> {{my_data}}
</div> </body> <script type="text/javascript"> var myVue = new Vue({ el:"#firstVue", data:{ my_data: "test" } }) </script> </html>
data
参数用来绑定VUE实例的数据变量,每个不同变量之间用逗号分隔,上面我们绑定了自定义变量my_data
,并赋初值'test'
完成数据绑定工作,<div>
标签里的{{myData}}
数据会随着myVue实例里的myData
数据的变动而变动,浏览器查看当前页面,会出现'test'字符串,说明数据绑定成功
这是在HTML标签内部的数据绑定,那么如果想绑定某个HTML标签的属性值,就要用到v-bind:
属性了,比如我想绑定一个标签是否可见的属性(hidden),那么就应该这么写:
<div id="firstVue" v-bind:hidden="my_hidden">{{my_data}}</div>
v-bind:
后面写想要绑定的属性,my_hidden
也不需要用两个大括号括起来了,直接写就可以了,然后在VUE实例中声明这个绑定数据
var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" } })
这时候再浏览这个网页,又变成了空白,但是F12查看源代码,发现其实是div标签的hidden属性被激活了
当然,v-bind:
不仅可以绑定hidden属性,disabled属性,style属性, color属性,凡是标签有的属性,都可以通过这个方法进行绑定
v-bind
由于经常会用到,所以也可以缩写成冒号:
,比如上面的<div>
标签就完全可以这样写
<div id="firstVue" :hidden="my_hidden">{{my_data}}</div>
这是和v-bind:hidden="my_hidden"
完全等价的一种写法
至此,Vue.js两种绑定数据的方法都写完并进行了测试
事件绑定
v-bind:
是用来绑定数据的,v-on:
则是用来绑定事件的,比如我要绑定一个<button>
的 click
事件就这么写
<button v-on:click="clickButton()">Click Me</button>
当然这里的click可以换成任意一个html事件,比如load , doubleclick , mouseon , mousedown这些,不过click肯定是我们最常用的
将click动作绑定到clickButton()函数之后就需要实现这个函数了,我们要在之前的vue实例中加入新字段methods
var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } })
我们在methods关键字里面定义了clickButton方法,并在方法内改变了之前定义的my_data变量的值
这里涉及到如何在vue实例中引用data字段的变量,如上所示,需要加this
后面直接写要引用的变量就可以了
如果不加this
,系统会默认你想引用的是一个全局变量,可是这里我们需要引用的是这个vue实例里的局部变量
现在整体代码和之前有些变化,看起来是这样的:
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> <button v-on:click="clickButton">Click Me</button> <p>{{my_data}}</p> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } }) </script> </html>
好了,运行一下,点击Click Me
的时候"test"就会变成"Wow! I'm changed!",这是因为变量my_data的改变。
另外,v-on:
语法同样有一个缩写@
,比如v-on:click="clickButton"
就等价于@click="clickButton"
表单控件绑定
之前有说Vue这个框架是单向数据传输的,就是从vue实例传送数据到DOM ,那么我们如何从DOM中实时获取用户输入的数据赋值给vue实例呢
这用到了Vue.js提供给用户的一个语法糖 v-model
,这个语法糖通过两步实现了数据的反向传递,也就是从DOM传送给vue实例数据。
下面说的原理看不懂可以跳过,不会影响后续阅读
v-model
通过两步实现了数据反向传递第一步,绑定了DOM标签的
input
事件(比如叫tapInput())第二步,当用户进行输入时候,触发
tapInput()
函数,tapInput()
函数内部读取此DOM标签的Value值,赋值给vue实例通过以上两步,v-model语法糖实现了vue数据的反向传输
好,直接写一个例子吧
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> <input type="text" v-model="my_data" /> <button v-on:click="clickButton">Click Me</button> <p>{{my_data}}</p> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } }) </script> </html>
可以发现,我们增加了一个<input>
标签,并且用v-model语法绑定了之前定义的变量my_data
这个时候,当我们在<input>
输入框输入值的时候,v-model会实时将最新值(value)赋值给vue实例的my_data
变量,而my_data
变量又将实时展现在<p>
标签中
这样我们看起来实现了这么一个数据流:
DOM1(input标签)——>VUE——>DOM2(p标签)
先从用户输入的DOM1获取输入保存在VUE实例,用从VUE实例里拿到数据输出到DOM2
运行这个页面,发现<p>
标签中的内容会随着<input>
标签实时的变化,说明我们利用v-model语法变相实现了数据的双向传递
总结
看看我们学到了什么
- 用
new Vue({})
新建vue实例 - 使用
v-bind:
和{{}}
双大括号语法在html中绑定变量 - 使用
v-on:
和@
语法绑定函数到标签的事件 - 使用
v-model:
语法使用户的页面输入反向传递回vue实例变量
现在简单完善一下上面的代码,做成一个计数器程序,用户可以在输入框输入任意数字,点击按钮进行总数累加
下面是对刚才代码进行了一些小的改动,相信你一定可以看明白的
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> <input type="number" v-model.number="my_step" /> <button v-on:click="clickButton">Add</button> <p>{{my_total}}</p> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_step: 1, my_total: 0 }, methods:{ clickButton:function(){ this.my_total = this.my_total + this.my_step
} } }) </script> </html>
上面v-model.number
后面的这个.number
的意思是说在返回my_step
值的时候自动转换成integer类型,因为默认是string类型,所以要多这么一句。
本文算是vue的基础内容,下一篇将会是vue的核心内容,组件。
前端的东西多且杂,东拼西凑总也不是进步的办法,我认为最好就是将主干的一支学明白用在实际项目中,其他的一些枝枝叉叉遇见了现看文档也是来得及的,比如我每次FLEX布局都要现查语法,甚至写前端页面的时候总是开着VUE的官方文档随时查看 -囧-
我会写出一个用Vue.js构建SPA(Single Page Application)的系列文章, 希望可以让初学、转学VUE的人少走弯路
一 基础
以上是VUE组件的官方定义,让我说的直白一点,比如<button>Click</button>
这个html的按钮就可以理解为一个组件,因为这么写就会展示出一个按钮在界面。
那么如果我写<button-demo>Click</button-demo>
界面就不会有任何显示,因为浏览器不认识这个<button-demo>
这个组件,html语法没有定义。
那么VUE的组件使我们有能通过现有的浏览器认可的组件自定义一个像是<button-demo>
这样的组件的显示方式和内部运行逻辑。
举个栗子:
Vue.component('button-demo',{ template:'<button>Hello here!</button>' })
通过Vue注册一个叫做'button-demo'的组件,这个自定义组件是由<button>Hello here!</button>
组成的。
可以这么理解,注册了'button-demo'以后,<button-demo></button-demo>
就等价于<button>Hello here!</button>
看一下演示效果
这里需要注意下,通过Vue注册的组件只能在Vue的注册范围内用,就像演示里面一样,必须要<div id="app"></div>
里面用。
二 进阶
VUE组件当然不可能就只能组合组合html标签,每一个VUE组件对相当于一个VUE实例,在组件内可以定义方法,数据,甚至可以引用其他组件
//定义button-counter组件 Vue.component('button-counter',{ //定义数据 data:function(){ return { count: 0 } }, //定义方法 methods:{ clickAdd: function(){ this.count++ } }, template:'<button @click="clickAdd">You clicked me {{count}} times</button>' })
看一下演示效果
这里需要注意的是data
并不是像这样直接提供一个对象:
data: { count: 0 }
取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝(看不懂记住就好,以后慢慢理解):
data: function(){ return { count: 0 } }
三 全局注册与局部注册
上面我们注册的是全局组件,也就是在整个VUE根实例中注册的,也可以理解为调用了VUE的静态方法注册的,这样注册的组件是可以在任何VUE实例中使用的。
不过这样也会带来作用域冲突的麻烦,比如我分别注册了一个前端HOME
组件和一个后端ADMIN
组件,又想注册两个HEAD
组件分别用在HOME
和ADMIN
组件里面,代表前台后台不同的页头,这时候如果是全局注册为了区分不同的HEAD
组件,我可能就需要为他们起两个名字,分别叫HOME_HEAD
和ADMIN_HEAD
。
但是局部组件注册就允许用户把自定义组件的作用域限制在父级VUE实例中:
//component-a是一个全局组件 Vue.component('component-a',{ template:'<div><p>这里是全局组件</p><component-b></component-b></div>', //使用components在父组件中注册局部组件 components:{ 'component-b': { template:'<button>这是一个局部组件</button>' }, } })
可以看到,我们把在component-a
组件里使用了关键字components
注册了一个局部组件component-b
并且嵌入了component-a
的模板语法中。
四 注意问题
单个根元素
注意上面局部组件的那个例子,全局组件component-a
的模板字符串是被一个<div>
标签完全包裹起来的,是因为VUE规定每个组件必须只有一个根元素,所以不管你的组件由多少子元素组成,最外层都只有有且只有一个元素。
合理组织代码结构
同样是局部组件的那个例子,如果向下面这样写会不会更清楚明白一些:
//定义component-b组件变量 component-b = { template: '<button>这是组件B</button>' } //定义component-a组间变量,并引用component-a变量 component-a = { template : '<div><p>这是组件A</p><component-b></component-b></div>' components: { 'component-b':component-b
} } //在Vue实例中注册component-a局部组件 //虽然component-a实在Vue实例中注册,但是如果此Vue实例 //是整个程序的跟实例,那也component-a也相当于进行了全局注册 new Vue({ el: '#components-demo', components: { 'component-b': component-a
} })
上面的代码将每个组件的代码赋值给了不同的变量,这样如果某个组件有变化,只用修改相应的变量,而不需要修改所有引用此变量的方法,实现了松耦合的编程思想。
特殊元素特殊对待
有些 HTML 元素,诸如 <ul>
、<ol>
、<table>
和 <select>
,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>
、<tr>
和 <option>
,只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:
<table> <blog-post-row></blog-post-row> <!--table元素中只允许包含<th>,<tr>等元素--> </table>
这个自定义组件 <blog-post-row>
会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法:
<table> <tr is="blog-post-row"></tr> </table>
这样<blog-post-row>
这个自定义组件就会正常渲染。
如果你使用单文件组件的话(就是.vue
后缀的文件),这一条可以忽略
总结
作为一个轻量级的JS前端框架,
我认为这两章的内容就已经涵盖使用VUE最核心的语法和思想了。
还是那句话,学习一个框架,最有效的方法就是实践,不需要把所有文档看一个遍再去写程序,因为真正写程序的时候,你还会翻看无数遍框架文档。
直到现在,我在写VUE程序的时候,左边的屏幕是编辑器,右边的屏幕就是VUE的官方文档。
- 数据绑定
- 事件绑定
- 用户输入获取
- 组件定义和使用
上面四大知识点已经足够支撑我们写出一个差不多的VUE程序了。
视频教程:https://learning.dcloud.io/
版权声明:《 vue.js简明教程 》为王健原创文章,转载请注明出处!
最后编辑:2020-7-18 15:07:02