Vue的快速入门
Posted mountaincold
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 测试 双向绑定和事件处理
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>双向绑定</title> 6 <script src="node_modules/vue/dist/vue.js"></script> 7 8 </head> 9 <body> 10 <div id="div"> 11 <h1>这只是个标题</h1> 12 你有几只羊？<input type="text" v-model="num" placeholder="请诚实哦"> 13 <button v-on:click="add">+</button><br /> 14 我有{{num}}只羊。 15 </div> 16 <script> 17 let div = new Vue({ 18 el:"#div", 19 data:{ 20 num:2 21 }, 22 methods:{ 23 add(){ 24 this.num++ 25 } 26 } 27 }) 28 </script> 29 </body> 30 </html>
效果
input 与 num绑定 input 的value 值变化 导致 data的num值变化
页面{{num}}与数据num绑定 num变化 页面效果变化
（通俗讲 就是你把输入框里的2 改变 下一句的我有2只羊的2也会改变）
其它事件就是 v-on:事件名
好了入门就这些吧
以上是关于Vue的快速入门的主要内容，如果未能解决你的问题，请参考以下文章