首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue概念及常见命令介绍(1)

Posted in Javascript onDecember 08, 2016

Vue.js介绍

Vue概念及常见命令介绍(1)

Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。

Vue和MVVM模式

Vue概念及常见命令介绍(1)

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概念及常见命令介绍(1)

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>

运行截图：

Vue概念及常见命令介绍(1)

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>

运行截图：

Vue概念及常见命令介绍(1)

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>

运行截图：

Vue概念及常见命令介绍(1)

在浏览器控制台里Console，输入app.todos.push({text: 'new item'})，则会插入新的一条信息。

运行截图：

Vue概念及常见命令介绍(1)

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>

运行结果：

Vue概念及常见命令介绍(1)

一个综合性例子

<!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概念及常见命令介绍(1)

参考链接：

介绍vue.js

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Vue概念及常见命令介绍(1)

- Author -

Suyd

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 类型判断代码分析
Mar 28 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
Javascript 构造函数详解
Oct 22 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 #Javascript
jquery二级目录选中当前页的css样式
Dec 08 #Javascript
wap手机端解决返回上一页的js实例
Dec 08 #Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 #Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 #Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 #Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 #Javascript
OpenFeign(1) K8s(1) SandBox(1) Windows Server 2022(3) RestTemplate(1) NTP(1) Hive(5) HttpClient(1) Windows Server(4) calc(1)
You might like
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
js获取url传值的方法
2015/12/18 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
python实现排序算法
2014/02/14 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python opencv读mp4视频的实例
2018/12/07 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Python json读写方式和字典相互转化
2020/04/18 Python
谈谈python垃圾回收机制
2020/09/27 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
巴西手表购物网站：eclock
2019/03/19 全球购物
Nike香港官网：Nike HK
2019/03/23 全球购物
大二学期个人自我评价
2014/01/13 职场文书
平民服装店创业计划书
2014/01/17 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
硕士学位论文评语
2014/12/31 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python