vue学习(一)

1.vue是用于构建用户界面的渐进式js框架,自底向上逐层的应用:

  • 简单应用:只需一个轻量小巧的核心库;

  • 复杂应用:可以引入各式各样的vue插件;

2.vue特点:

  • 采用组件化模式,提高代码复用率,更好维护(一个vue文件包含html css js,就是一个组件)

  • 声明式编码,编码人员无需直接操作dom,提高开发效率

  • 使用虚拟dom+优秀的diff算法,尽量复用dom节点

3.官网地址:cn.vuejs.org 

  • 风格指南:代码风格指南,个人习性写法差异参考

  • cookbook:编码技巧

  • 团队:一些插件,代码例子

4.初始vue

  • 创建vue实例,传入一个配置对象(指定容器)

  • vue实例和容器一一对应

  • 容器代码依旧符合html规范,只不过混入特殊vue语法

  • data数据改变,页面用到data的地方自动变

5.vue模版语法两大类

插值语法:

  •     功能:解析标签体内容

  •     写法:{{xx}}  xx要写js表达式,xx自动读取到data所有属性

指令语法:

  •     功能:解析标签(包括:标签属性,标签体内容,绑定事件.......)

  •     写法:v-bind:href="xx" 简写为 :href="xx", xx要写js表达式,xx自动读取到data所有属性 

  •     PS:     vue中有很多指令 形式:v-????

6.vue中有两种数据绑定方式

  •     v-bind:数据只能从data流向页面

  •     v-model 数据双向流通   简写形式 v-model="name"

7.关于el 和 data

  • el除了初始化配置,也可以后续通过vue实例vm.$mount('#root')指定

  • data除了对象示,也可以使用函数式:data(){

     ...

     return{name:'china'}

     }

8.vue设计参考mvvm,v不仅可以使用data里面的,也可以使用默认vm里面的数据

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python中关于电商商品数据的采集【taobao/JD/商品详情数据返回】

在Python中采集电商商品数据(如淘宝、京东等)通常涉及到网络爬虫(web scraping)或称为网络数据抓取(web data scraping)。由于电商平台通常会有反爬虫机制,因此直接抓取数据可能会遇到各种挑战&…

基于51单片机的智能水表

一.硬件方案 本设计主要以51单片机作为主控处理器的智能水表,该水表能够记录总的用水量和单次用水量,当用水量超出设定值时系统发出声光报警提醒,水量报警值能够通过按键进行自行设置,并且存储于AT24C02中,并且可以测…

C++11默认成员函数控制

默认成员函数有 如果自己不显示声明,那么默认编译器会自己生成一个 如果有一个构造函数被声明了,那其他的默认函数编译器就不会再生成 这样的有时又不生成,容易造成混乱,于是C11让程序员可以控制是否需要编译器生成。 显式缺省函…

H5112B 降压恒流芯片12V24V36V48V60V72V100V 1.2ALED 调光无频闪光滑细腻

H5112B多功能LED恒流驱动器是一款具有良好性能与高度集成度的驱动芯片。以下是该产品的主要优点及应用领域的详细分析: 产品优点: 宽电压输入范围:H5112B支持5V至90V的宽电压输入范围,使其能够适应多种不同的电源环境&#xff0…

(虚拟机)VMware软件的安装及Ubuntu系统安装

一、VMware软件的安装 软件下载,可以自己找或者百度网盘下载: 通过百度网盘分享的文件:ubuntu16…等2个文件 链接:https://pan.baidu.com/s/1VEnZKY9DJ1T1vC3ae20gKQ 提取码:11b6 复制这段内容打开「百度网盘APP 即可获取」 1、解压VMwar…

本地生活元宇宙 橘子浑身都是宝,吃对营养加倍

橘子是秋冬季节的应季水果 含有丰富的营养价值 而且浑身都是宝 但你知道吗 吃橘子也是有讲究的 如何吃橘子才能营养最大化? 橘子有哪些食用禁忌? 一起来看看吧~ 划重点 一颗橘子,3大营养 橘子具有开胃理气、止渴润肺、治胸膈结气、…

06--jenkins构建CI_CD

前言:上一篇文章整理了git的部署和使用,这章主要复习持续集成软件Jenkins,这个技术现在在云计算方面也是有应用的,同时也是越高级越智能的软件代表。 1、概念简介 1)jenkins是什么 Jenkins是一个开源的、可扩展的持…

Linux 终端窗口设置为透明

Linux 终端窗口设置为透明 打开终端 右键鼠标 选择Profile Preferences 点击Background 选择 Transparent background 拖动滑条调整透明度 完成。

Nintex流程平台引入生成式人工智能,实现自动化革新

工作流自动化提供商Nintex宣布在其Nintex流程平台上推出一系列新的人工智能驱动改进。这些增强显著减少了文档化、管理和自动化业务流程所需的时间。这些新特性为Nintex流程平台不断扩展的人工智能能力增添了新的亮点。 Nintex首席产品官Niranjan Vijayaragavan表示&#xff1a…

甄嬛传熹贵妃上户口:如果让他陪你过冬天,那朕能不能睡中间?贝叶斯模型推导爸爸去哪儿

关注微信公众号 数据分析螺丝钉 免费领取价值万元的python/java/商业分析/数据结构与算法学习资料 背景 《甄嬛传》是大家耳熟能详的宫廷剧,其中复杂的宫斗情节和深刻的人物刻画让人津津乐道。甄嬛因为与皇帝(四郎)闹翻了,去甘露寺待了一段时间&#x…

Navicat和SQLynx产品功能比较一(整体比较)

Navicat和SQLynx都是数据库管理工具,在过去的二十年中,国内用户主要是使用Navicat偏多,一般是个人简单开发需要,数据量一般不大,开发相对简单。SQLynx是最近几年的数据库管理工具,Web开发,桌面版…

PyTorch C++扩展用于AMD GPU

PyTorch C Extension on AMD GPU — ROCm Blogs 本文演示了如何使用PyTorch C扩展,并通过示例讨论了它相对于常规PyTorch模块的优势。实验在AMD GPU和ROCm 5.7.0软件上进行。有关支持的GPU和操作系统的更多信息,请参阅系统要求(Linux&#xf…

代码安全问题0

该篇目主要是记录日常遇到的代码安全问题的记录 # 清空会话的RAM del combined_list gc.collect()# 重新读取上述合成的NPZ文件为一个新的文件 combined_arrays [] for i in range(1, batch_count 1): # 从1到batch_count1,包括剩余的最后一个文件data np.load(…

SpringBoot使用jasypt实现数据库信息的脱敏,以此来保护数据库的用户名username和密码password(容易上手,详细)

1.为什么要有这个需求? 一般当我们自己练习的时候,username和password直接是爆露出来的 假如别人路过你旁边时看到了你的数据库账号密码,他跑到他的电脑打开navicat直接就是一顿连接,直接疯狂删除你的数据库,那可就废…

字符数组基础知识及题目

死识。。。 字符该如何存储呢?这一点我们在以前就接触过了。用char来存储。 如何输入一个单词呢? char a[10002]; scanf("%s",a); 就不用地址符了。 如何输入句子呢? char a[100002]; gets(a); gets是读入句子的&#xff0c…

从0开发一个Chrome插件:高级功能开发——存储数据

前言 这是《从0开发一个Chrome插件》系列的第十六篇文章,本系列教你如何从0去开发一个Chrome插件,每篇文章都会好好打磨,写清楚我在开发过程遇到的问题,还有开发经验和技巧。 专栏: 从0开发一个Chrome插件:什么是Chrome插件?从0开发一个Chrome插件:开发Chrome插件的必…

【第7章】Vue之第一个Vue程序(Vue创建)

文章目录 前言一、创建1. 命令行2. 创建3. 安装依赖 二、启动三、访问总结 前言 接下来我们通过VSCode来创建我们的第一个Vue应用程序。 一、创建 1. 命令行 Terminal>New Terminal 2. 创建 #这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工…

中介子方程十六

X$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXtXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXtXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XαXηXtXαX$XWXyX$XyXWX$XpXαXqXηX$XeXαXhX$XdX$XpX$XdX$XyXeXαX$XEXyXαXiX$XαXiXrX…

如何使用Python中的type()函数和isinstance()函数

在Python中,type()函数和isinstance()函数都用于确定一个对象的类型,但它们在用法和目的上有所不同。 1. type()函数 type()函数返回对象的数据类型(或类)。它接受一个参数(即要检查的对象),并…

Web前端Block:深度探索与未来挑战

Web前端Block:深度探索与未来挑战 Web前端Block,作为现代网页开发的核心组件,承载着展现页面内容、实现交互逻辑的重要任务。本文将从四个方面、五个方面、六个方面和七个方面,对其展开深入探讨,并揭示其中蕴含的挑战…