vue.js初学入门教程(1)


Posted in Javascript onNovember 03, 2016

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

0.MVVM

什么是MVVM?就是Model-View-ViewModel。

vue.js初学入门教程(1)

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.js初学入门教程(1)

使用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://3water.com/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>

vue.js初学入门教程(1)

当我搜破车的时候:

vue.js初学入门教程(1)

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>

vue.js初学入门教程(1)

其他:

v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。

v-model指令后面可以添加number、lazy、debounce参数。

Number可以将用户的输入转换为Number类型(如果原值的转换结果为NaN,则返回原值)。
在input中时添加lazy将数据改到在change事件中发生。
Debounce可设置延时。 

参考:大神写的:https://3water.com/article/96426.htm《vue.js权威指南》

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

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

Javascript 相关文章推荐
js弹出层永远居中实现思路及代码
Nov 29 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
json数据格式常见操作示例
Jun 13 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 #Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 #Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 #Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 #Javascript
微信小程序  audio音频播放详解及实例
Nov 02 #Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 #Javascript
bootstrap基础知识学习笔记
Nov 02 #Javascript
You might like
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
详解php中反射的应用
2016/03/15 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
七一建党节慰问信
2015/02/14 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
职工食堂管理制度
2015/08/06 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
2019公司管理制度
2019/04/19 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书