Vue.js快速入门-CSDN博客

本文链接：https://blog.csdn.net/hwt1070359898/article/details/102176111

Vue学习：

一、在IDEA中用npm安装vue

在idea的左下角，有个Terminal按钮，点击打开控制台：

进入hello-vue目录：

先输入：`npm init -y` 进行初始化

安装Vue，输入命令：`npm install vue --save`
)
然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。

node_modules是通过npm安装的所有模块的默认位置。

二、启动

输入命令：`npm run dev`

三、vue入门学习

1、Vue声明式渲染：

<body>
    <div id="app">
        <h2>{{name}}，非常帅！！！</h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "峰哥"
        }
    });

</script>

- 首先通过 new Vue()来创建Vue实例
- 然后构造函数接收一个对象，对象中有一些属性：
  - el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
  - data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
    - name：这里我们指定了一个name属性
- 页面中的`h2`元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

2、双向绑定：

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h2>
            {{name}}，非常帅！！！有{{num}}位女神为他着迷。
        </h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el: "#app", // el即element，该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "峰哥",
            num: 5
        }
    });

</script>

- 在data添加了新的属性：`num`
- 在页面中有一个`input`元素，通过`v-model`与`num`进行绑定。
- 同时通过`{{num}}`在页面输出

效果：

3、事件处理：

在页面添加一个按钮：

<button v-on:click="num++">点我</button>

- 这里用`v-on`指令绑定点击事件，而不是普通的`onclick`，然后直接操作num
- 普通click是无法直接操作num的。

效果：