vue.js初学入门教程(1)
作者:Redchar 发布时间:2023-07-02 17:06:21
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
0.MVVM
什么是MVVM?就是Model-View-ViewModel。
ViewModel是Vue.js的核心,它是一个Vue实例。
不太懂也没关系,慢慢就懂了。
1.基础示例
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
<div id="didi-navigator">
<ul>
<li v-for="tab in tabs">
{{ tab.text }}
</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#didi-navigator',
data: {
tabs: [
{ text: '巴士' },
{ text: '快车' },
{ text: '专车' },
{ text: '顺风车' },
{ text: '出租车' },
{ text: '代驾' }
]
}
})
</script>
</body>
</html>
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
· 定义View
· 定义Model
· 创建一个Vue实例或"ViewModel",它用于连接View和Model
2.数据绑定
2.1 插值
有时候只需渲染一次数据,后续数据变化不再关心,可以通过“*”实现:
<span>Text: {{*text}}</span>
双大括号标签会把里面的值全部当作字符串来处理,如果值是HTML片段,则可以使用三个大括号来绑定:
<div>Logo: {{{logo}}}</div>
Logo: ‘<span>DDFE</span>'
2.2 表达式
Mustache标签也接受表达式形式的值。
3.指令(上)
v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令
v-model指令
v-if:是否渲染。
v-show:肯定渲染,是否显示。
其中,v-show不支持<template语法>。一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁地切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好。另外,将v-show用在组件上时,因为指令的优先级v-else会出现问题,可以用另一个v-show替换v-else。
3.1 关于v-for
使用基础可参看https://www.jb51.net/article/96364.htm。
补充:
Vue.js增加了两个方法观测变化:$set、$remove。
3.1.1 应该尽量避免直接设置数据绑定的数组元素
因为这些变化不会被Vue.js检测到,因而也不会更新视图渲染。这时,我们可以使用$set方法:
demo.item.$set(0,{childMsg:'Changed!'})
$remove是splice的语法糖,用于从目标数组中查找并删除元素。
demo.item.$remove(item)
3.1.2 有时可能需要用全新对象来替换数组
Vue.js应尽可能地复用已有实例。如果没有唯一的键供追踪,则可以使用track-by=”$index”,它强制让v-for进入原位更新模式:片段不会被移动,而是简单地以对应索引的新值刷新。这时DOM节点不再映射数组元素顺序的改变,不能同步临时状态(比如<input>元素的值),以及组件的私有状态。
因为js的限制,Vue.js不能检测到下面数组的变化:
直接用索引设置元素,如vm.items[0]={}。
修改数据的长度,如vm.items.length = 0。
前一个问题可用$set解决,后一个问题只需用一个空数组替换items即可。
3.1.3 v-for可以和vue.js提供的内置过滤器(filterBy)或排序(orderBy)数据一起使用
filterBy的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input v-model="searchText" />
<ul>
<li v-for="user in users | filterBy searchText in 'name'">{{user.name}}</li>
</ul>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var haha = new Vue({
el:'body',
data:{
users:[
{
name:'快车',
tag:'1'
},
{
name:'慢车',
tag:'2'
},
{
name:'好车',
tag:'3'
},
{
name:'破车',
tag:'4'
}
]
}
})
</script>
</body>
</html>
当我搜破车的时候:
orderBy的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li v-for="user in users | orderBy field reverse">{{user.name}}</li>
</ul>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var demo = new Vue({
el:'body',
data:{
field:'tag',
reverse:false, // 颠倒
users:[
{
name:'快车',
tag:'2'
},
{
name:'慢车',
tag:'3'
},
{
name:'好车',
tag:'1'
},
{
name:'破车',
tag:'0'
}
]
}
})
</script>
</body>
</html>
其他:
v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。
v-model指令后面可以添加number、lazy、debounce参数。
Number可以将用户的输入转换为Number类型(如果原值的转换结果为NaN,则返回原值)。
在input中时添加lazy将数据改到在change事件中发生。
Debounce可设置延时。
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
猜你喜欢
- 我们都知道并发(不是并行)编程目前有四种方式,多进程,多线程,异步,和协程。多进程编程在python中有类似C的os.fork,当然还有更高
- goods表如下:name time productA 2016-1-2 13:23:
- 概述:本文主要分享一下博主在学习wxpy 的过程中开发的一个小程序。博主在最近有一个监控报警的需求需要完成,然后刚好在学习wxpy 这个东西
- 本文是利用python 复制文件夹 刚开始写了一个普通的递归复制文件夹 然后想了想 觉得对io频繁的程序 thre
- 写在前面python-docx 不支持 doc 文档,一定要注意该点,如果使用 doc 文档,需要提前将其用 Word 相关软件转换为 do
- PyQt5 QtChart-区域图QAreaSeries用于创建区域图数据,传入两个QLineSeries对象。核心代码:series0 =
- 本文实例讲述了php数组索引与键值操作技巧。分享给大家供大家参考。具体如下:<?php $array = array("a&
- CSS 和 JavaScript 的压缩已经很成熟,各大网站都在使用。HTML 的压缩(特指去除空白字符和注释),除了 Google 等搜索
- 在ASP中,除了ADODB、Scripting 等一些常用组件外,我们还可以用微软的ActiveX方法来轻松捕获哟: <%u
- 1. sys_getloadavg()sys_getloadavt()可以获得系 统负载情况。该函数返回一个包含三个元素的数组,每个元素分别
- 本文实例讲述了python3.6生成器yield用法。分享给大家供大家参考,具体如下:今天看源码的时候看到了一个比较有意思的函数:yield
- //有1-22个文件夹,各文件夹下有Detect_0文件夹,此文件夹下有source与mask文件夹,目的是将需要获取图片的文件夹下的图片复
- 前言最近整理图片发现,好多图片都非常相似,于是写如下代码去删除,有两种方法:注:第一种方法只对于连续图片(例一个视频里截下的图片)准确率也较
- # -*- coding: utf-8 -*- import httplibfrom urllib import urlencodeimpo
- 本文实例讲述了Python操作串口的方法。分享给大家供大家参考。具体如下:首先需确保安装了serial模块,如果没安装的话就安装一下pyth
- 从ASP初入门到PHP,感觉到PHP的强大之一就是内置函数的丰富,比如先前学习的PHP日期时间函数,读写文件的相关函数等都无不表明了PHP的
- 网页制作中是免不了与表格打交道的。表格是网页制作的基础,在网页布局中起着举足轻重的作用,熟练掌握表格的操作,是你制作网页的辅路石,也是你成为
- Python来进行查询和替换一个文本字符串?可以使用sub()方法来进行查询和替换,sub方法的格式为:sub(replacement, s
- 具体代码和说明如下:upload.asp<form action=http://<%= Request.&n
- 利用Python + wxpy 可以快速的查询自己好友的地区分布情况,以及好友的性别分布数量。还可以批量下载好友的头像,拼接成大图。本次教程