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. 32位linux安装chrome浏览器

    首先你需要一个安装包,可以在CSDN上搜索google-chrome-stable_current_i386.deb. 然后在终端输入 sudo apt-get install gdebi 然后找到安 ...

  2. 2019牛客暑期多校训练营(第二场)D bitset

    题意 给一个n个结点的带点权的图,找到第k小的团的权值 分析 用bitset表示团的状态,一个结点必须和团里的每个结点都连边才能加进去,所以可以直接用\(\&\)运算来判断一个结点是否能加进去 ...

  3. SQL语句中 NOT IN 子句的“正确打开方式”

    在写SQL语句的时候,若where条件是判断用户不在某个集合当中,我们习惯使用 where 列名 not in (集合) 子句,这种写法本身没有问题,但实践过程中却发现很多人在写类似的SQL语句时,写 ...

  4. Centos 7.6 安装Mysql5.7(离线)

    Centos 7.6 安装Mysql5.7(离线) 标签(空格分隔): mysql 安装包下载 https://dev.mysql.com/downloads/mysql/ [image.png-14 ...

  5. Android学习_7/25

     常用控件 Android控件使用规律:先定义id,再指定宽度和高度,然后适当加入一些控件特有的属性 1.         TextView 在界面上显示一段文本 2.         Button ...

  6. shell编程-定时删除(30天)文件

    1.创建shell touch /opt/auto-del-30-days-ago.sh chmod +x auto-del-30-days-ago.sh 2.编辑shell脚本: vi auto-d ...

  7. (转载)深入理解Java:内省(Introspector)

    本文转载自:https://www.cnblogs.com/peida/archive/2013/06/03/3090842.html 一些概念: 内省(Introspector) 是Java 语言对 ...

  8. react-redux 的总结

    第一步,我们将我们要使用的插件来先一步进行安装 create-react-app app  // 在这里我们使用了 react 的脚手架来搭建的项目 cd app // 进入我们的项目 npm i - ...

  9. [String.Format(转换时间格式)]

    string.Format("{0:d}", System.DateTime.Now);   // 2017/6/2; string.Format("{0:D}" ...

  10. leetcode315 计算右侧小于当前元素的个数

    1. 采用归并排序计算逆序数组对的方法来计算右侧更小的元素 time O(nlogn): 计算逆序对可以采用两种思路: a. 在左有序数组元素出列时计算右侧比该元素小的数字的数目为 cnt=r-mid ...