一起学Vue之入门篇
概述
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之入门篇的更多相关文章
- 一起学SpringMVC之入门篇
本文属于SpringMVC的入门篇,属于基础知识,仅供学习分享使用,如有不足之处,还请指正. 什么是SpringMVC ? SpringMVC是一个基于Spring的MVC框架,继承了Spring的优 ...
- 1、Vue 实战-入门篇
先决条件:需要 Node.js . npm 基础. 如果没有基础看先看下面简单的两点介绍. 1.npm 命令介绍. 1.所有命令 -h 可以查看.也可以从官网查 docs,结果如下. --help ...
- 一起学Vue:入门
Why-为什么需要Vue? 前端开发存在的问题? 其一,需求变化频率更高 产品功能迭代前端肯定需要跟着调整. 提意见的人多,前端嘛谁都能看得见,所以,谁都可以指手画脚提一点意见.产品经理.项目经理.老 ...
- 边走边学Nodejs (基础入门篇)
1.什么是Node.js Nodejs ,或者node, 是一个基于ChromeJavaScript执行时建立的平台.用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非堵 ...
- 一起学MyBatis之入门篇(2)
概述 本文主要讲解MyBatis中类型转换的功能,其实在MyBatis中,提供了默认的数据类型之间的转换,但只是基本数据类型的转换,如果跨类型进行转换,则需要自定义转换类,如java中是boolean ...
- 一起学MyBatis之入门篇
概述 本文以一个简单的小例子,简述在Java项目开发中MyBatis的基本用法,属于入门级文章,仅供学习分享使用,如有不足之处,还请指正. 什么是MyBatis? MyBatis 是一款优秀的持久层框 ...
- 2、Vue实战-配置篇-npm配置
引言: 如果刚开始使用 vue 并不了解 nodejs.npm 相关知识可以看我上一篇的实践,快速入门了解实战知识树. Vue实战-入门篇 上篇反思: 1.新的关注点:开发 vue 模板.如何使用本地 ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
随机推荐
- java集合讲解
java集合讲解 1.概述 集合类的顶级接口是Iterable,Collection继承了Iterable接口 常用的集合主要有 3 类,Set,List,Queue,他们都是接口,都继于Collec ...
- java 静态变量&静态方法
1. 静态变量是static修饰的成员变量(类变量),若无static修饰,则是实例变量.静态变量是一种全局变量,它属于某个类,不属于某个对象实例,是在各对象实例间共存. 访问静态变量直接通过类名 ...
- 为NLog自定义LayoutRenderer
长话短说 前文<解剖HttpClientFactory,自由扩展HttpMessageHandler>主要想讲如何扩展HttpMessageHandler, 示例为在每个Http请求中的 ...
- 按照ID倒序查出某个字段不重复的集合
一.需求 有如下一个表pp_test: id name 1 aa 2 bb 3 cc 4 aa 5 cc 6 要求查出name字段中不重复的值(不算空值),并且按照id的倒序排列(不必输出ID). ...
- ubuntu安装过程中遇到的一些问题及解决办法。
由于ubuntu与win10的双系统安装过程百度一下就有很多,在此不再赘述. (其实主要是忘记拍照片了,我一个菜鸡说得肯定也没有那些大佬们好,但网上确实也很多哈,加上有中文引导安装,问题不大.) 此篇 ...
- Vue组件应用
Vue的组件是可复用的 Vue 实例,且带有一个名字 .我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用.因为组件是可复用的 Vue 实例,所以它们与 ne ...
- pod install/update速度慢或失败的解决方案实践
本文基于 https://www.cnblogs.com/dabaomo/p/9634727.html 声明 坚决拥护党的领导,本文章所用技术乃出于工作需要,敬请谅解. 正文 可以先过去快速浏览一遍再 ...
- CentOS 7 安装并配置 MySQL 5.7
Linux使用MySQL Yum存储库上安装MySQL 5.7,适用于Oracle Linux,Red Hat Enterprise Linux和CentOS系统. 1.添加MySQL Yum存储库 ...
- XML与JSON解析
[XML简介] XML在线校验工具: http://tool.oschina.net/codeformat/xml 可扩展标记语言(EXtensible Markup Language) 一种标记语言 ...
- git 使用详解(2)——安装+配置+获取帮助
安装 Git Git 有许多种安装方式,主要分为两种,一种是通过编译源代码来安装:另一种是使用为特定平台预编译好的安装包. 从源代码安装 若是条件允许,从源代码安装有很多好处,至少可以安装最新的版本. ...