Vue.js 教程---菜鸟教程

news2024/11/24 22:47:41

文章目录

  • Vue.js 教程
  • Vue.js 安装
  • Vue.js 起步
  • Vue.js 模板语法
    • 插值
    • 指令
    • 用户输入
    • 过滤器
    • 缩写
  • Vue.js 条件语句
  • Vue.js 循环语句
  • Vue.js 计算属性
  • Vue.js 监听属性
  • Vue.js样式绑定

Vue.js 教程

本教程主要介绍了 Vue2.x 版本的使用

第一个实例：

<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>

在这里插入图片描述

Vue.js 安装

  • 使用 CDN 方法
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

var vm = new Vue({
  // 选项
})

接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

在这里插入图片描述
在 Vue 构造器中有一个el参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：<div id = "vue_det"></div>。
这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

Vue.js 模板语法

插值

  • 文本
    数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值：
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
  • HTML
    使用v-html指令用于输出html代码：
<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>
  • 属性
    HTML属性中的值应使用v-bind指令。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

在这里插入图片描述

  • 表达式
<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

在这里插入图片描述

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

  • 参数
    参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：
<a v-on:click="doSomething">在这里参数是监听的事件名。

  • 修饰符
    修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()：
    <form v-on:submit.prevent="onSubmit"></form>

用户输入

  • 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

  • 按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
    以下实例在用户点击按钮后对字符串进行反转操作：
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。
以下实例对输入的字符串第一个字母转为大写：

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

Vue.js 条件语句

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

Vue.js 循环语句

v-for 可以绑定数据到数组来渲染一个列表：

<div id="app">
  <ul>
    <template v-for="site in sites">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

v-for 可以通过一个对象的属性来迭代数据：

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

在这里插入图片描述

Vue.js 计算属性

计算属性关键词: computed。

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

实例 2 中声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

Vue.js 监听属性

本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。

以下实例通过使用 watch 实现计数器：

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

在这里插入图片描述

以下实例进行千米与米之间的换算：

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
    // $watch 是一个实例方法
    vm.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>

在这里插入图片描述
以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。

当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

Vue.js样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

class 属性绑定
我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ 'active': isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

我们也可以在对象中传入更多属性用来动态切换多个 class 。

text-danger 类背景颜色覆盖了 active 类的背景色：

<div class="static"
     v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }">
</div>

Vue.js style(内联样式)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/489464.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux 信号学习

Linux 信号学习

Linux 信号学习 信号量的基本概念信号产生的条件信号如何被处理信号的异步特质 信号的分类可靠信号/不可靠信号实时信号/非实时信号 常见信号与默认行为信号处理signal() 函数sigaction()函数 向进程发送信号kill() 函数raise() 函数 alarm()和pause()函数alarm() 定时函数paus…
阅读更多...
玩转传感器----理解时序和数据采集（DHT11）

玩转传感器----理解时序和数据采集（DHT11）

该文章以DHT11模块进行分析 目录 1.模块复位&#xff08;时序图&#xff09; 2.DHT11的应答信号 3.读取1bit数值&#xff08;比较高电平的时间是否大于40us&#xff09; 4.读取一个字节 5.把读取的字节放入单片机 6. 寄存器设置IO口方向 1.模块复位&#xff08;时序图&a…
阅读更多...
22.Java多线程

22.Java多线程

Java多线程 一、进程和线程 进程是程序的一次动态执行过程&#xff0c;它需要经历从代码加载&#xff0c;代码执行到执行完毕的一个完整的过程&#xff0c;这个过程也是进程本身从产生&#xff0c;发展到最终消亡的过程。多进程操作系统能同时达运行多个进程&#xff08;程序…
阅读更多...
使用Python接口自动化测试post请求和get请求，获取请求返回值

使用Python接口自动化测试post请求和get请求，获取请求返回值

目录 引言 请求接口为Post时&#xff0c;传参方法 获取接口请求响应数据 引言 我们在做python接口自动化测试时&#xff0c;接口的请求方法有get,post等&#xff1b;get和post请求传参&#xff0c;和获取接口响应数据的方法&#xff1b; 请求接口为Post时&#xff0c;传参方法…
阅读更多...
C++系列二：数据类型

C++系列二：数据类型

C数据类型 1. 原始类型2. 复合类型3. 类型转换3.1 隐式类型转换3.2 显式类型转换 4. 总结&#xff08;手稿版&#xff09; 1. 原始类型 C 中的原始类型包括整型&#xff08;integral types&#xff09;、浮点型&#xff08;floating-point types&#xff09;、字符型&#xff…
阅读更多...
涨薪60%，从小厂逆袭，坐上美团技术专家（面经+心得）

涨薪60%，从小厂逆袭，坐上美团技术专家（面经+心得）

前言 大多数情况下&#xff0c;程序员的个人技能成长速度&#xff0c;远远大于公司规模或业务的成长速度。所以&#xff0c;跳槽成为了这个行业里最常见的一个词汇。 实际上&#xff0c;跳槽的目的无非是为了涨薪或是职业发展&#xff0c;我也不例外。普通本科毕业后&#xf…
阅读更多...
计算机网络基础知识（一）计算机发展史、网络设备、网络结构及拓扑

计算机网络基础知识（一）计算机发展史、网络设备、网络结构及拓扑

文章目录 01 | 网络设备02 | 网络结构 && 拓扑 网络发展史可以追溯到20世纪60年代&#xff0c;当时美国国防部高级研究计划署&#xff08;ARPA&#xff09;启动了一个名为 ARPANET 的项目&#xff0c;旨在建立军事目的的分布式通信网络&#xff0c;使得网络中的任何一台…
阅读更多...
【redis】redis红锁Redlock算法和底层源码分析

【redis】redis红锁Redlock算法和底层源码分析

【redis】redis红锁Redlock算法和底层源码分析 文章目录 【redis】redis红锁Redlock算法和底层源码分析前言一、当前代码为8.0版&#xff0c;接上一步分布式锁的主要考点lock加锁关键逻辑unlock解锁关键逻辑 二、redis分布式锁-Redlock红锁主页说明:目前所写的分布式锁还有什么…
阅读更多...
c++自学笔记(陆续更新)

c++自学笔记(陆续更新)

本笔记为从菜鸟教程边学边记录的笔记---》C 教程 | 菜鸟教程 面向对象程序设计 封装&#xff08;Encapsulation&#xff09;&#xff1a;封装是将数据和方法组合在一起&#xff0c;对外部隐藏实现细节&#xff0c;只公开对外提供的接口。这样可以提高安全性、可靠性和灵活性。…
阅读更多...
C语言入门教程｜｜C语言 头文件｜｜C语言 强制类型转换

C语言入门教程｜｜C语言 头文件｜｜C语言 强制类型转换

C语言 头文件 头文件是扩展名为 .h 的文件&#xff0c;包含了 C 函数声明和宏定义&#xff0c;被多个源文件中引用共享。有两种类型的头文件&#xff1a;程序员编写的头文件和编译器自带的头文件。 在程序中要使用头文件&#xff0c;需要使用 C 预处理指令 #include 来引用它…
阅读更多...
USART串口接收

USART串口接收

文章目录 运行环境&#xff1a;1.1 串口接收代码分析1)开启接收中断和空闲中断2)接收存储变量声明和定义3)中断处理函数 2.1实验效果 运行环境&#xff1a; ubuntu18.04.melodic 宏基暗影骑士笔记本 stm32f427IIH6 stlink 9-24v可调电源 usb转串口 杜邦线转4pin 1.1 串口接收…
阅读更多...
Python | 人脸识别+活体检测+背景模糊+关键点检测系统（Face_Recognition+dlib+OpenCV+MediaPipe+PyQt）

Python | 人脸识别+活体检测+背景模糊+关键点检测系统（Face_Recognition+dlib+OpenCV+MediaPipe+PyQt）

本博客为人脸识别系统项目简介 项目GitHub完整源代码地址&#xff1a; 一、运行环境 本系统能够运行在基于PC操作系统Windows环境下&#xff0c;要求Windows操作系统安装Python 3.9 及以上环境&#xff0c;且已安装MySQL数据库。 Python3.9 安装&#xff1a;Python 3.9安装教程…
阅读更多...
【UE】坦克开火

【UE】坦克开火

1. 添加开火的操作映射 2. 创建一个actor蓝图类&#xff0c;添加一个静态网格体组件 添加发射物移动组件 设置初始速度和最大速度 发射物重力范围设为0.05 添加音频组件 设置音效 3. 打开炮管的静态网格体 在插槽管理器中创建插槽 将创建的插槽放到炮口位置 4. 打开“BP_BaseT…
阅读更多...
B-Tree (多路查找树)分析-20230503

B-Tree (多路查找树)分析-20230503

B-Tree (多路查找树)学习-20230503 前言 B-树是一类多路查询树&#xff0c;它主要用于文件系统和某些数据库的索引&#xff0c;如果采用二叉平衡树访问文件里面的数据&#xff0c;最坏情况下&#xff0c;磁头可能需要进行O(h)次对磁盘的读写&#xff0c;其中h为树的高度&…
阅读更多...
探究Android插件化开发的新思路——Shadow插件化框架

探究Android插件化开发的新思路——Shadow插件化框架

Shadow插件化框架是什么&#xff1f; Shadow是一种Android App的插件化框架&#xff0c;它利用类似于ClassLoader的机制来实现应用程序中的模块化&#xff0c;并让这些模块可以在运行时灵活地进行加载和卸载。Shadow框架主张将一个大型的Android App拆分成多个小模块&#xff…
阅读更多...
提升V-Ray渲染效率的五个实用技巧！

提升V-Ray渲染效率的五个实用技巧！

Chaos V-Ray是一个 3D渲染插件&#xff0c;可用于所有主要的 3D设计和 CAD程序。V-Ray可以和 3ds Max、Cinema 4D、Houdini、Maya、Nuke、Revit、Rhino、SketchUp和 Unreal无缝协作。艺术家和设计师也可以通过使用 V-Ray的实时光线来追踪探索和分享自己的项目&#xff0c;并渲染…
阅读更多...
SpringBoot调取OpenAi接口实现ChatGpt功能

SpringBoot调取OpenAi接口实现ChatGpt功能

很高兴和大家分享我实现的一个小项目&#xff0c;利用 Spring Boot 实现了一个 ChatGpt 对话系统。在本文中&#xff0c;我将详细介绍这个项目的实现步骤&#xff0c;以及代码实现。 什么是 ChatGpt ChatGpt 是一种基于 GPT 技术的对话系统&#xff0c;能够生成连贯、流畅、…
阅读更多...
V-Ray怎么快速渲染_渲染加速小技巧

V-Ray怎么快速渲染_渲染加速小技巧

很多小伙伴在使用V-Ray渲染器的时候都想要更加快速的出图&#xff0c;今天Renderbus瑞云渲染就给大家分享一下V-Ray渲染加速的小技巧。 在了解渲染加速技巧之前&#xff0c;我们首先要了解渲染制作主要受两个因素影响——图像质量和渲染时间&#xff0c;高图像质量是以长渲染时…
阅读更多...
k8s集群搭建（3主2从）

k8s集群搭建（3主2从）

目录 kubeadm 和二进制安装 k8s 适用场景分析 多 master 节点高可用架构图 集群环境准备 部署过程 修改主机内核参数&#xff08;所有节点&#xff09; 配置阿里云的repo源&#xff08;所有节点&#xff09; 配置国内安装 docker 和 containerd 的阿里云的 repo 源 配置…
阅读更多...
day11 TCP连接管理与UDP协议

day11 TCP连接管理与UDP协议

目录 ​编辑 连接的建立——”三次握手” 连接的释放——“四次挥手” 保活计时器 用户数据报协议 UDP​编辑 连接的建立——”三次握手” TCP 建立连接的过程叫做握手。 采用三报文握手&#xff1a;在客户和服务器之间交换三个 TCP 报文段&#xff0c;以防止已失效的连接…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023