一，安装，引用Vue.js
对于我们刚入门的纯小白来讲，想要学好Vue.js，只有知道了认识了和了解了，我们才能更容易的学习起来。最简单的一句话来理解。Vue.2.0：Vue.js是构建用户界面的 渐进式框架，目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
第一步：我们要安装，引用Vue.js，因为是小白，我们先不玩复杂的东西，先不用管脚手架，和Node.js环境，从最基本的CDN引入来学习Vue.js
第二步：进入Vue.js官网，http://doc.vue-js.com/ 点击 起步 我们找到 <script src="https://unpkg.com/vue/dist/vue.js"> (注：请根据官网推出的<script>我们这里只是示例，官网是最新的CDN)
第三步：现在我们在我们创建好的文件 进入我们的 index.html 里面粘贴就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js</title>
<link rel="stylesheet" href="..//vue.js/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
</body>
</html>
这样我们就基本拥有我们的CDN了，接下来我们就可以书写我们Vue里面的内容了。
这里我们为了更方便我们书写Vue的内容我们在我们之前创建的文件夹里面在创建一个 app.js 这个单独的文件，然后我们在引入到我们的<body>里面
<body>
<script src="..//vue.js/app.js"></script>
</body>
就像上面这样我们就可以在 app.js 实例化我们Vue的对象。
二，实例化Vue对象
上面我们已经将CDN引入进来，现在我们就可以实例化Vue对象，创建一个 new Vue({}); 我们在（）里面的参数是什么呢，就是我们的对象，我们可以用我们的对象，在对我们的 index.html 进行操作。
在我们对象里面，会有什么，有el ，el就是 element 他的意思就是：需要获取的元素，一定是html中的跟容器元素 我们会在我们的Vue里面对我们DOM进行操作，我们并不会在我们的html里面写很多结构，我们在html里面只有一个跟容器，然后我们会通过我们Vue的对象，方法，属性，往我们这个跟容器里面去填充内容。
既然我们有了 el 那么我们就要在我们的 index.html 当中拥有这个跟容器
<body>
<!-- app-vue是根容器 -->
<div id="app-vue"></div>
</body>
我们有了跟容器那么我们 app.js 的 el值就是 app-vue 这样我们后面有对应的方法或者数据执行的时候就告诉了对应的 div里面去做。
new Vue({
el:"#app-vue",
});
那么接下来我们怎么给我们的div里面写内容呢，首先我们回到我们的app.js里面写另外一个参数data,那么data这个参数是干嘛的，他是：用于数据存储，那么是啥意思，就是我们在data里面设置对应的数据，比如：数字，字符串，数组，对象等等都可以，从本质上来讲我们的data是个对象，在对象里面我们的key，value是我们自己定义的。举个栗子，我们现在data里面写一个name:"南极小丑",现在我们有了一个key值和value值，现在我们就是要要做的就是怎么将我们的“南极小丑”展示到页面上去
new Vue({
el:"#app-vue",
data:{
name:"南极小丑"
}
});
目前来讲我们的div是个空的东西，那么我们在div里面写一个<h1>标签，在h1标签里面我们使用一个方法 {{ }} 两个大括号，通过这种方法我们可以拿到我们app.js里面data里面所拥有的内容，我们在两个大括号里面直接写上我们name就可以拿到里面的值。
<body>
<div id="app-vue">
<h1>{{name}}</h1>
</div>
</body>
三，数据和方法
在上面我们讲到了两个属性 el，和 data 下面这个属性是方法，在html当中我们可以调用我们Vue里面的方法，那么这个方法就是 methods，methods就是用于储存方法，和data本质也是一样是个对象，我们也可以在里面创建很多方法，举个栗子，我们在methods里面写一个打招呼的方法
new Vue({
el:"#app-vue",
data:{
name:"南极小丑"
},
methods:{
greet:function(){
return 'Good morning '；
}
}
});
上面是我们写好的方法，那么我们怎么在我们的页面上面展示我们的方法呢，其实和我们data调用的方式很相像的，只是方法有括号，属性没有括号的，接下来我们在我们的<h2>标签里面调用我们的方法
<body>
<div id="app-vue">
<h1>{{name}}</h1>
<h2>{{greet()}}</h2>
</div>
</body>
这样我们的方法就调用到我们的h2里面了，既然我们的methods是方法，那么我们的方法就可以传值，我们将我们的Good Morning改成我们的Good Afternoon，我们就可以在greet（）括号里面写Afternoon，既然我们传了一个值，那么我们methods就要接收一个值,我们给一个Day值
<body>
<div id="app-vue">
<h1>{{name}}</h1>
<h2>{{greet('Afternoon')}}</h2>
</div>
</body>
new Vue({
el:"#app-vue",
data:{
name:"南极小丑"
},
methods:{
greet:function(Day){
return 'Good' + Day ；
}
}
});
在我们方法当中很多时候我们都会应用到data里面 属性，那我们我们怎么才能拿到data里面的属性呢，通常我们会 this.data.name这样我们就拿到了data里面name的属性值，但是在我们Vue里面我们可以直接this.name我们还是举个栗子
new Vue({
el:"#app-vue",
data:{
name:"南极小丑"
},
methods:{
greet:function(Day){
return 'Good' + Day + " " + this.name;
}
}
});
以上就是我们常用的方法，这是我和大家一起分享我自己所学到的一些Vue.js的基础知识，希望看到这篇文章的各位前辈多多关照，小生有哪些错误的地方希望能够指出来，也希望其他和我一样的小白能够有所帮助。
网友评论