如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优。
本篇文章会大量参考Vue.js官方中文教程以及Vue-resource.js插件GitHub主页英文版(下次再写吧)
好了,开始吧
准备
首先,我有如下假设:
- 你会用html+css+javascript 写一些网页
- 你知道什么是DOM和BOM(Browser Object Model)
- 你知道Vue.js是一个框架而不是一个新语言
- 你会用百度或者Google其中之一
接着,我会围绕以下几个Vue.js的基本(核心)使用方法逐个做测试和使用说明:
- 新建vue对象
- 数据绑定
- 事件绑定
- 表单控件绑定
最后,根据上面的知识点结合起来写一个VueDemo.html
单元测试
- 引用vue.js
在桌面建立一个 Test.html , 然后引入 vue.js的CDN地址 https://unpkg.com/vue
<script type="text/javascript" src="https://unpkg.com/vue"></script>
- 新建Vue实例
在Test.html插入一个id为"firstVue"的 div
<div id="firstVue"></div>
在Test.html中插入下面js代码:
<script type="text/javascript">
var myVue = new Vue({
el:"#firstVue"
})
</script>
然后整个代码看起来是这样的:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://unpkg.com/vue"></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的引入和新建工作完成,但是如果我们访问这个页面并不能看到任何效果,一篇空白,就不截图了
- 数据绑定
VUE这个框架的数据流向是单向的,不懂没关系,记住就好了
所以数据绑定后的数据流向是从vue实例——>DOM文档的
我们在上一步的<div>
中加入下面代码:{{myData}}
这个双大括号的语法叫做mustache 语法,
然后在创建 vue的代码中加入下面数据声明:
data:{
myData:"test"
}
整个代码看起来向下面这样:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="firstVue">
{{myData}}
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:"#firstVue",
data:{
myData:"test"
}
})
</script>
</html>
完成数据绑定工作,<div>
标签里的{{myData}}
数据会随着myVue实例里的myData
数据的变动而变动,浏览器查看当前页面,会出现'test'字符串,说明数据绑定成功
这是在HTML标签内部的数据绑定,那么如果想绑定某个HTML标签的属性值,就要用到v-bind:
属性了,比如我想绑定一个标签是否可见的属性(disabled),那么就应该这么写:
<div id="firstVue" v-bind:hidden="myHidden">{{myData}}</div>
v-bind:
后面写想要绑定的属性,myDisabled
也不需要用两个大括号括起来了,直接写就可以了,然后在vue实例中声明这个绑定数据
var myVue = new Vue({
el:'#firstVue',
data:{
myData:"test",
myHidden:"hidden"
}
})
这是后再浏览这个网页,发现<div>
隐藏起来了
当然,v-bind:
不仅可以绑定hidden属性,disabled属性,style属性, color属性,凡是标签有的属性,都可以通过这个方法进行绑定
至此,Vue.js两种绑定数据的方法都写完并进行了测试
- 事件绑定
v-bind:
是用来绑定数据的,v-on:
则是用来绑定事件的,比如我要绑定一个<button>
的click
事件就这么写
<button v-on:click="tapButton()">Click Me</button>
当然这里的click可以换成任意一个html事件,比如load , doubleclick , mouseon , mousedown ,etc。
将click动作绑定到tapButton()函数之后就需要实现这个函数了,新的vue实例如下:
var myVue = new Vue({
el:'#firstVue',
methods:{
tapButton:function(){
alert("Yes!Awesome!");
}
}
})
我们在methods关键字里面定义了tapButton方法的内容,显示一个警告框。
现在整体代码和之前有些不一样,没有了数据绑定,看起来是这样的:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<button id="firstVue" v-on:click="tapButton()">ClickMe</button>
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:'#firstVue',
methods:{
tapButton:function(){
alert("Yes!Awesome!");
}
}
})
</script>
</html>
好了,运行一下,每次点击ClickMe
的时候都会触发tapButton
函数从而弹出警告框
6.表单控件绑定
之前有说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></title>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="firstVue">
<input type="text" v-model="inputData" />
<p>{{inputData}}</p>
<div>
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:'#firstVue',
data:{
inputData:""
}
})
</script>
</html>
可以看到,我们将<div id="firstVue">......</div>
代码块全部实例化成一个vue实例,然后用v-model
语法糖绑定上了inputData
变量,此时,当我们在input
输入框中输入值得时候,input
会实时将最新值(value)赋值给vue实例(myVue)的inputData
变量。
然后,我们在DOM中对inputData
变量进行了数据绑定,每次inputData
值变化的时候,就会实时展现在DOM上。
这样我们看起来实现了这么一个数据流:
DOM1(input标签)——>VUE——>DOM2(p标签)
先从用户输入的DOM1获取输入保存在VUE实例,用从VUE实例里拿到数据输出到DOM2
运行程序,像是这样:
编写
现在我用上面提到的这几点编写一个前端计数器,用户可以在输入框输入任意数字,点击按钮进行总数累加
下面贴上代码,看不懂的话翻上去再看一遍
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="firstVue">
<p><input type="number" v-model="inputNum" /><button @click="add()">ADD</button></p>
<p>{{total}}</p>
</div>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:'#firstVue',
data:{
inputNum:0,
total:0
},
methods:{
add:function(){
this.total = parseInt(this.total) + parseInt(this.inputNum);
}
}
})
</script>
</html>
总结
上面会感觉写的很啰嗦 ,下次尽量深入Vue.js的进阶内容讲一下,
嗯,在这之前会先讲一下Vue.js的插件,比如vue-resource.js,一个用来做http请求的插件,我都用它来做ajax。
作者:一杯浊酒难看红尘透
链接:https://www.jianshu.com/p/9000532590c1
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。