今天开始学习Vue.js，Vue框架是一套用于构建用户界面的渐进式框架。

我们为什么要用vue.js原因：

1.Vue.js是一个强大的数据处理框架，能够很好的提升前端的开发效率。

2.在国内很多企业都用vue.js开发前端项目，需求量非常大。

3.Vue.js的文档非常详细，生态也非常丰富，要找到的资料也非常多、全，容易学习。遇到的问题也很容易在网上查到。

vue框架的环境

首先要先搭建Vue框架的环境才能使用Vue.js。我们的Vue框架环境比较简单，如果你的项目已经上线的话建议使用cdn加速器的方式引用，或者使用npm命令（node.js），初学的话建议直接引入Vue.js脚本。代码如下：

<script src="js/vue.js"></script>

环境这样就算是搭建好了。下面来体验一下Vue.js的方便和功能强大之处。

声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM系统。示例代码如下：

html代码：
<div id="app">
  {{ message }}
</div>

js代码：
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

这样我们就成功创建一个Vue应用了。我们的数据都是响应式地，代码执行后在控制台直接修改message的值页面也会随之改变。

v-bind指令

我们还可以使用v-bind绑定元素特性。示例代码：

html代码:
<h3>v-bind单向绑定数据</h3>
 <div>
   <span v-bind:title="message">悬停几秒查看悬停信息</span>
</div>

js代码：
var app=new Vue({
el:"#app",
data:{
 message:"hello vue.js"
}

运行后当我们的鼠标悬停在文本时会提示信息hello vue.js  你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

v-model 指令

v-model是双向绑定数据的指令，这样对用户的体验度较高，前端数据改变会改变后台数据，后台数据改变前端也会随之改变，这种叫双向绑定数据。示例代码如下：

html代码：
<h3>v-model双向绑定数据</h3>
<div>
 <p>{{model}}</p>
<input type="text" v-model="model">
</div>
js代码：
var app=new Vue({
el:"#app",
data:{
    model:"双向绑定数据",
}

上述代码执行后，当我们在输入框输入文本时p标签的文本也会随之改变。结果如下：

v-if指令

v-if条件可以控制一个元素的显示隐藏，代码如下：

html代码：
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
js代码：
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

当我们的seen值为true是元素会显示，为false时会隐藏。

v-for指令

v-for指令可以绑定数组数据来渲染到页面中。示例代码如下：

html代码：
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
js代码：
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

示例结果如下：

v-on绑定事件与方法

我们的v-on可以绑定事件与方法，比如绑定一个点击事件，示例代码如下：

html代码
<h3>v-on绑定事件与方发</h3>
<div>
   <span>{{reverse}}</span>
  <button type="button" v-on:click="reverseFunction">reverse颠倒逆序</button>
</div>
js代码：
var app=new Vue({
el:"#app",
data:{
   
},
methods:{
    reverseFunction:function(){
        this.reverse=this.reverse.split("").reverse().join("") //split()根据空白符分裂在逆序在连接最后赋值给reverse
    }

上述代码执行后是把span标签的文本内容拆分，颠倒逆序，再连接。结果如下：

最后我们通过一张图来了解一下Vue.js的实例过程。如下图：

这张图大概就是介绍了一个Vue.js的实例过程即生命周期，创建前，创建后，渲染前，渲染后，更新前，更新后，销毁前，结束。示例代码：

var app=new Vue({
el:"#app",
data:{
    message:"hello vue.js",
    model:"双向绑定数据",
    seen:false,
    datas:[
        {text:"web前端"},
        {text:"jq开发"},
        {text:"js开发"},
        {text:"新项目"}
    ],
    reverse:"Hello Vue!"
},
methods:{
    reverseFunction:function(){
        this.reverse=this.reverse.split("").reverse().join("") //split()根据空白符分裂在逆序在连接最后赋值给reverse
    }
},beforeCreate(){
    console.log("创建前")
},created(){
    console.log("创建后")
},beforeMount(){
    console.log("渲染前")
},mounted(){
    console.log("渲染后")
},beforeUpdate(){
    console.log("更新前")
},updated(){
    console.log("更新后")
},beforeDestroy(){  //调用vm.$destory()方法后执行
    console.log("销毁前")
},destroyed(){
    console.log("结束")
}
})

现在可能还不太理解这是什么，随着后续的学习会了解的更多。

我们的的指令还很多，学精而不在学多，后续我们会在逐一介绍，今天就介绍到这。以上纯属个人观点，如有错误欢迎指正。谢谢大家。