一，属性绑定

我们上一篇已经讲过了我们Vue.js是什么，以及怎么引入和实例化Vue对象，那么这篇我们继续分享我们Vue.js属性绑定。
直接进入正题，如果我想有一个属性绑定，那么我们就要在我们的data里面写上我们的属性website:"https://www.jianshu.com/p/85e21ed7d8ce"
这是我的第一篇文章，我们希望做的是什么，我们现在要做到是我想绑定一个标签上面去，绑定在<a>标签上面，把我们的内容绑定在a标签上面，所以我们就要在我们的index.html里面创建一个标签，标签创号之后我们怎么才能绑定在上面呢，这个时候可能有人会想了我们之前不是可以用 {{ }} 来提取值吗，但是我们进去网页中检查他的元素我们会发现a标签里面的代码，原模原样的给我们显示出来了

new Vue({
        el:"#app-vue",
        data:{ 
             website:"https://www.jianshu.com/p/85e21ed7d8ce"
},
        methods:{
             
}
});

<body>
<div id="app-vue">
          <a herf="{{website}}">南极小丑</a>
</div>
</body>

Elements

<div id="app-vue">
          <a herf="{{website}}">南极小丑</a>
</div>

这上面显然不是我们想要的结果，要想得到我们想要的结果，那么我们就要用到一个绑定来修饰一下，在我们的Vue里面给我们提供了这么一个绑定，叫v-bind:v-bind后面的就是我们自己的属性，那我们来验证一下

<body>
<div id="app-vue">
          <a v-bind:herf="website">南极小丑</a>
</div>
</body>

Elements

<div id="app-vue">
     <a herf="https://www.jianshu.com/p/85e21ed7d8ce">南极小丑</a>
</div>

这样website就绑定了我们的 a 标签，当我们点击我们的“南极小丑”就会跳转到我们website所绑定的网页了，当然我们的属性绑定，不仅仅是绑定我们的p标签，我们也可以绑定其他标签，比方说我们绑定到<input>标签上面，我们继续用上一篇文章的代码

new Vue({
        el:"#app-vue",
        data:{ 
             name:"南极小丑",
         website:"https://www.jianshu.com/p/85e21ed7d8ce"
},
        methods:{
             greet:function(Day){
                      return 'Good' + Day + " " + this.name;
}
}
});

<body>
<div id="app-vue">
          <h1>{{name}}</h1>
          <h2>{{greet('Afternoon')}}</h2>
          <a v-bind:herf="website">南极小丑</a>
          <input type="text" v-bind:value="name">
</div>
</body>

同样的我们在网页上面打开的时候我们会看到input标签里面会显示“南极小丑”的字样
那么在我们这里面现在绑定的是我们的值，那我们现在想绑定我们的标签怎么办
首先我们还是在我们的data里面给个属性和值websiteA:"<a href='https://www.jianshu.com/p/85e21ed7d8ce'>南极小小丑</a>"这是一个完整的标签内容，我们现在想在网页上面显示出来，这个时候我们在给他一个标签，在标签里面我们给他一个v-html=" "引号里面就是我们需要给他的值

new Vue({
        el:"#app-vue",
        data:{ 
             name:"南极小丑",
         website:"https://www.jianshu.com/p/85e21ed7d8ce",
websiteA:"<a href='https://www.jianshu.com/p/85e21ed7d8ce'>南极小小丑</a>"
},
        methods:{
             greet:function(Day){
                      return 'Good' + Day + " " + this.name;
}
}
});

<body>
<div id="app-vue">
          <h1>{{name}}</h1>
          <h2>{{greet('Afternoon')}}</h2>
          <a v-bind:herf="website">南极小丑</a>
          <input type="text" v-bind:value="name">
          <p v-html="websiteA"></p>
</div>
</body>

这样我们就会在页面上面看到“南极小小丑”的字样我们点击字样之后我们就会看到我们想要的结果。

二，事件

什么是事件，怎么样去使用我们的事件，事件最主要的作用就是我们程序在运行过程当中不停的调用这个方法，然后去改变里面的内容，接下来我们来看看究竟怎么用这个事件，首先我们把之前的代码清空，我们只在data里面留一个age:22因为会用到，然后我们在index.html里面创建一个p标签，拿到我们data里面的属性，我们拿到属性之后呢，我们就要改变他的属性，我们就可以添加两个事件，一个是涨一岁，一个是减一岁，当我们点击涨一岁的时候我们的岁数就会往上加1，当我们点击减一岁的时候我们的岁数就会往下减一，这是我们的点击事件，我们现在就要添加一个点击事件click那我们的代码如下<buttont v-on:click="age++">涨一岁</button>

new Vue({
        el:"#app-vue",
        data:{ 
             age:22
},
        methods:{
             
}
});

<body>
<div id="app-vue">
          <button v-on:click="age++">涨一岁</button>
          <button v-on:click="age--">减一岁</button>
          <p> 我今年{{age}}</p>
</div>
</body>

上面呢我们会在页面看到两个按钮和“我今年22”这么一段字，当我们点击“涨一岁”按钮的时候我们下面的年龄会加一，当我们点击“减一岁”按钮的时候会减一，当然我们上面这样写是可以的，但是平时我们不可能在button里面写事件，如果我们碰到其他事件，我们就要写很多方法，我们现在要做的事情就是在Vue里面实现，既然要实现的话，那我们就要把age++，age--修改成add，bdd那么这个时候我们就要回到methods去写这个方法

new Vue({
        el:"#app-vue",
        data:{ 
             age:22
},
        methods:{
             add:function(){
                   this.age++; 
},
             bdd:function(){
                   this.age--;
}
}
});

<body>
<div id="app-vue">
          <button v-on:click="add()">涨一岁</button>
          <button v-on:click="bdd">减一岁</button>
          <p> 我今年{{age}}</p>
</div>
</body>

上面我们依然可以得到我们想要的结果，如果仔细观察的话，我们add是带括号的，而我们的bdd是不带括号的，其实带不带括号都是无所谓，并不影响我们结果，在这里我只是给大家展示一下，那么如果说我们带括号的话，这个括号是干嘛用的，这个括号是用来传参，就是传递参数，我们打个比方，我们刚才的减一岁我们改成减十岁，那么这个时候我们就用到了我们的括号，既然我们传递了10这个参数，那我们methods里面的add和bdd就要有一个属性接收这个值，那我们定义属性，一个叫inc 一个叫dec，代码我们如下

new Vue({
        el:"#app-vue",
        data:{ 
             age:22
},
        methods:{
             add:function(inc){
                   this.age+=inc; 
},
             bdd:function(dec){
                   this.age-=dec;
}
}
});

<div id="app-vue">
          <button v-on:click="add(1)">涨一岁</button>
          <button v-on:click="bdd(10)">减一岁</button>
          <p> 我今年{{age}}</p>
</div>
</body>

那么介个时候当我们点击“涨一岁”的时候，他会涨一岁，点击“减一岁”的时候他会减十岁。

这是我和大家一起分享我自己所学到的一些Vue.js的基础知识，希望看到这篇文章的各位前辈多多关照，小生有哪些错误的地方希望能够指出来，也希望其他和我一样的小白能够有所帮助。

前端小白学习Vue.js心得分享

前端小白学习Vue.js心得分享

一，属性绑定

二，事件