概述

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. 一篇文章搞定Python多进程(全)

    1.Python多进程模块 Python中的多进程是通过multiprocessing包来实现的,和多线程的threading.Thread差不多,它可以利用multiprocessing.Proce ...

  2. 2019-9-17:渗透测试,基础学习,apache初识,mysql初识等笔记

    python -m SimpleHTTPServer gedit 文本编辑器 apache2 默认配置文件目录:/etc/apache2/apache2默认首页源码: /var/www/html my ...

  3. 数据表与简单java类——多对多映射

    给定一张Meber和Product表,得到如下信息: 1.获取一个用户访问的所有商品信息 2.获取一个商品被哪些用户浏览过的信息 package Mapping_transformation; cla ...

  4. 窗体的FormBorderStyle属性的不同效果

    查看原文:http://blog.xieyc.com/form-border-style/ 设置窗体边框可以通过设置窗体的FormBorderStyle属性设置.属性值可以通过枚举类型FormBord ...

  5. supersocket/SocketEngin/BootstrapFactory.cs 详解

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using SuperSoc ...

  6. Spring IOC容器装配Bean_基于XML配置方式

    开发所需jar包 实例化Bean的四种方式 1.无参数构造器 (最常用) <?xml version="1.0" encoding="UTF-8"?> ...

  7. react-native技术调研:react-native是什么?

    如有疏漏错误,还望指正.转载不忘加上>>原链接<<哦~ react-native是什么? react-native原理 从字面意思上来看,react-native由单词reac ...

  8. gsoap使用

    一. 安装gsoap 下载地址:http://sourceforge.net/projects/gsoap2/files/ 解压安装:./configure --prefix=/usr/local/g ...

  9. 调用rest api杀死yarn上的应用

    调用rest api杀死yarn上的应用 调用yarn reat api,通过app name 获取application id public static String getApplication ...

  10. LightOJ1199 Partition Game

    Alice and Bob are playing a strange game. The rules of the game are: Initially there are n piles. A ...