Vue的快速入门
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的快速入门的更多相关文章
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- Vue.js——快速入门
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- Vue.js—快速入门及实现用户信息的增删
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- vue小白快速入门
一.vue是什么 Vue 是一套用于构建用户界面的渐进式框架. 压缩后仅有17kb 二.vue环境搭建 你直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. 但在用 ...
随机推荐
- 基于node、webpack、搭建一个koa服务器
1.首先需要node(去官网下载) 2.见一个文件夹 比如koa cmd——r cd koa文件 3.npm init 4.安装webpack (本地安装 ...
- JavaWeb_(Struts2框架)Action中struts-default下result的各种转发类型
此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...
- Eclipse在线安装插件进度缓慢问题
最近在学习Maven的过程中需要安装m2e 插件,在线安装的缓慢速度实在是让人抓狂,故将自己最后的解决方案记录下来,以供其他人参考. 最终的原因是安装时同时检查更新了其他插件的最新版,所以安装插件时注 ...
- FRP
使用 FRP 反向代理实现 Windows 远程连接 互联网普及率的日渐攀升与 IPv4 资源的持续减少,现在大部分家庭宽带都不会分配公网 IP ,这使一些网络应用的实现多了些困难,像个人的 NAS ...
- 关于mysql创建数据库，基字符集 和 数据库排序规则 的对比选择
1.一般选择utf8.下面介绍一下utf8与utfmb4的区别. utf8mb4兼容utf8,且比utf8能表示更多的字符.至于什么时候用,看你的做什么项目了,unicode编码区从1 - 126就属 ...
- SRS之SrsRtmpConn::service_cycle详解
1. SrsRtmpConn::service_cycle 当服务器在 conn 线程的开始调用 connect_app 函数接收并解析客户端发送的 connect 消息后,调用该 service_c ...
- window7上爬虫框架Scrapy的安装 --错误分析lxml
本文讲解的是python已经安装成功的情况下,且pip可以使用 版本:python2.7.10 #安装 pip install Scrapy 在安装Scrapy框架时总会报lxml安装不了的各种错误, ...
- JS字符串转换为JSON的方法
1.jQuery插件支持的转换方式: 示例: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2.浏览 ...
- Orcal数据类型总结
一.Oracle中的varchar2类型 我们在Oracle数据库存储的字符数据一般是用VARCHAR2.VARCHAR2既分PL/SQL Data Types中的变量类型,也分Oracle Data ...
- JAVA8中Predicate,Consumer，UnaryOperator，Function接口的应用
笔者平时时间有限,直接贴代码,关于几个接口的差别,可以查看这两篇文章 感受lambda之美,推荐收藏,需要时查阅 https://juejin.im/post/5ce66801e51d455d850d ...