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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
把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
杏林同学录(六)
2006/10/09 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
js 分页全选或反选标识实现代码
2011/08/09 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
pycharm安装图文教程
2017/05/02 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
企业安全生产月活动总结
2014/07/05 职场文书
八一建军节慰问信
2015/02/14 职场文书
工程质量保证书
2015/05/09 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书