Vue的快速入门

时间 2019-12-01

标签 vue 快速入门繁體版

原文原文链接

1 环境准备html

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

　　　完成后经过cmd打开控制台输入node -v 能够看到版本信息node

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

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

　　3. 安装完成后重启电脑app

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

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

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

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

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:事件名

好了入门就这些吧

1. Vue快速入门
2. Vue 快速入门
3. vue-router 快速入门
4. vue 快速入门系列
5. vue-router快速入门
6. Vue快速入门（一）
7. Vue框架快速入门
8. Vue入门指南(快速上手vue)
9. Vue学习~1：Vue快速入门
10. vue 快速入门系列 —— vue loader 上
更多相关文章...
• SQL 快速参考 - SQL 教程
• Eclipse 快速修复 - Eclipse 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用