简介：这是一篇超简单的介绍性文章。

如果说是JQuery那就是手工艺作坊了Vue.js它就像一座工厂，尽管Vue.js做任何事JQuery两者都可以做到，但代码量和过程规范都是前者。

Vue.js的 官方中文教程 其实，它也是一个很好的教程，但与一次性掌握所有概念相比，我更喜欢先用它，然后逐步完善实际应用中没有涉及的知识点。

就像开车一样，你不需要知道发动机是如何工作的才能上路，甚至你可能一辈子都不需要知道。

好了，我们开始吧

准备

首先，我希望你已经知道或做了以下事情:

• 你会用html+css+javascript 写一些网页
• 你知道吗 DOM 和BOM(Browser Object Model)
• 你知道Vue.js是一个框架，而不是一种新的语言
• 你会使用百度公司或Google他们中的一人找到了答案

接下来，我将重点关注以下几个方面Vue.js测试和说明的基本(核心)用法逐一完成：

• 新建vue对象
• 数据绑定
• 事件绑定
• 表单控件绑定

最后，根据以上知识点结合起来，写出了我们的第一篇vuejs前端页面

新建Vue对象

1. 引用vue.js
   在桌面上创建一个。 Vue.html文件, 然后引入 vue.js的CDN地址 https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js

2. 新建Vue实例
   在Vue.html插入一个id为 firstVue 的 <div>

在Vue.html插入以下内容js代码:

然后，整个代码如下所示。:

解释代码

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 }}

变成这样

    {{my_data}}

这个双大括号的语法称为 mustache 语法方面，大括号是变量的形式。

然后在创作中 vue下面的数据声明被添加到实例的代码中。:

data:{
    my_data: "test"
}

整个代码如下所示:

    
    
    
    
          
	
    


    

    {{my_data}}
    

data 参数用于绑定VUE实例的数据变量，每个变量用逗号分隔，上面我们绑定自定义变量。 my_data ，并指定一个初始值test

完整的数据绑定， <div> 标签里的 { {myData}} 数据将随之而来。myVue实例里的 myData 由于数据的更改，浏览器会查看当前页面。,会出现test字符串，表示数据绑定成功

这是在HTML标签内的数据绑定，则如果要将HTML使用标签的特性值。 v-bind: 属性，例如，我想绑定一个标签可见的属性。(hidden)，那么就应该这样写:

{{my_data}}

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属性、任何Label属性都可以由此方法绑定。

v-bind 由于经常使用，它也可以缩写为冒号 : ，如上所述 <div> 标签可以这样写。

{{my_data}}

这是和 v-bind:hidden="my_hidden" 一种完全对等的写作方法。

至此，Vue.js编写并测试了两种绑定数据的方法。

事件绑定

v-bind: 用于绑定数据， v-on: 它用于绑定事件，例如，我想绑定一个 <button> 的 click 这件事是这样写的。

Click Me

当然，在这里 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! Im changed!"
        }
    }
})

我们在methods关键字定义clickButton方法，并更改先前定义的my_data变量的值

这与如何在vue在实例中引用data如上所示，需要添加该字段的变量。 this 只需编写稍后要引用的变量

如果不加 this ，系统将默认您想要引用全局变量，但这里我们需要引用此变量vue实例中的局部变量。

现在，整体代码和之前的一些更改如下所示：

    
    
    
    
          
	
    


    

        Click Me
        
{{my_data}}
    

好的，运行它，然后点击 Click Me 的时候"test"就会变成"Wow! Im changed!"，这是因为变量my_data的改变。

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

表单控件绑定

之前有说Vue这个框架是单向的数据传输，从。vue实例传输数据DOM ，那么我们怎么才能DOM用户输入的数据被实时获取并分配vue实例呢

这用到了Vue.js提供给用户的一种 语法糖 v-model ,此语法SUGER支持在两个步骤中反向传输数据，即从。DOM传送给vue实例数据。

如果你不理解以下原则，可以跳过它们，这不会影响后续阅读。

v-model 数据反向传输分两步实现。

第一步是绑定DOM标签的 input 事件(比如叫tapInput())

第二步，当用户进入时，触发 tapInput() 函数， tapInput() 该函数在内部读取此信息。DOM标签的Value值，已分配vue实例

通过上述两个步骤，v-model语法糖器vue数据的反向传输

好的，直接写一个例子

    
    
    
    
          
	
    


    

        
        Click Me
        
{{my_data}}
    

可以发现，我们添加了一个 <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实例变量

现在只需完善上面的代码并创建一个计数器程序即可。用户可以在输入框中输入任何数字，然后点击按钮将总数相加。

以下是刚刚对代码所做的一些小更改。我相信你能很清楚地理解它。

    
    
    
    
          
	
    


    

        
        Add
        
{{my_total}}
    

上面 v-model.number 后面的这一个 .number 这意味着在回报中。 my_step 值将自动转换integer类型，因为缺省值是string打字，所以还有一句话。

---

本文算是vue下一篇文章将是vue核心内容，组件。

前端的东西又多又杂，拼凑起来不是进步的办法。我认为最好在实际项目中使用其中一个主要分支。对于其他分支机构来说，当他们彼此见面时，看到这些文件也太晚了。举个例子，每次我FLEX布局现在应该检查语法，即使在写前端页面时，它也总是打开的。VUE官方文件随时可用。 -囧-

我会写一篇Vue.js构建SPA(Single Page Application)系列文章, 我希望初学者可以转到另一所学校。VUE人们少走弯路。

最后，请注明转载的来源，谢谢;

地址： https://www.jianshu.com/p/5d0d913d2453