概述

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

Vue的特点

  • 易用:已经会了 HTML、CSS、JavaScript?即刻阅读指南开始构建应用!
  • 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。
  • 高效:a. 20kB min+gzip 运行大小   b. 超快虚拟 DOM  c. 最省心的优化

Vue的引用

想要在程序中引用,可以采用如下方式:

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

或者

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

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,如下所示:

以文件插值的方式绑定文本内容。写法如下:{{message}}。

el 表示Vue绑定的容器ID,data表示数据变量 。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一起学Vue</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:'welcome to vue world!'
}
});
</script>
</body>
</html>

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。

注意:script必须放置在div的后面,如果放置head中,会提示找不到元素app。

v-bind绑定元素属性

除了文本插值,我们还可以像这样来绑定元素特性:以v-bind,进行绑定title,格式如下:v-bind:title="message"

 <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span>

条件判断

v-if="sean"用于判断是否显示标签(通过DOM的新增或删除),
v-show="sean"用于判断是否显示标签(通过样式来实现,如:display: none;)

如下所示:sean表示data的一个变量,初始值为true

 <p v-if="sean"> {{message}} </p>
<p v-show="sean">{{message}}</p>

列表循环

v-for 用于展示数组内容,通过改变元素的值,并不能触发页面发生变化,只有通过变异方法实现。

 <ul>
<li v-for="(todo ,index) in todos">{{todo.text}}---{{index}}</li>
</ul>

todos也是data的一个变量,如下所示:

 data:{
message:'welcome to vue world!',
sean:true,
todos:[{text:'学习java script'},{text:'学习html'},{text:'学习java'}],
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}

在控制台里,输入 app4.todos.push({ text: '新项目' }),你会发现列表最后添加了一个新项目。

绑定事件

v-on:click 用于绑定单击事件,如下所示:

 <button v-on:click="handleClick" >点击一下</button>

其中handleClick是vue中的一个自定义事件,如下所示:

 methods:{
handleClick:function(){
this.todos.push({text:'学习C#'});
}
}

表单输入

Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。

如下所示:

 <input type="text" v-model="message" />

自定义组件

在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单,如下所示:

props表示变量列表,其中‘todo’为变量名称,在使用时v-bind:todo="item"关联起来即可。

 Vue.component('todo-item1',{
//todo-item1,现在接收一个prop的自定义属性,prop名为todo
props:['todo'],
template:'<li>{{todo.text}}---{{todo.id}}</li>'
});

使用时如下所示:

 <ol>
<todo-item1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item1>
</ol>

其中groceryList 是定义的一个对象数组。

学习手册

最好的学习就是官网的指导手册,本例中涉及的代码如下所示:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一起学Vue</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
作者:Alan.hsiang@qq.com
时间:2019-11-18
描述:以文件插值的方式绑定文本内容
-->
{{message}}
<br />
<!--
作者:Alan.hsiang@qq.com
时间:2019-11-18
描述:以v-bind,进行绑定title,格式如下:v-bind:title="message"
-->
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span>
<br />
<!--
作者:Alan.hsiang@qq.com
时间:2019-11-18
描述:v-if="sean"用于判断是否显示标签(通过DOM的新增或删除),
v-show="sean"用于判断是否显示标签(通过样式来实现,如:display: none;)
-->
<p v-if="sean"> {{message}} </p>
<p v-show="sean">{{message}}</p>
<br />
<!--
作者:Alan.hsiang@qq.com
时间:2019-11-18
描述:v-for 用于展示数组内容,通过改变元素的值,并不能触发页面发生变化,只有通过变异方法实现,
如:push,pop,splice,
-->
<ul>
<li v-for="(todo ,index) in todos">
{{todo.text}}---{{index}}
</li>
</ul>
<!--
作者:Alan.hsiang@qq.com
时间:2019-11-18
描述:v-on:click 用于绑定单击事件
-->
<button v-on:click="handleClick" >点击一下</button>
<!--
作者:Alan.hsiang@qq.com
时间:2019-11-18
描述:v-model 实现表单输入和应用状态之间的双向绑定
-->
<input type="text" v-model="message" />
<br />
<ul>
<to-item></to-item>
</ul>
<ol>
<todo-item1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item1>
</ol>
</div>
<!--
作者:Alan.hsiang@qq.com
时间:2019-11-18
描述:script必须放置在div的后面,如果放置head中,会提示找不到元素app
-->
<script type="text/javascript">
//声明一个简单的组件
Vue.component('to-item',{
template:'<li>这是待办项</li>'
});
Vue.component('todo-item1',{
//todo-item1,现在接收一个prop的自定义属性,prop名为todo
props:['todo'],
template:'<li>{{todo.text}}---{{todo.id}}</li>'
})
var app=new Vue({
el:"#app",
data:{
message:'welcome to vue world!',
sean:true,
todos:[{text:'学习java script'},{text:'学习html'},{text:'学习java'}],
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
},
methods:{
handleClick:function(){
this.todos.push({text:'学习C#'});
}
} }); </script>
</body>
</html>

备注

一首清新小诗,点散午后的烦忧。

山居秋暝
作者:王维 (唐)

空山新雨后,天气晚来秋。
明月松间照,清泉石上流。
竹喧归浣女,莲动下渔舟。
随意春芳歇,王孙自可留。

一起学Vue之入门篇的更多相关文章

  1. 一起学SpringMVC之入门篇

    本文属于SpringMVC的入门篇,属于基础知识,仅供学习分享使用,如有不足之处,还请指正. 什么是SpringMVC ? SpringMVC是一个基于Spring的MVC框架,继承了Spring的优 ...

  2. 1、Vue 实战-入门篇

    先决条件:需要 Node.js . npm 基础. 如果没有基础看先看下面简单的两点介绍. 1.npm 命令介绍. 1.所有命令  -h 可以查看.也可以从官网查 docs,结果如下. --help ...

  3. 一起学Vue:入门

    Why-为什么需要Vue? 前端开发存在的问题? 其一,需求变化频率更高 产品功能迭代前端肯定需要跟着调整. 提意见的人多,前端嘛谁都能看得见,所以,谁都可以指手画脚提一点意见.产品经理.项目经理.老 ...

  4. 边走边学Nodejs (基础入门篇)

    1.什么是Node.js Nodejs ,或者node, 是一个基于ChromeJavaScript执行时建立的平台.用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非堵 ...

  5. 一起学MyBatis之入门篇(2)

    概述 本文主要讲解MyBatis中类型转换的功能,其实在MyBatis中,提供了默认的数据类型之间的转换,但只是基本数据类型的转换,如果跨类型进行转换,则需要自定义转换类,如java中是boolean ...

  6. 一起学MyBatis之入门篇

    概述 本文以一个简单的小例子,简述在Java项目开发中MyBatis的基本用法,属于入门级文章,仅供学习分享使用,如有不足之处,还请指正. 什么是MyBatis? MyBatis 是一款优秀的持久层框 ...

  7. 2、Vue实战-配置篇-npm配置

    引言: 如果刚开始使用 vue 并不了解 nodejs.npm 相关知识可以看我上一篇的实践,快速入门了解实战知识树. Vue实战-入门篇 上篇反思: 1.新的关注点:开发 vue 模板.如何使用本地 ...

  8. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  9. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

随机推荐

  1. java集合讲解

    java集合讲解 1.概述 集合类的顶级接口是Iterable,Collection继承了Iterable接口 常用的集合主要有 3 类,Set,List,Queue,他们都是接口,都继于Collec ...

  2. java 静态变量&静态方法

    1. 静态变量是static修饰的成员变量(类变量),若无static修饰,则是实例变量.静态变量是一种全局变量,它属于某个类,不属于某个对象实例,是在各对象实例间共存.   访问静态变量直接通过类名 ...

  3. 为NLog自定义LayoutRenderer

    长话短说 前文<解剖HttpClientFactory,自由扩展HttpMessageHandler>主要想讲如何扩展HttpMessageHandler,  示例为在每个Http请求中的 ...

  4. 按照ID倒序查出某个字段不重复的集合

    一.需求 有如下一个表pp_test: id name 1 aa 2 bb 3 cc 4 aa 5 cc 6   要求查出name字段中不重复的值(不算空值),并且按照id的倒序排列(不必输出ID). ...

  5. ubuntu安装过程中遇到的一些问题及解决办法。

    由于ubuntu与win10的双系统安装过程百度一下就有很多,在此不再赘述. (其实主要是忘记拍照片了,我一个菜鸡说得肯定也没有那些大佬们好,但网上确实也很多哈,加上有中文引导安装,问题不大.) 此篇 ...

  6. Vue组件应用

    Vue的组件是可复用的 Vue 实例,且带有一个名字 .我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用.因为组件是可复用的 Vue 实例,所以它们与 ne ...

  7. pod install/update速度慢或失败的解决方案实践

    本文基于 https://www.cnblogs.com/dabaomo/p/9634727.html 声明 坚决拥护党的领导,本文章所用技术乃出于工作需要,敬请谅解. 正文 可以先过去快速浏览一遍再 ...

  8. CentOS 7 安装并配置 MySQL 5.7

    Linux使用MySQL Yum存储库上安装MySQL 5.7,适用于Oracle Linux,Red Hat Enterprise Linux和CentOS系统. 1.添加MySQL Yum存储库 ...

  9. XML与JSON解析

    [XML简介] XML在线校验工具: http://tool.oschina.net/codeformat/xml 可扩展标记语言(EXtensible Markup Language) 一种标记语言 ...

  10. git 使用详解(2)——安装+配置+获取帮助

    安装 Git Git 有许多种安装方式,主要分为两种,一种是通过编译源代码来安装:另一种是使用为特定平台预编译好的安装包. 从源代码安装 若是条件允许,从源代码安装有很多好处,至少可以安装最新的版本. ...