脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js慢速入门

vue.js初学入门教程（1）

 更新时间：2016年11月03日 09:02:36   作者：Redchar  
这篇文章主要为大家详细介绍了vue.js初学入门教程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

参考：大神写的：https://www.jb51.net/article/96426.htm《vue.js权威指南》

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

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

您可能感兴趣的文章:

相关文章

  • element ui 表格动态列显示空白bug 修复方法

    element ui 表格动态列显示空白bug 修复方法

    今天小编就为大家分享一篇element ui 表格动态列显示空白bug 修复方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • uni-app中App与webview双向实时通信详细代码示例

    uni-app中App与webview双向实时通信详细代码示例

    在移动应用开发中,uni-app是一个非常流行的框架,它允许开发者使用一套代码库构建多端应用,包括H5、小程序、App等,这篇文章主要给大家介绍了关于uni-app中App与webview双向实时通信的相关资料,需要的朋友可以参考下
    2024-07-07
  • element ui From表单校验不生效问题解决

    element ui From表单校验不生效问题解决

    表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的有效性，本文主要介绍了element ui From表单校验不生效问题解决，具有一定的参考价值，感兴趣的可以了解一下
    2024-01-01
  • 在Vue中实现网页截图与截屏功能详解

    在Vue中实现网页截图与截屏功能详解

    在Web开发中，有时候需要对网页进行截图或截屏，Vue作为一个流行的JavaScript框架，提供了一些工具和库，可以方便地实现网页截图和截屏功能，本文将介绍如何在Vue中进行网页截图和截屏,需要的朋友可以参考下
    2023-06-06
  • Vue渲染过程浅析

    Vue渲染过程浅析

    这篇文章主要介绍了Vue渲染过程浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • antd form表单数据回显操作

    antd form表单数据回显操作

    这篇文章主要介绍了antd form表单数据回显操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • uni-app vue3接口请求封装示例代码

    uni-app vue3接口请求封装示例代码

    uni-app是一个使用Vue.js开发的多端开发框架,下面这篇文章主要给大家介绍了关于uni-app vue3接口请求封装的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue 实现上传组件

    vue 实现上传组件

    虽然前端UI框架大都提供文件上传的组件，以及很多插件可供选择，工作中可能不需要我们手写一个上传组件，但是从零封装组件对学习是很有助益的。下文为大家介绍使用Vue3+TypeScript实现的一个文件上传的功能，目前只实现上传等基本功能，后续会逐渐对功能进行扩展
    2021-05-05
  • vue如何点击多个tab标签打开关闭多个页面

    vue如何点击多个tab标签打开关闭多个页面

    这篇文章主要介绍了vue如何点击多个tab标签打开关闭多个页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue中接收二进制文件流实现pdf预览的方法

    Vue中接收二进制文件流实现pdf预览的方法

    本文主要介绍了Vue中接收二进制文件流实现pdf预览的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-12-12

最新评论