vue入门随笔

参考：

详解vue生命周期：https://segmentfault.com/a/1190000011381906

配置环境

安装node，查看版本，8以上版本

安装vue，npm install -g @vue/cli，如报错，npm cache clean --force，npm install npm -g 全局更新

查看安装情况，vue --version

安装vue扩展程序 vue-devtools

入门练习

在线编辑：https://jsfiddle.net/chrisvfritz/50wL7mdz/

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app" v-if="judge"> 
 <button v-on:click="reverseMessage">逆转消息</button>
  <p v-bind:title="message">{{ message }}</p>
  <input type="text" v-model="message">
  <ul>
    <li v-for='todo in todos'>{{todo.text}}</li>
  </ul>
</div>

JS
new Vue({
  el: '#app',
  data: {
  	judge:true,
    message: 'Hello Vue.js!',
    todos:[
    	{text:'aaaaa'},
      {text:'baaaa'},
      {text:'caaaa'},
    ]
  },
  methods:{
    	 reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
})

生命周期

八个阶段：

beforeCreate（创建前） created（创建后） beforeMount（载入前） mounted（载入后） beforeUpdate（更新前）, updated（更新后） beforeDestroy（销毁前） destroyed（销毁后）

beforeCreate data 和 $el 都没有初始化 全部为 undefined 
created data 初始化完成，但 $el 没有初始化 
beforeMount data 和 $el 均已存在，但 DOM 为虚拟DOM 仍未完全加载 eg： <div>{{message}}</div> 
mounted data 和 $el 均已存在，并且 DOM 加载完成 ，完成挂载

当data中数据发生改变时触发update相关函数 
beforeUpdate 渲染完成，并监测到data发生变化，在变化的数据重新渲染视图之前会触发，这也是重新渲染之前最后修改数据的机会 
updated 监测到data发生变化，并完成渲染更新视图之后触发

beforeDestory 实例销毁之前调用 ， 实例仍然完全可用。 
destroyed 实例销毁后调用。调用后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

应用场景：

beforeCreate 可以在此时加一些loading效果，在created时进行移除

created 需要异步请求数据的方法可以在此时执行，完成数据的初始化

mounted 当需要操作dom的时候执行，可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom

updated 当数据更新需要做统一业务处理的时候使用

 

Vue、React简单对比

Vue 提供了 Vue-cli 脚手架，能让你非常容易地构建项目，包含了 Webpack，Browserify，甚至 no build system。React 在这方面也提供了 create-react-app，但是现在还存在一些局限性：

• 它不允许在项目生成时进行任何配置，而 Vue 支持 Yeoman-like 定制。
• 它只提供一个构建单页面应用的单一模板，而 Vue 提供了各种用途的模板。
• 它不能用用户自建的模板构建项目，而自建模板对企业环境下预先建立协议是特别有用的。