一、Vue框架入门-1

news/2024/7/10 0:07:38 标签: vue

(1)官网

https://cn.vuejs.org/v2/guide/

(2)介绍

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!

(3)安装

创建一个 .html 文件,然后通过如下方式引入 Vue:

(3.1)方法一:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

(3.2)方法二

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

(4)声明式渲染

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 v.message 的值,你将看到上例相应地更新。

(4.1) 文本插值

(4.2)代码插值

使用v-html='data名'

(4.3)v-show(true显示,false不显示) 和 v-if 标签(true执行,false不执行)

(4.4)动态绑定class的三种写法

数组与对象的不同之处:数组再添加其它的class

(4.5)动态绑定style的三种写法

(4.6)条件渲染(if,else,else if, for)

(4.6.1)if和else

(4.6.2)for

(4.6.3) if,else if,else

(5)数组更新检测

(6)列表的过滤操作

(7)事件修饰符

阻止冒泡事件发生 或 阻止事件发生: click.self、click.stop、@click.prevent

(8)按键修饰符

(9)表单控件绑定

v-model

(9.1)表单控件绑定:文本框

(9.2)表单控件绑定:复选框、单选框


http://www.niftyadmin.cn/n/1023495.html

相关文章

二、Vue实现购物车功能

根据表单的双向绑定&#xff0c;实现购物车的基本功能&#xff1a; 计算总价 商品增加 商品删除 全选 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthd…

linux下的进程,Linux下的进程

1、查看进程&#xff1a;ps -af(系统进程&#xff1a;ps -ax)#include #include int main(){printf("Running ps with system!\n");system("ps -ax");printf("Done!\n");return 0;}2、替换进程映像exec&#xff1a;#include int main(){printf(&…

传感器 Sensor 加速度【示例】

简介坐标系x轴&#xff1a;从左到右 y轴&#xff1a;从下到上 z轴&#xff1a;从内到外这个坐标系与Android 2D API中的不同&#xff0c;传感器中的返回值都以此坐标系为准。SENSOR_TYPE_ACCELEROMETER 1 //加速度SENSOR_TYPE_MAGNETIC_FIELD 2 //磁力SENSOR_TYPE_O…

三、Vue入门-2(fetch、axios、计算属性)

&#xff08;1&#xff09;表单修饰符 &#xff08;2&#xff09;fetch 获取json文件中的数据&#xff0c;并显示到页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" conte…

c语言简单文法

<程序>-><外部声明>|<程序><外部声明> <外部声明>-><函数定义>|<定义> <函数定义>-><函数类型说明>|<形式参数><复合语句> <函数类型说明>->void|int|float|char <形式参数>->&…

linux怎能查硬盘通电时间,查看LINUX服务器型号磁盘加电时长

有时服务器部署多年后,已经记不得服务器型号&#xff0c;但是跑机房又多有不便&#xff0c;查了下资料使用以下命令即可轻松实现显示LINUX服务器型号&#xff1a;sudo dmidecode |grep Product查看硬盘使用时长&#xff1a;需要先安装&#xff1a;yum install smartmontools -y…

四、组件化开发--1(组件定义,父传子,子传父)

&#xff08;1&#xff09;定义全局组件&#xff08;component&#xff09; 注意:组件必须要有一个父标签包裹 &#xff08;2&#xff09;定义局部组件 &#xff08;3&#xff09;组件与实例的区别 1&#xff09;注意:组件必须要有一个父标签包裹 2&#xff09;data必须是一个…

五、Vue-ref通信

&#xff08;1&#xff09;通过this&#xff0c;获取信息中包含ref &#xff08;2&#xff09;通过this.$refs.mytext.value&#xff0c;获取输入框中的值 &#xff08;3&#xff09;通过ref,父组件获取孩子组件的值&#xff08;或向孩子组件传值&#xff09; 通过this&#xf…