Vue.js学习
前言
很荣幸的，能够在实习阶段接触到Vue.js相关的内容，指导人让我先熟悉一下Vue的基本实现。在今天的学习过程，写下一点内容方便以后阅读。
安装
Vue.js的引入类似于其他框架的引入方法，只需将Vue.js文件下载之后，在HTML的头标签里引入就行。例如：
<script type="text/javascript" src="vue.js">script>概述
Vue的模型可以参照下图：
这张图说明了Vue的作用，它扮演的角色是监听DOM操作，对数据进行绑定，能够将DOM操作和js数据很好地进行同步操作。当页面上的元素有交互引起数据变化时，Vue也能够很迅速的将变化体现在页面上。
看一个例子：
<html>
<head>
<meta charset="utf-8">
<title>Exampletitle>
<script type="text/javascript" src="vue.js">script>
head>
<body>
<div id="app">
<input v-model="newTip" v-on:keyup.enter="addTip">
<div v-for="item in tip">
<span>{{ item.text }}span>
<button v-on:click="delTip($index)">Xbutton>
div>
div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
newTip:'',
tip:[
{text:'请关注该用户'},
{text:'请多多指教'}
]
},
methods:{
addTip:function(){
var nT = this.newTip.trim();
this.newTip='';
if(nT){
this.tip.push({text:nT});
}
},
delTip:function(index){
this.tip.splice(index,1);
}
}
});
script>
body>
html>代码显示一个tip队列，在文本框内输入文字后敲击回车键提交后，会在下方队列中显示新添加的队列。而点击行数据的右侧按钮，会删除该行。
从代码中可以看出，HTML代码中绑定了id，并且在之后的代码中对js对象数据进行遍历输出，而输入框提交数据引起的数组变化，在页面上能够立即体现。而不需要人工书写DOM操作来实现页面数据刷新。同样，在页面监听事件之后，数组的添加删除同样直接引起了页面的变化，更加迅速便捷。
实例解析
HTML部分：
就拿前一个例子来说，HTML使用js数据时，在出现表达式的位置使用{{ 表达式 }}就行，需要注意的是，{{}}里面只能使用表达式，而不能是其他语句等，如果要实现判断语句则使用三元表达式。
HTML中有一些Vue特性属性，例如前面所见的以“v-”开头的特定属性。常见的一般有v-if（用于判断渲染），v-for（用于循环渲染），v-model（用于声明元素的模式），v-on（用于绑定事件）等。
v-if的用法如下：
<div v-if="bool">aaadiv>//在bool为true是才会显示“aaa”
`v-for`的用法如下：
<div v-for="item in tip">//循环显示提示信息和按钮
{{ item.text }}
v-model的用法如下：
"newTip" v-on:keyup.enter="addTip">v-on的用法如下：
Js部分：
还是按照之前的例子，代码中新声明一个Vue对象，其中el为HTML中所声明的对象，其表示整个模式所绑定的DOM元素是哪个。而data表示默认的数据内容，从页面渲染开始到数据修改等，都可以对其进行操作。methods则是对一些方法进行声明，如例子中声明addTip()和delTip()函数等。
为了区别Vue特殊变量和js原生变量，Vue通过使用$来区别。例如代码中使用$index表示下标并传递给delTip()作为参数。
而代码中的this则是指向该模块，例如：
addTip:function(){
var nT = this.newTip.trim();
this.newTip='';
console.log(this);
//返回的是Vue对象
//Vue {$el: div#app, $parent: undefined, $root: Vue, $children: Array[0], $refs: Object…}
//正如上一段所说，Vue对象属性区别于普通js变量，用$el、$parent等表示
if(nT){
this.tip.push({text:nT});
}
}总结
学的还是浅薄之处，我还在学习中，慢慢再进行总结。希望各位大神多多指教！谢谢！