项目既有vue又有html,01-vue指令
什么是vue.js
vue.js 是目前最火的一个前端框架,react是最流行的一个前端框架(react除了开发网站,还可以开发手机app, vue语法也是可以用于进行手机app开发的,需要借助于weex)
vue.js 是前端的主流框架之一,和angular.js、react.js 一起,并成为前端三大主流框架!
vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(vue有配套的第三方类库,可以整合起来做大型项目的开发)
框架和库的区别
框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
vue指令之v-text和v-html
v-cloak : 能够解决插值表达式的网速不佳时的闪烁问题
v-text : 1.没有闪烁问题
2.会覆盖元素原有的值
v-html :1.会覆盖元素原有的值
2.渲染html元素
vue指令之v-bind的三种用法
v-bind :用于绑定属性的指令,绑定的值符合js编码规范
直接使用指令v-bind
使用简化指令 :
在绑定的时候,拼接绑定内容::title="btntitle + ', 这是追加的内容'"
v-bind 缩写
...
...
vue指令之v-on
v-on :用于绑定事件
v-on 缩写
...
...
案例:跑马灯效果
1.html解构
{{info}}
2. vue实例
// 创建 vue 实例,得到 viewmodel
var vm = new vue({
el: '#app',
data: {
info: '猥琐发育,别浪~!',
intervalid: null
},
methods: {
go() {
// 如果当前有定时器在运行,则直接return
if (this.intervalid != null) {
return;
}
// 开始定时器
this.intervalid = setinterval(() => {
this.info = this.info.substring(1) + this.info.substring(0, 1);
}, 500);
},
stop() {
clearinterval(this.intervalid);
}
}
});
vue指令之事件修饰符
事件修饰符:
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次
vue指令之v-model和双向数据绑定
v-model : 实现表单元素 和 model 中数据的双向绑定
*注意:只能运用在表单元素中*
案例:简易计算器
1.html结构
+
-
*
÷
2.vue实例
// 创建 vue 实例,得到 viewmodel
var vm = new vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '0'
},
methods: {
getresult() {
switch (this.opt) {
case '0':
this.result = parseint(this.n1) + parseint(this.n2);
break;
case '1':
this.result = parseint(this.n1) - parseint(this.n2);
break;
case '2':
this.result = parseint(this.n1) * parseint(this.n2);
break;
case '3':
this.result = parseint(this.n1) / parseint(this.n2);
break;
}
}
}
});
在vue中使用样式
-使用class样式
数组
这是一个邪恶的h1
2.数组中使用三元表达式
这是一个邪恶的h1
3.数组中嵌套对象
这是一个邪恶的h1
4.直接使用对象
这是一个邪恶的h1
-使用内联样式
直接在元素上通过:style的形式,书写样式对象
这是一个善良的h1
2.将样式对象,定义到data中,并直接引用到:style中
在data上定义样式:
data: {
h1styleobj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
在元素中,通过属性绑定的形式,将样式对象应用到元素中:
这是一个善良的h1
3.在:style中通过数组,引用多个data上的样式对象
在data上定义样式:
data: {
h1styleobj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1styleobj2: { fontstyle: 'italic' }
}
在元素中,通过属性绑定的形式,将样式对象应用到元素中:
这是一个善良的h1
vue指令之v-for和key属性
迭代数组
- 索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}
2.迭代对象中的属性
3.迭代数字
这是第 {{i}} 个p标签
***注意***
2.2.0+ 的版本里,当在组件中使用v-for 时,key 现在是必须的。
当 vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,vue将不是移动 dom 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性
vue指令之v-if和v-show
v-if : 条件为假,移除元素,条件为真,创建元素 *注意:存在较高的性能消耗*
v-show : 条件为假,隐藏元素,条件为真,显示元素 *注意:存在较高的初始渲染消耗*
项目既有vue又有html,01-vue指令相关推荐
- Vue简明实用教程(01)——Vue框架入门
版权声明 本文原创作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl Vue概述 Vue是一个渐进式的JavaScript框架. 官方网站 https://cn.v ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- springboot项目:驾校预约管理系统5y0y2(java+VUE+Mybatis+Maven+Mysql)
springboot项目:驾校预约管理系统5y0y2(java+VUE+Mybatis+Maven+Mysql) 一.项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + H ...
- 4 angular 重构 项目_vuejs angularjs 框架的一些比较(vue项目重构四)
使用Angularjs和Vue.js对比 首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...
- bootstrap项目更改为vue_取代Jquery,用Vue 构建Bootstrap 4 应用
尽管前端程序现在发展迅速,各种框架层出不穷,但是对广大非前端码农来说构建Web界面的最好的选择仍然还是Bootstrap 4.但是Bootstrap依赖于已经严重过时,被抛弃的jQuery组件,那么如 ...
- Vue 学习 之 7.01 学习笔记
Vue 学习 之 7.01 学习笔记 1.还是复习前面的那个"品牌案例管理",但是数据不是静态写死哦,而是动态的管理,向数据库发送相关请求实现,因此,小节和昨天所学就是掌握Vu ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- vue项目中z-index不起作用(将vue实例挂在到window上面)
问题描述:由于原有项目(传统项目)中嵌入新的vue组件,dialog弹出框的z-index:999999:任然不起作用: 解决办法:将vue实例挂载到window 解决代码如下: 入口文件index. ...
- [vue] 说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢?
[vue] 说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢? views目录存放一级路由的组件,即视图组件 Components目录存放组件 Store存放vuex相关文件 ...
- [vue] 你有使用过vue开发多语言项目吗?说说你的做法?
[vue] 你有使用过vue开发多语言项目吗?说说你的做法? 使用Vue-i18n 加载不同的语言配置文件, 重要是初始化时,判断当前语言环境,要想好存储方案 采用i18n来解决国际化问题,关于语言环 ...
最新文章
- linux命令输入错误怎么弄,Linux下用shopt命令来帮我们自动纠错输入cd 错误
- Entity Framework 4.1/4.3 之五 (DBContext 之 2 查询功能)
- spss数据预处理步骤_数据处理之剔除无效问卷
- mysql 对表插入多行_MySQL表中怎么一次插入两行或更多行
- JavaScript之函数
- 加密芯片在水电气表行业内的应用
- Intel® QAT 助力Nginx压缩处理
- halcon 深度学习标注_深度学习in Halcon流程
- lumaqq receiver
- TI高精度实验室-运算放大器-第六节-压摆率
- 【虚拟仿真】Unity3D中如何实现让3D模型显示在UI前面
- EtherCAT 之邮箱
- 高等数学:第五章 定积分(3) 微积分基本公式
- mybitplus name or service not known或quartz couldn‘t get host name
- 树莓派 和 电脑共用显示屏 无屏幕玩转树莓派
- 信安软考 第26章 大数据安全需求分析与安全保护工程
- 黑群晖找不到设备_安装黑群晖必须知道的几个问题和解决办法
- 一些工具 covim, Topcoat, Runscope, Ghost
- 根本无心工作,只想尽快为祖国母亲庆生
- jmeter 使用beanshell 编写脚本
热门文章
- Python入门100题 | 第080题
- 机器学习第8天:IPyhon与Jupyter notebook
- Python--format()学习记录
- ArcGIS Clip(裁剪)时出现000117错误的解决办法
- elasticSearch6源码分析(9)ActionModule
- 互联网主要安全威胁解读及应对方案大讨论 | 高可用架构系列
- java实现sql批量插入参数
- Apache Hadoop YARN – ResourceManager--转载
- Load Balance Tomcat with Nginx and Store Sessions in Redis--reference
- 转载--redis密码管理