Vue简介及入门案例

最新推荐文章于 2024-06-18 22:30:16 发布

MiNISUN&MOON

最新推荐文章于 2024-06-18 22:30:16 发布

阅读量279

点赞数 1

分类专栏： Vue 文章标签： vue

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.Vue简介

Vue.js 是什么?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue是当前市场前端框架的三大巨头之一:

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快。

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

在这里插入图片描述

2.MVVM模式

在正式学习Vue之前我们先来认识一种数据交互方式

在这里插入图片描述

M:Model,模型,主要是指后端传递的数据
V:View,视图,页面显示的最终效果
VM: View-Model,视图模型,模型与视图的双向绑定操作(无需开发人员干涉)

在MVVM之前,从后端获取的Model数据需要通过DOM操作渲染到View中

而MVVM模式中VM要做的事情就是将复杂繁琐的DOM操作完全的封装起来,开发人员不再需要关心

Model和View之间是如何互相影响的,只需要清楚两点:

只要Model发生了改变,View的数据也会随之发生改变
当用户修改了View,Model中的数据也会跟着发生改变

MVVM把开发人员从繁琐的DOM操作中解放出来,将关注点可以全部放在Model的业务逻辑中

3.Node和NPM

为了后续学习的方便,我们首先要做好Vue运行环境的搭建,安装Node以及NPM工具,可以简单理解为Node是Vue的运行环境(相当于JRE的存在),而NPM是Node提供的模块管理工具(类似于Maven),可以非常方便的下载安装很多的前端框架,包括JQuery,AngularJs,VueJs等

3.1.安装Node.js

下载地址：https://nodejs.org/en/download/
在这里插入图片描述

这里采用的是10.15.3版本,安装路径建议大家默认安装路径

如果选择了其他安装路径,需要额外在本地环境变量中配置环境变量(麻烦!!!)

在这里插入图片描述

安装完毕后通过cmd查看安装状态:

node -v

在这里插入图片描述

3.2.配置NPM

安装Node会自带安装NPM,控制台可以查看NPM安装状态:

npm -v

npm默认的仓库地址是在国外网站，速度较慢，推荐大家设置到国内淘宝。首先需要安装一款切换工具nrm。

nrm（NPM registry manager）是切换npm源(仓库)很简单且方便的工具。

我们首先安装nrm，这里-g代表全局安装

npm install nrm -g

然后通过nrm ls 命令查看npm的仓库列表,其中带*的表示当前选中的镜像仓库:

nrm ls

通过nrm use taobao来指定要使用的镜像源：

nrm use taobao

通过 nrm test taobao 测试镜像源延迟(测试是否能够通信)

nrm test taobao

注意:安装完不会及时生效,需要重新启动系统!

或者，直接配置仓库：

npm config set registry http://registry.npm.taobao.org/

4.快速入门

4.1.创建工程

在这里插入图片描述

4.2. 安装vue

4.2.1. 下载安装

下载地址：https://github.com/vuejs/vue

可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下载解压，得到vue.js文件。

在这里插入图片描述

4.2.2. 使用CDN安装

直接使用公共的CDN服务：

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

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

4.2.3. npm安装(推荐)

在IDEA控制台输入npm init -y命令初始化当前项目生成package.json文件(该操作相当于给maven工程添加pom文件)

在这里插入图片描述

生成的package.json文件为当前项目的基本描述信息,定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等), 通过npm install命令可以下载所需要的具体模块

安装 Vue,输入命令npm install vue -save

在这里插入图片描述

安装完,项目中会多出我们需要的vue资源目录:

在这里插入图片描述

就和在pom文件中引入依赖一样,package.json也会有所变化:

在这里插入图片描述

4.3.Vue入门案例

4.3.1.HTML模版

在这里插入图片描述

4.3.2 .Vue渲染

 <body>
        <div id="app">
            <h1>{{name}},魅力四射!</h1>
        </div>

        <script type="text/javascript">
            //生成一个Vue实例
           var app =  new Vue({
                el:"#app",//el,即element,根据id选择要渲染的元素
               data:{//数据(Model)
                    name:"赵本山"
               }
            })
        </script>

    </body>

new Vue({})用来创建Vue实例
然后构造函数接受一个对象,对象中的一些属性
- el: 是element的缩写,通过id选中要渲染的页面元素,本案例中对应的是
  标签
- data: 数据,可以是一个对象,或者数组,里面的属性都可以渲染到视图中
  - name:指定的具体属性名称(可以随意添加任意属性名)
在页面元素中通过{{name}},渲染在data中定义的属性.

页面渲染效果:

在这里插入图片描述

4.3.3.双向绑定

基于刚才的页面简单进行修改:

 <body>
        <div id="app">
            <input type="text" v-model="num" >
            <h1>{{name}},魅力四射!</h1>
            <h2>
                {{num}}位女神为他痴迷!!!
            </h2>
        </div>


        <script type="text/javascript">
            //生成一个Vue实例
           var app =  new Vue({
                el:"#app",//el,即element,根据id选择要渲染的元素
               data:{//数据(Model)
                    name:"赵本山",
                    num:1
               }
            })
        </script>

    </body>

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

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

input与num绑定，input的value值变化，影响到了data中的num值
页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

在这里插入图片描述

4.3.4. 事件处理

在div中添加一个按钮

<input type="button" v-on:click="numadd" value="+">

其中 v-on是vue中的指令:click即绑定点击事件,直接针对data的num属性进行自增长操作

点击按钮时,num属性会做自增长操作.

除了直接在绑定的事件中处理属性,我们还可以在Vue实例中声明方法,通过指定的方法做相关操作

在div中再添加一个按钮,通过click指定需要执行的方法名

<input type="button" v-on:click="reduce" value="-">

vue实例中添加methods选项并配置具体方法

  <script type="text/javascript">
            //生成一个Vue实例
           var app =  new Vue({
                el:"#app",//el,即element,根据id选择要渲染的元素
               data:{//数据(Model)
                    name:"赵本山",
                    num1:1
               },
               methods:{//声明方法
                   reduce(){
                       this.num1--;
                   },
                    numadd(){
                        this.num1++;
                    }
               }
            })
        </script>

点击按钮触发reduce方法操作num自减

MiNISUN&MOON

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue简介及入门案例

1.Vue简介Vue.js 是什么?Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue是当前市场前端框架的三大巨头之一:前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快。官网地址：https://cn.vuejs.org/
复制链接

扫一扫

专栏目录