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

 好了入门就这些吧

 

posted @ 2018-12-14 17:16  mountainCold  阅读(175)  评论(0)  编辑  收藏  举报