1 环境准备

　　1 下载安装Node 地址https://nodejs.org/en/download/

　　　完成后通过cmd打开控制台输入node -v 可以看到版本信息

　　2 通过该node自带的npm 下载安装nrm 命令 npm install nrm -g

　　　　nrm ls 查看镜像仓库 nrm use taobao 使用taobao这个镜像仓库 nrm test taobao 测试连接速度

　　3. 安装完成后重启电脑

　　4.1 打开idea 创建一个static web 项目 hello-vue

　　　2 打开terminal控制台进入 项目目录 cd hello-vue  然后进行初始化 命令 npm init -y

　　　　3. 安装Vue 输入命令 npm install vue --save (过程需要联网下载)

　　　　成功后的项目目录：hello.html是我创建的

2 测试练习：

　　1新建一个HTML 例如 hello.html

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>首次测试</title>

</head>

<body>

    <div id="div">

        <h1>hello world, I'm vue!</h1>

        {{name}}

    </div>

    <script src="node_modules/vue/dist/vue.js"></script>

//vue渲染需要放在HTML语句后面 先有需要渲染的元素然后才能绑定元素

    <script>

        var app = new Vue({

            el:"#div",  //绑定需要渲染的元素

            data:{ //数据

                name:"一剑西来，天外飞仙"

            }

        })

    </script>

</body>

</html>

　　页面效果：

2 创建 test2.html 测试 双向绑定和事件处理

 <!DOCTYPE html>

 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8">

     <title>双向绑定</title>

     <script src="node_modules/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="div">

         <h1>这只是个标题</h1>

         你有几只羊？<input type="text" v-model="num" placeholder="请诚实哦">

         <button v-on:click="add">+</button><br />

         我有{{num}}只羊。

     </div>

     <script>

         let div = new Vue({

             el:"#div",

             data:{

                 num:2

             },

             methods:{

                 add(){

                     this.num++

                 }

             }

         })

     </script>

 </body>

 </html>

效果

input 与 num绑定 input 的value 值变化 导致 data的num值变化

页面{{num}}与数据num绑定 num变化 页面效果变化

（通俗讲 就是你把输入框里的2 改变 下一句的我有2只羊的2也会改变）

其它事件就是  v-on:事件名

好了入门就这些吧

Vue的快速入门的更多相关文章

  1. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  2. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  3. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  4. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  5. Vue.js快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  6. Vue.js—快速入门

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  7. Vue.js——快速入门

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  8. Vue.js—快速入门及实现用户信息的增删

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  9. vue小白快速入门

    一.vue是什么 Vue 是一套用于构建用户界面的渐进式框架. 压缩后仅有17kb 二.vue环境搭建 你直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. 但在用 ...

随机推荐

  1. Spring——JdbcTemplate

    一.JdbcTemplate介绍: 为了使 JDBC 更加易于使用,Spring 在 JDBCAPI 上定义了一个抽象层, 以此建立一个JDBC存取框架,Spring Boot Spring Data ...

  2. 25.Python逻辑运算符及其用法

    逻辑运算符是对真和假两种布尔值进行运算(操作 bool 类型的变量.常量或表达式),逻辑运算的返回值也是 bool 类型值. Python 中的逻辑运算符主要包括 and(逻辑与).or(逻辑或)以及 ...

  3. 【面试】Redis

    1.如果在setnx之后执行expire之前进程意外crash或者要重启维护了,那会怎么样? set指令有非常复杂的参数,这个应该是可以同时setnx和expire合成一条指令来用的! 2.使用过Re ...

  4. 代码审计之CVE-2019-9081 Laravel5.7 反序列化 RCE复现分析

    本文首发于先知社区:https://xz.aliyun.com/t/5510 环境: php7.2+apache+laravel5.7 漏洞描述: Laravel Framework是Taylor O ...

  5. koa 基础（十五）cookie 设置中文

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  6. linux系统安装zint

    背景: 今天代码拉下了发现启动时报错,一看原来是同事用了zint的gem,我又没安,然后花了点时间解决,但其中踩了几次坑,所以打算记录下: 一.zint开源库的介绍 zint 是一个开源的条码编码库, ...

  7. [redis]redis五种数据类型和应用场景

    一.String(字符串)字符串类型是redis最基础的数据结构,首先键是字符串类型,而且其他几种结构都是在字符串类型基础上构建的,所以字符串类型能为其他四种数据结构的学习尊定基础.字符串类型实际上可 ...

  8. JAVA多线程程序ProgressBar

    JAVA多线程程序ProgressBar 题目简介: 思维导图: 实验代码:建议先看CalThread类,计算线程的实现,再作基本CalFrame类的界面, 然后作ReadThread类,结合CalF ...

  9. SQL学习（四）Where语句中的各种匹配方式

    在where语句中,我们需要制定各种条件,条件的各种组合需要用到不同的关键字 一.单条件 如:select * from ticket where name='测试' 二.多条件 1.和(and) 如 ...

  10. androidstudio导入新项目build tools不符合问题解决

    问题描述:从网上或者其他地方拷贝来完整代码导入androidstudio的时候,gradle过程显示build tools不符合 问题分析:你安装的SDK版本可能与其他人不一样,那么build的工具也 ...