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 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
jquery实现submit提交表单
Feb 03 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
JavaScript中交换值的10种方法总结
Aug 18 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Python map和reduce函数用法示例
2015/02/26 Python
python获取文件扩展名的方法
2015/07/06 Python
python编程实现归并排序
2017/04/14 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
先进工作者获奖感言
2014/02/08 职场文书
新郎结婚保证书
2015/02/26 职场文书
环保建议书范文
2015/09/14 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL