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输出

<body>
    <!--创建view-->
    <div id="app">
        {{ message }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 创建的Model
    var exampleData = {
        message: 'Hello World!'
    }

    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    new Vue({
        el: '#app',
        data: exampleData
    })
</script>

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

Vue常用指令

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

posted @ 2018-05-07 13:36  美美王子  Views(127)  Comments(0Edit  收藏  举报