Vue简单入门案例——个人学习笔记-使用IDEA（非教程）

最新推荐文章于 2024-04-18 11:36:09 发布

肉乎乎的鸭

最新推荐文章于 2024-04-18 11:36:09 发布

阅读量2k

点赞数 3

文章标签： Vue 入门非教程简单案例

本文链接：https://blog.csdn.net/zcylxzyh/article/details/97417960

版权

前言：

这是我的第二篇个人学习的心得体会，这篇主要记录了对vue的简单入门，让大家可以更加了解vue的强大之处，希望大家多多包涵，共同进步（这个不是教程哦，主要是个人的学习笔记~）。

1.Vue简介：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网：https://cn.vuejs.org/

参考：https://cn.vuejs.org/v2/guide/

2.入门案例：

接下来就开始我们的入门案例啦。

2.1 安装Vue：

2.1.1 方法一：

我们有许多的安装方法，可以直接去官网进行下载安装
下载地址：https://github.com/vuejs/vue

2.1.2 方法二：

使用CDN安装

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.1.3 方法三：（这次案例所使用的）

使用npm进行安装

1.先下载Node和NPM（一般下载Node之后就自带NPM了）

a.百度搜索Node
在这里插入图片描述
b.打开中文网或者官网（这里进入的中文网）

c.下载之后一路按照默认next安装就好

d.使用管理员权限打开Cmd
在这里插入图片描述
然后我们安装nrm

执行：npm install nrm -g

安装好之后执行 nrm ls 命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：
然后通过 nrm use taobao 来指定要使用的镜像源

注意： 安装完成请一定要重启下电脑！安装如果遇到了问题可以在网上寻找相关解决方案。

2.在安装了 npm 之后我们首先创建一个空的工程
在这里插入图片描述

3.开始安装Vue
在IDEA下找到：
在这里插入图片描述
进入目录

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

会多出一个这个文件

在安装Vue，输入命令：npm install vue --save
在这里插入图片描述

至此，Vue安装结束。

2.2 开始案例：

创建一些html
在这里插入图片描述

hello这个案例中主要是对vue的简单使用和v-for，v-show，v-on,v-model，插值表达式，v-text,v-html的使用。
hello2这个案例是对v-bind,watch,计算属性的使用
hello3这个案例是对组件化的介绍

a.

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
在这里插入图片描述
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

el
data
methods

等等

b.

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板：

<div id="app">
    
</div>

然后创建Vue实例，关联这个div

var vm = new Vue({
	el:"#app"
})

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

c.

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html：

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})

name的变化会影响到input的值
input中输入的值，也会导致vm中的name发生改变

d.

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

html:

<div id="app">
    {
  {num}}
    <button v-on:click="add">加</button>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        num: 0
    },
    methods:{
        add:function(){
            // this代表的当前vue实例
            this.num++;
        }
    }
})

hello：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<!--Vue基本演示-->
<div id="app">
    <button @click="handleClick">点我</button>
    <br>
    <input type="text" v-model="num">
    <button @click="num++">+</button><!--添加事件-->
    <h1>
        <span v-text="name"><

最低0.47元/天解锁文章

肉乎乎的鸭

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
Vue简单入门案例——个人学习笔记-使用IDEA（非教程）

前言：这是我的第二篇个人学习的心得体会，这篇主要记录了对vue的简单入门，让大家可以更加了解vue的强大之处，希望大家多多包涵，共同进步（这个不是教程哦，主要是个人的学习笔记~）。1.Vue简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于...
复制链接

扫一扫