Vue概念及常见命令介绍(1)
Vue.js介绍
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。
Vue和MVVM模式
MVVM模式即Model-View-ViewModel。
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。
ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。
DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
Vue.js特点
简洁：页面由HTML模板+Json数据+Vue实例组成
数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面
轻量：代码量小，不依赖其他库
快速：精确有效批量DOM更新
模板友好：可通过npm，bower等多种方式安装，很容易融入
Vue.js入门小例子
声明式渲染
本例子由HTML模板（View）+Json数据（Model）+Vue实例（ViewModel）组成。
创建Vue的实例，需传入一个选项对象，如：数据、挂载元素、方法、模生命周期钩子等。本例子中，选项对象的el属性为#app，表示Vue实例挂载在<div id="app">...</div>元素上，data属性为exampleData，表示Model为exampleData。View中{{message}}是Vue的一种数据绑定语法，在运行时，{{message}}会被数据对象的message属性替换。
<!DOCTYPE html>
<html>
<head>
<title>声明式渲染</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- View -->
<div id="app">
{{message}}
</div>
<script>
//Model
var exampleData = {
message: 'Hello Vue!'
}
//ViewModel
var app = new Vue({
el: '#app',
data: exampleData
})
</script>
</body>
</html>
双向绑定
在Vue中使用v-model在表单元素上实现双向绑定。当在输入框输入的信息发生变化，<p>...</p>中的信息随之变化；当通过控制台中的Console，修改exampleData.message的值，输入框中的信息也随之变化。
<!DOCTYPE html>
<html lang="en">
<head>
<title>双向绑定</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- View -->
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
<script>
//Model
var exampleData = {
message: 'Hello Vue!'
}
//ViewModel
var app = new Vue({
el: '#app',
data: exampleData
})
</script>
</body>
</html>
运行截图：
Vue.js常用指令
Vue指令以v-开头，作用在HTML元素上，将指令绑定在元素上时，会给绑定的元素添加一些特殊行为，可将指令视作特殊的HTML属性（attribute）。
下面将介绍Vue中常用的几个内置指令。当然，Vue除了内置指令，也可以根据需求自定义指令。
v-if指令
条件判断指令，根据表达式值的真假来插入或删除元素，表达式返回一个布尔值，语法如下：
v-if = "expression"
例子：
在本例中，表达式是yes，no，和age>25，yes的值为true，因此在HTML中显示该元素，其他同理。
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-if指令</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="yes">Yes</h1>
<h1 v-if="no">No</h1>
<h1 v-if="age > 25">Age: {{age}}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
yes: true,//值为真，插入元素
no: false,//值为假，不插入元素
age: 28
}
})
</script>
</body>
</html>
运行截图：
v-show指令
条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值。语法如下：
v-show = "expression"
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-show指令</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="yes">Yes</h1>
<h1 v-show="no">No</h1>
<h1 v-show="age > 25">Age: {{age}}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
yes: true,//值为真
no: false,//值为假
age: 28
}
})
</script>
</body>
</html>
运行截图：
v-else指令
可配合v-if或v-show使用，v-else指令必须紧邻v-if或v-show，否则该命令无法正常工作。v-else绑定的元素能否渲染在HTML中，取决于前面使用的是v-if还是v-show。若前面使用的是v-if，且v-if值为true，则v-else元素不会渲染；若前面使用的是v-show，且v-show值为true，则v-else元素仍会渲染到HTML。
v-for指令
循环指令，基于一个数组渲染一个列表，与JavaScript遍历类似，语法如下：
v-for = "item in items"
例子：
在本例中，数组是todos，依次遍历数组todos中的每个元素，将text部分显示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-for指令</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{text: 'learn Javascript'},
{text: 'learn Vue'},
{text: 'learn ...'}
]
}
})
</script>
</body>
</html>
运行截图：
在浏览器控制台里Console，输入app.todos.push({text: 'new item'})，则会插入新的一条信息。
运行截图：
v-bind指令
给DOM绑定元素属性，语法如下：
v-bind:argument="expression"
其中，argument通常是HTML元素的特性，如：v-bind:class="expression"。
注：v-bind指令可以缩写为:冒号。如：:class="expression"。
例子：
在本例子中，当鼠标悬停在span标签的文字上时，会显示加载网页的时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-bind:title="message">Hover your mouse over me</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'you loaded this page on ' + new Date()
}
})
</script>
</body>
</html>
v-on指令
用于监听DOM事件，语法与v-bind类似，如监听点击事件v-on:click="doSth"。
注：v-on指令可以缩写为@符号。如：@click="doSth"。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p><input type="text" v-model="message"></p>
<p>
<button v-on:click="greet">Greet</button>
</p>
<p>
<button v-on:click="say('hello vue')">Hello</button>
</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Greet to Vue'
},
methods: {
greet: function(){
alert(this.message);
},
say: function(msg){
alert(msg);
}
}
})
</script>
</body>
</html>
运行结果：
一个综合性例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<fieldset>
<legend>Create New</legend>
<label for="">Name:</label>
<input type="text" v-model="newPerson.name">
<label for="">Age:</label>
<input type="text" v-model="newPerson.age">
<label for="">Age:</label>
<select name="" id="" v-model="newPerson.sex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<button @click="createPerson">Create</button>
</fieldset>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Delete</th>
</tr>
<tr v-for="person in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
<td><button @click="deletePerson($index)">Delete</button></td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
newPerson: {
name: '',
age: 0,
sex: 'Male'
},
people: [{
name: 'tyy',
age: 24,
sex: 'Male'
}, {
name: 'syd',
age: 24,
sex: 'Female'
}]
},
methods: {
createPerson: function(){
this.people.push(this.newPerson);
this.newPerson = {
name: '',
age: 0,
sex: 'Male'
}
},
deletePerson: function(index){
this.people.splice(index, 1);
}
}
})
</script>
</body>
</html>
运行截图：
参考链接：
Vue.js 60分钟轻松入门
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解Vue使用命令行搭建单页面应用
使用命令行搭建单页面应用 我们来看一下最后完成的效果: 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一. 下载工具 node, git 的下载大家可以去官网自行下载就可以了. 下面说一说安装 npm,npm 是在以上两个都安装的情况下才可以的. 国内直接 git npm 非常慢,所以我们到 taobao 的 npm 镜像下面去下载安装 镜像地址>> 打开安装好的 git bash 1 . 在 Git Bash 输入镜像的地址: 下载成功后,输入 cnpm -v
-
vue快捷键与基础指令详解
v-bind可以简写成 : <img src="{{url}}">→<img :src="url" :width="50px"> v-on:click可以写成@click <button @click="up()"></button> v-if实例 可以通过对对象操作条件来实现想要展示的效果 <!DOCTYPE html> <html> <he
-
Vue概念及常见命令介绍(1)
Vue.js介绍 Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁.易于理解的API.Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件. Vue和MVVM模式 MVVM模式即Model-View-ViewModel. Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化. ViewModel是V
-
Docker常见命令介绍
目录 一.Docker容器信息 1.查看docker容器版本 2.查看docker容器信息 3.查看docker容器帮助 二.镜像操作命令 1.查看镜像 2.搜索镜像 3.镜像下载 4.删除镜像 5.生成镜像 三.容器操作相关命令 1.容器启动 2.查看容器 3.容器的停止与启动 4.删除容器 5.容器日志 演示环境使用的是Docker Desttop和PowerShell,使用CMD命令行工具也可以. 一.Docker容器信息 1.查看docker容器版本 使用下面的命令查看docker容器的
-
对shell中常见参数及判断命令介绍
Shell常用特殊变量 经常会在shell命令中,看到$0, $#, $*, $@, $?, $$这样的取值,这些代表什么呢? 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例如,第一个参数是$1,第二个参数是$2 $# 传递给脚本或函数的参数个数 $* 传递给脚本或函数的所有参数 $@ 传递给脚本或函数的所有参数.被双引号(" ")包含时,与 $* 稍有不同 $? 上个命令的退出状态,或函数的返回值.成功返回0,失败返回1 $$ 当
-
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型.一组标准集合,一个依赖管理系统.和用来运行定义在生命周期阶段中插件目标和逻辑. 核心功能 Maven的核心功能是合理叙述项目间的依赖关系,通俗点 就是通过pom.xml文件的配置获取jar包不用手动的去添加jar包,,这个pom.xml包我后面会叙述,不过已经学习过maven的 人应该对这个很熟悉.其本质就是通过配置pom.xml来获取jar包,当然这是在该项目必须是maven项目的前提下.那么什么是m
-
Redis通用命令介绍以及key的层级结构讲解
目录 1 Redis数据结构介绍 2 Redis通用命令 3 Redis命令-Key的层级结构 1 Redis数据结构介绍 Redis是一个key-value的数据库,key一般是String类型,不过value的类型多种多样: value的数据类型共有8种,前面5中为基本数据类型,后面3种是针对不同的情况指定的特殊数据类型. 命令不要死记,学会查询就好啦 Redis为了方便我们学习,将操作不同数据类型的命令也做了分组,在官网( Commands | Redis)可以查看到不同的命令:(点击CO
-
Linux基础之正则表达式，用户、组管理命令介绍
通配符(Globbing) 通配符与元字符类似,通配符主要用于文件名的匹配,而元字符则主要用在字符串的匹配上: 下面介绍几种常用的通配符: * 表示匹配任意位数的任意字符 ? 表示匹配一位任意字符 ^ 表示取反,不包含的意思 [] 表示此区间内的任意一个字符 {} 表示一种集合 \ 转义字符,使具有特殊意义的字符失去原有意义 | 表示'或',匹配一组可选的字符 元字符 元字符是用来描述字符的特殊字符. 常用的元字符及意义如下: * 重复前面的字符0次或者多次 . 匹配任意字符一次 \+ 匹配前面
-
maven的生命周期及常用命令介绍
maven简介及优势 maven是一个项目构建和管理的工具,提供了帮助管理 构建.文档.报告.依赖.scms.发布.分发的方法.可以方便的编译代码.进行依赖管理.管理二进制库等等.maven的好处在于可以将项目过程规范化.自动化.高效化以及强大的可扩展性利用maven自身及其插件还可以获得代码检查报告. 单元测试覆盖率.实现持续集成等等. maven优势: 1.项目自动化编译部署 2.项目jar包的依赖管理 3.项目的插件管理 Maven是围绕着构建生命周期的核心概念为原型,整个项目的创建和部
-
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
需求说明: 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行,通过 npm run build apiUrl 即可修改接口入口,用于从 docker 部署到不同的测试服务器上,其次是路由模式的问题,部署到测试服务器上的需要是 history 模式,但是产品是用 electron + vue 开发的桌面应用,electron 硬性要求 vue-router 的路由模式是 hash 模式,所以命令行需新增一个配置项 mode ,mode 可选值有 history .hash
-
Python字典的概念及常见应用实例详解
本文实例讲述了Python字典的概念及常见应用.分享给大家供大家参考,具体如下: 字典的介绍 字典的概念 字典的创建 1. 我们可以通过{}.dict()来创建字典对象. 2. 通过 zip()创建字典对象 3. 通过 fromkeys 创建值为空的字典 字典元素的访问 1. 通过 [键] 获得"值".若键不存在,则抛出异常. 2. 通过 get()方法获得"值".推荐使用.优点是:指定键不存在,返回 None:也可以设 3. 列出所有的键值对 4. 列出所有的键,
-
vue和webpack安装命令详解
一.安装vue相关命令 1.安装vue cnpm install vue 2.安装vue-cli cnpm install -g vue-cli 3.查看vue安装版本 vue -V 二.安装webpack 1.安装webpack cnpm install -g webpack 2.安装webpack-dev-server cnpm install -g webpack-dev-server 3.查看webpack版本 webpack -v 总结 以上所述是小编给大家介绍的vue和w