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. Python3学习笔记（十八）：文件上传和下载

    文件上传 以人人网上传头像为例,用Fiddler抓取的上传头像接口报文如下 上传头像图片代码: import requests upload_url = 'http://upload.renren.c ...

  2. linux端口释放

    查看linux连接端口范围 cat /proc/sys/net/ipv4/ip_local_port_range 调低端口释放等待时间 echo 20 >  /proc/sys/net/ipv4 ...

  3. redis 提供 6种数据淘汰策略

    淘汰策略的原因 在 redis 中,允许用户设置最大使用内存大小 server.maxmemory,在内存限定的情况下是很有用的.譬如,在一台 8G 机子上部署了 4 个 redis 服务点,每一个服 ...

  4. highcharts柱状图、饼状图

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  5. （十五）C语言之字符串

  6. SVN服务器的安装

    运行VisualSVN-Server-2.7.3.msi程序, 如下图 点击Next, 下一步 选中 I accept选项, 点击Next, 下一步 选择默认配置, 服务和控制台组件方式, 点击Nex ...

  7. c# 动态编译CodeDomProvider.CompileAssemblyFromSource(CompilerParameters cp,string code)

    1.使用c#动态编译,可参考如下: //生成c#代码 string code = GenerateCode(); CodeDomProvider cdp = CodeDomProvider.Creat ...

  8. C#调用SQL中存储过程并用DataGridView显示执行结果

    //连接数据库 SqlConnection con = new SqlConnection("server=服务器名称;database=数据库名称;user id=登录名;pwd=登录密码 ...

  9. IPv4正则表达式

    apache common-httpclient-4.5.2.jar package org.apache.http.conn.util; public class InetAddressUtils ...

  10. 使用Navicat为Oracle导入函数后函数显示红叉

    上图是plsql中的截图 有可能是Navicat没有缓存过程,刷新试一试,不行的话,对导入的函数进行重新编译即可. 还发现一个问题是,Navicat导出的脚本里面,函数部分竟然没有参数和返回值,让我很 ...