欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-12 13:10:22
vue.js是当下很火的一个javascript mvvm库,它是以数据驱动和组件化的思想构建的。相比于angular.js,vue.js提供了更加简洁、更易于理解的api...

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

  使用基础可参看。

  补充:

  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可设置延时。 

参考:大神写的:《vue.js权威指南》

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

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