Vue.js学习（一）

初识Vue.js

①为什么用Vue.js

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

②安装Vue.js的开发环境

1.使用cdn（线上环境）http://cdn.bootcss.com/vue/2.1.10/vue.js

2.使用你怕吗命令（node.js）$ npm install vue

3.直接引入vue.js脚本（初学者）

开发版下载：https://vuejs.org/js/vue.js

生产版下载：https://vuejs.org/js/vue.min.js

③快速体验Vue.js的强大功能

1.通过new关键字创建Vue.js的实例

2.参数el：指定vue渲染的节点，不能是body、html，可以是任何的有效的选择器，如果有多个元素，只作用在第一个元素上。

3.参数data：定义Vue要用到的变量，也就是要处理的数据放在这里。在这里定义的数据是响应式，vue能够跟踪其变化。

启发：在vue.js下，渲染数据是不能进行dom操作的。

④v-bind指令

1.在vue.js中以v-开头的都是表示vue.js的指令。

2.v-bind都是单向绑定，将数据渲染到页面，反之不可以。

⑤v-model双向绑定数据

1.双向绑定就是讲数据渲染到页面，页面的数据也能反馈到数据。

⑥v-if条件与v-for循环

1.v-if和v-for跟js的原理是一样的。

⑦v-on事件和方法

1.v-on指令用来绑定事件

2.methods对象用来创建一系列的方法

⑧生命周期

1.beforeCreate（创建前）：初始化事件和生命周期

2.created（创建后）：对象创建完成，已经配置了data的观测，属性和方法的运算，watch、事件回调。这个阶段可以使用ajax调用接口的数据。

3.beforeMount（渲染前）：准备好需要渲染的节点。

4.mounted（渲染后）：将准备好的节点渲染到页面，这个阶段可以使用js操作dom了

5.beforeUpdate（更新前）：监测到数据有变化，准备需要更新的信息。适合在更新之前访问现有dom。

6.updated（更新后）：渲染更新后的数据。

7.beforeDestroy（销毁前）：调用vm.$distriy()方法否执行

8.destroed（销毁后）：实例销毁后调用，所有的事件监听器，子实例，观察器都会被销毁。

生命周期图如下：

⑨vue对象常用成员

el指定挂在的元素                 data定义数据                   methods定义方法

watch监测器                         computed计算属性        生命周期上的钩子函数

props属性                             fikters过滤器                   name 主键名称

代码如下：

    <div id="app">
       <p> {{message}}</p>
       <p v-bind:title="newtime">title时间</p>
       <label>双向绑定：</label><input type="text" v-model="mag"/>
       <input type="checkbox" v-model="send"/>政委是不是傻？
       <p>{{send}}</p>
       <p v-if="send">政委是真的傻</p>
       <p v-else>他不是傻，是太天真</p>
       <p v-on:click="reverse">{{tex}}</p>
       <ul>
           <li v-for="st in arr">
               {{st}}
           </li>
       </ul>
    </div>
    <script>
       var app=new Vue({
           el:"#app",
           data:{
               message:"hello vue.js",
               newtime:"时间为："+new Date().toLocaleTimeString(),
               mag:"小郑子",
               send:"ture",
               tex:"点击会逆转文字",
               arr:[1,2,3,4,5,6]
           },
           methods:{
               reverse(){
                this.tex=this.tex.split('').reverse().join('');
               }
             } ,
            beforeCreate(){
                   console.log("创建前");
               },
            created(){
                   console.log("创建完成");
               },
            beforeMount(){
                   console.log("渲染前");
               },
            mounted(){
                   console.log("渲染完成");
               },
            beforeUpdate(){
                   console.log("更新前")
               },
            updated(){
                   console.log("更新完成");
               },
            beforeDestroy(){
                   console.log("销毁前");
               },
            destroed(){
                   console.log("销毁完成");
               }
       })
    </script>