本文共 2293 字，大约阅读时间需要 7 分钟。

Vue的初体验

个人博客

Vue系列

上一篇：无

下一篇：

前言

这个系列的博客是按照我学习vue的顺序来写的。视频教程是b站上coderwhy的vue教程。

Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（来自官方）

Vue的安装

打开官网，点击起步

这里可以看到很多种安装方法，因为我们是新手，所以先采用最简单的。 下载开发版本的js文件 下载完成后，我们就可以获得一个vue.js文件，将它添加到我们的项目中并引入就可以使用了

HelloVue

下面我们开始编写我们的第一个Vue程序

在项目中引入vue文件，同时创建hellovue.html文件

编写以下代码

      
       
               
   
          {
  {message}}    
   
      

这里解释以下各部分代码，首先

这句代码引入了我们刚刚的vue.js文件，这样子我们就可以在项目中使用vue了。

接下来

这里我们创建了一个Vue对象，同时给Vue的构造器传入了一个参数，这个参数是一个对象类型的。它有一个el属性，我们给它指定了一个字符串的值"#app"，我们可以看到这个写法很像css中的id选择器。接下来是一个data属性，data是一个对象，我们给这个对象指定为一个含有message属性的对象。

接下来我们再看body部分。

   
          {
  {message}}    
   

这是一个div元素，它的id是app，我们可以看到这里和我们刚刚给el赋的值是一样的，都是app，而在div中，有一个{

{message}}的值。 我们运行一下程序： 可以看到这个值并不是刚刚写的{ {message}}，而是我们写的js脚步中的vue对象的data对象的message对应的值。换句话说，就是用下图中红箭头指示的字符串去替换了{ {message}} 相当于红色箭头所指的message:"hello world"就是{ {message}},我们再来做个测试。 先看一下测试前我们网页的效果： 现在，我在控制台输入vue.message = “你好”; 我们可以看到，hello world变成了你好。 有人会疑惑了，我们刚刚定义的不是：

const vue = new Vue({      el: "#app",      data: {        message: "hello world",      },    });

按道理来说，这个message应该是data的成员，写法应该是vue.data.message，为什么你写vue.message？

这里我们可以这样子认为，data里面的成员被vue做了个代理，全都变成了vue的了，也就是说，写在data里的成员，我们都认为它是vue的成员，而不是data的成员（就是我们直接把它message看成vue的成员，而不是看成data的成员，用的时候就将它当成vue的成员来用，不要当成data的）。

Vue的简单案例

我们写一个简单的案例来体验一下Vue。

我们先写入一下代码:

      
       
               
   
      
    
0
      
    +      
    -    
   
      

我们希望点击+的时候，它加1，点击-，就减1。 将原代码修改如下：

      
       
               
   
      
    
{
  {counter}}
      
    +      
    -    
   
      

可能很多地方现在看不懂，以后的教程会解释。

先简单解释一下，和第一个程序很类似，我们这里将message改为了counter，并在add和sub中增加counter的值和减少counter的值，然后将这两个方法绑定给两个按钮。要注意,这里在methods中我们的add方法使用了this，这里和data类似，我们将写在methods中看作是vue的成员，而不是methods的成员，也就是vue.add而不是vue.methods.add，那么这里的this指的也是vue对象了，而我们说counter也是vue的属性，所以当我们调用add时，counter的值会加1。界面的值也会跟着改变。

注意

要注意的一点是,我们需要在el指定的元素中使用这种{

{}}语法才有效。也就是下面这段代码是有效的：

      
       
               
   
      
    
{
  {counter}}
      
    +      
    -    
   
      

而如果我们把div中id="app"去掉，它就没有效果了，如下：

      
       
               
   
      
    
{
  {counter}}
      
    +      
    -    
   
      

这里{ {counter}}会被原封不动的展示出来 去掉vue中的app同理。

转载地址：http://pbtzi.baihongyu.com/