Vue.js入门学习

Vue简述

是一个MVVM模式的JavaScript库，他的核心思想是数据驱动和组件化，是双向数据绑定的一个实现库。在vue中实现MVVM模式：

• vue的viewmodel是实现双向数据绑定的关键，它包含了DOM listeners 和Data Bindings这两个工具；
• 从view到viewmodel，DOM listeners工具帮助我们检测页面上DOM元素的变化，实现更新；
• 从model到viewmodel，Data Bindings帮助我们监听model的变化，实现实时更新。

环境搭建

• node安装（https://nodejs.org/en/download/）——安装npm

• cnpm安装（淘宝对npm的镜像服务器）

  npm install -g cnpm --registry=https://registry.npm.taobao.org
  

• vue-cli安装
  是Vue官方提供的一个命令行工具，用于快速搭建大型的单页面应用。

  cnpm install -g vue-cli
  

• 最后输入vue检查是否安装成功

• 创建一个Vue项目
  在指定文件夹输入

  vue init webpack vue-demo
  

• 运行一个vue项目

  npm run dev
  

实现helloworld输出

    
    

        {{ message }}
    

上面的这种方式，是通过直接引入vue.js库来实现，若想通过vue-cli实现的话，原理也是一样的，只是将创建view、viewmodel、vue实例的过程模块化和组件化了。

Vue常用指令

vue的指令是以v-开头的，他们勇于HTML元素，提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为

• v-if：条件渲染指令，根据表达式的真假来删除和插入元素。
• v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
• v-for:遍历

• v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听元素的点击事件：

  a v-on:click="doSomething"
  

• 还有等等以v-开头的指令（略）