Vue简单入门

标签: vue-js
17人阅读 评论(0) 收藏 举报
分类:

Vue的简介

Vue.js 是一套构建用户界面的渐进式框架。关于渐进式,指的是使用可以从简单到复杂,简单的可以只是为一个页面渲染数据,而复杂的是利用组件、路由等构建一个大型的应用。

相比于Angular和React,Vue的限制相比之下就少了很多,不需要使用指定的依赖注入、模块以及组件定义。Vue可以使用其他优秀的库,并且可以和已经开发的应用进行融合,而不需要重新开始。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。这使得Vue容易上手,学习成本比较低。

Vue采用的是MVVM模式
MVVM模型

ViewModel是Vue的一个实例,其DOM Listeners帮助监听DOM元素的变化,将变化传递给Model进行相应的改变,Data Bindings则监听Model中数据的改变,然后将改变传递给View层,对DOM进行相应的改变。这样就完成了View和Model的双向绑定。

Vue的引入

Vue可以通过cdn上面的文件引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

也可以通过

npm install vuejs

然后在文件中引入本地的vuejs即可。

Vue的简单使用

引入vuejs文件后,在js文件中创建一个Vue实例

var vm = new Vue({ 
    el:"#el", 
    data:{
        hello:"Hello Vuejs!"
    } 
}); 

然后在html文件中将这个实例挂载到一个元素上面,这里不推荐挂载到body元素上,Vue会对这种情况进行报错。

<div id="el">
    <div>{{hello}}</div>
</div>

这样这段html会被渲染成Hello Vuejs!的文本。

Vue的常用指令

v-model

可以在input、textarea等元素上创建双向绑定。

<div id="el">
    <p>{{message}}</p>
    <input type="text" v-model="message">
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            message: "Hello Vuejs!"
        }
    })
</script>

这里写图片描述
初始时会显示Hello Vuejs!,在改变输入框的内容后,显示的内容会根据输入框中的内容进行同样的改变。
而在控制台中如果输入

vm.message = "Hello World!"

这里写图片描述
则显示的内容与输入框的内容都会改变为Hello World!。这是Vue双向绑定的一种使用。

v-if

v-if是条件渲染指令,根据表达式的真假对元素进行插入或者删除。

<div id="el">
    <p v-if="yes">YES</p>
    <p v-if="no">NO</p>
    <p v-if="age <= 25">age <= 25</p>
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            yes: true,
            no: false,
            age: 25
        }
    })
</script>

这里写图片描述
渲染出来后YES和age <= 25都会显示,而NO不会显示。
这里写图片描述
同时通过控制台可以看到第二个p元素是没有渲染出来的。

v-show

v-show和v-if类似,都是条件渲染语句,不同在于v-show即使条件为false也是会被渲染在html文本中,只是style中的display属性改为了none。
这里写图片描述
v-show的使用与v-if类似。

v-else

v-else必须跟在v-if或者v-show后面,当条件不符合时,会显示v-else中的元素,而是否渲染在文本中则取决于前面使用的是v-if还是v-show。

v-for

v-for是一个遍历渲染,语法与js中遍历语法类似。

<div id="el">
    <div v-for="i in arr">
        <p>{{i}}</p>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            arr: [1, 2, 3]
        }
    })
</script>

渲染后显示为
这里写图片描述
这里需要注意的是,由于vue的监听机制,如果改变数组序号或者直接给数组赋值的话,vue是不会监听到这种变化的,需要通过push、pop、split等方法改变数组,vue才会监听到变化并进行相应的渲染。

v-on

v-on用于监听DOM事件,然后监听到事件时调用相应的函数进行处理。

<div id="el">
    <p v-if="yes">YES</p>
    <div v-on:click="convert()">Convert</div>
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            yes: true
        },
        methods: {
            convert: function() {
                yes = !yes;
            }
        }
    })
</script>

当点击Convert时,YES的文本会在显示和隐藏中不断切换。

查看评论

vuejs最简单入门

学了后端,就得学前端配合啊,查了资料,感觉vue做前端应该比较简单。 谁知道卡在入门的地方两天,第一个例子都没有成功运行。 现在终于成功了,记录下。根本不需要像教程里写的那样,先装nodejs,再...
  • u010154462
  • u010154462
  • 2017-03-13 21:31:42
  • 1447

Vuejs入门级简单实例

Vue作为2016年最火的框架之一,以其轻量、易学等特点深受大家的喜爱。并与angular和react前端框架三分天下。 今天简单介绍一下Vue的使用。 首先,需要在官网下载vuejs,或者直接用...
  • ziwoods
  • ziwoods
  • 2017-01-10 10:52:51
  • 1430

vue入门小例子

  • 2017年07月08日 15:24
  • 67KB
  • 下载

vue.js入门实例

(1)页面模板 vue.js--快速入门Demo Vue demo .......
  • gaoxiaoba
  • gaoxiaoba
  • 2016-10-11 15:03:33
  • 4621

Vue初体验(一),最简单的Vue示例

1、基本介绍。 Vue作为中国人自己开发和维护的前端框架,兼备了angular和react的一些优点。先从一个最简单的Vue示例开始: Vue学习...
  • mapbar_front
  • mapbar_front
  • 2017-05-14 11:52:25
  • 410

【初学者】基于vue的简易webapp——todolist

todolist vue入门刚几天,这是第一个webapp。 vue上手确实比较快,文档真的超级友好!赞!b( ̄▽ ̄)d     预览图     分析&总结 分析 脚手架:vue-cli  ...
  • AQingC_
  • AQingC_
  • 2017-08-10 08:56:17
  • 458

二、Vue菜鸟小教程-vue-router的简单入门程序

使用vue.js做项目的时候,一个页面是由多个组件构成,所以在页面跳转的时候,并不适合用传统的href,于是vue-router应运而生。这算是学习Vue的第二阶段吧,前几天大概的把一些基本知识浏览了...
  • ginaxueyan
  • ginaxueyan
  • 2018-01-30 15:52:36
  • 91

Vue.js快速入门示例

Vue.js快速入门示例
  • java_faep
  • java_faep
  • 2017-06-29 08:46:14
  • 1057

vuex入门实例

最后一篇 想写下vuex 2.0以后的变化, 其实严格意义不算入门了 大家随便看看就好 算这个系列的完结吧 :) vuex为了迎合vue2.0的变化 进行了大量的调整和优化 先看下尤大2....
  • hsany330
  • hsany330
  • 2017-03-29 17:39:57
  • 1901

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(二)

通过上一篇文章vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(一),我们已经新建好了一个基于vue+webpack的项目。本篇文章将详细的帮助大家对这个项目的结构进行搭建...
  • nongshuqiner
  • nongshuqiner
  • 2017-02-28 12:18:18
  • 2790
    个人资料
    持之以恒
    等级:
    访问量: 1110
    积分: 250
    排名: 31万+