vue入门

简介

这是一篇炒鸡简单的入门文章

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

好了，开始吧

准备

首先，我有如下假设:

你会用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'字符串，说明数据绑定成功

v-bind:

这是在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:

当然，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函数从而弹出警告框

v-on:

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

运行程序，像是这样：

v-model

编写

现在我用上面提到的这几点编写一个前端计数器，用户可以在输入框输入任意数字，点击按钮进行总数累加
下面贴上代码，看不懂的话翻上去再看一遍

<!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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

posted @ 2018-01-19 15:09 devWzhan 阅读(498) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

devWzhan

vue入门

简介

准备

单元测试

编写

总结

公告