zoukankan      html  css  js  c++  java
  • 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元素,提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为

  • 相关阅读:
    hdu 2639 Bone Collector II
    文件打包bundle
    iOS UITextField垂直居中
    Mac删除废纸篓中的单一文件和文件夹
    Swift 初见
    关于 Swift
    NSString和NSDate的转换
    iOS开发之iOS7设置状态栏字体颜色
    在当前界面中隐藏状态栏
    适合所有测试人员读的书籍
  • 原文地址:https://www.cnblogs.com/yehui-mmd/p/9002192.html
Copyright © 2011-2022 走看看