html展示值 vue_vue在html使用
1.Vue:
定义:渐进式JavaScript框架
渐进式:
定义:声明渲染 组件系统 客户端路由 集中式状态管理 项目构建
2.MVVM
定义
M
Model(服务器上的业务逻辑操作)
V
View(页面)
MV
ViewModel(Model与View之间核心枢纽,比如Vue.js)
3.指令: 指令的本质是自定义属性
4.闪动
问题产生:出现模版语法{{msg}}
解决思路:使用v-cloak指令
解决问题原理:先隐藏,替换好值之后在显示
demo
code
{{msg}}
[v-cloak]{display: none;}
var vu = new Vue({
el:"#app",
data:{
msg:"hello vue"
},
});
5.数据绑定指令
v-text:填纯文本,属于html片段
v-html:填写html,属于完整html
v-bind:填写属性,属于html片段
v-pre:如果原始数据,跳过编译
v-once:如果显示的信息后续不需要再修改,使用v-once,这样可以提高性能。
demo:
code
这是v-bind
var vm = new Vue({
el:"#app",
data:{
link1:"https://www.cnblogs.com/MDD-Blog/",
img:"./img/logo.png",
msg:"这是v-text",
html:"
这是v-html
",
preInfo:"这是v-pre",
onceInfo:"这是v-once"
},
});
6.双向数据绑定
原理:v-model ----> vue ----> data{k:v,}
demo
code
var vm = new Vue({
el:".app",
data:{
msg : "hello world",
message: "hello vue",
},
});
7.事件绑定
v-on:事件名="方法" 事件名:点击: click 移动: mouseenter 双击: dbclick
demo1: 事件函数调用
code:事件函数调用
1.加一
减一
var vm = new Vue({
el:".app", /* 元素的挂载位置 */
data:{
num:15,
}, /* 模型数据(值是一个对象) */
methods:{
add:function(){
this.num++
},
reduce:function(){
this.num--
}
}
});
demo2: 事件函数传参
code:事件函数传参
1.加一
减二
var vm = new Vue({
el:".app", /* 元素的挂载位置 */
data:{
num:15,
}, /* 模型数据(值是一个对象) */
methods:{
add:function(event){
// 这里 this 是 vue 的实例对象
console.log(event.target.innerHTML)
this.num++
},
reduce:function(num2, e){
this.num-=num2
}
}
});
注意:
减二 // $event为事件参数必须放到末尾
v-if
a
b
c
不是a或b或c
new Vue({
el: '#app',
data: {
name: 'c'
}
})
v-show
code:
Hello!
v-if和v-show的区别
v-if :每次都会重新删除或者创建元素
v-show:每次不会重新进行DOM元素的删除和创建操作,只是切换了元素的 display:none 样式
v-for
demo:
code:
ID:
NAME:
{{ item.id }}
var vm = new Vue({
el:"#app",
data:{
id:"",
name:"",
infos:[
{id:1,name:"11"},
{id:2,name:"22"},
{id:3,name:"33"},
{id:4,name:"44"},
],
},
methods:{
add:function(){
// 列表尾部添加
// this.infos.push({id:this.id, name:this.name})
// 列表头部添加
this.infos.unshift({id:this.id, name:this.name})
},
}
})
html展示值 vue_vue在html使用相关推荐
- html展示值 vue_vue中html页面写入$t(‘’)怎么显示
Send Push Notifications to iOS Devices using Xcode 8 and Swift 3, APNs Auth Key Send Push Notificati ...
- Ejabberd源码解析前奏--配置
一.基本配置 配置文件将在你第一次启动ejabberd时加载,从该文件中获得的内容将被解析并存储到内部的ejabberd数据库中,以后的配置将从数据库加载,并且任何配置文件里的命令都会被添加到数据库里 ...
- 基于ggplot2的解剖图和组织模块可视化
摘要 将数据显示到解剖结构上,是一种可以快速观察组织相关信息的便捷技术.然而,绘制组织是一项复杂的任务(a complex task),需要解剖学和艺术方面的专业知识.虽然已经存在可用于在解剖图上显示 ...
- 50个ggplot2可视化案例
什么类型的可视化用于什么类型的问题?本文可帮助您为特定分析目标选择正确的图表类型,以及如何使用ggplot2在R中实现它. 本文转载自"R友舍",已获授权,点我跳转原文链接 本文翻 ...
- 吐血整理:24种可视化图表优缺点对比,一图看懂!
来源:大数据DT 本文约3900字,建议阅读7分钟 史上最全图表类型术语&指南来了! 安德鲁·阿伯拉(Andrew Abela)制作的<这份指南>(This Guide)是思考图表 ...
- Zabbix监控交换机设置方法
说明: Zabbix监控服务端已经配置完成,现在要使用Zabbix对交换机进行监控. 具体操作: 以下操作在被监控的交换机上进行,这里以Cisco交换机为例. 一.登录到Cisco交换机,开启snmp ...
- RTB撕开黑盒子 Part 1: Datacratic's RTB Algorithms
这篇文章是讨论Datacratic所用的统计和经济理论的一些内容.我们开发了real time bidding算法s.为了实现广告主的目标,我们的算法自动地利用其它广告主的次优策略,并再查看广告的底价 ...
- tableau必知必会之学做常用的倾斜图(slopegraph)
倾斜图 slopegraph(又名斜线图或斜率图)可以展示单指标不同时期的变化.既能展示值的大小变化,也能同时展示排名的变化. 例如下图,我们以"赛队名次"为指标查看以下20支赛队 ...
- 2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...
最新文章
- More Effective C++: 01基础议题
- 写一个“特殊”的查询构造器 - (四、条件查询:复杂条件)
- php网站标签加小图标,在htmltitle/title标签添加图标,网页title左边显示网页的logo图标...
- 助力共享经济,芝麻信用背后的技术
- mongo04---基本查询
- C#图解教程 第十八章 枚举器和迭代器
- 小小串联电阻,大大的作用
- 全国身份证号码归属地表格
- 【ICCV2019论文阅读】PU-GAN:点云上采样对抗网络
- Python快速读取超大文件
- 2.07 CISC与RISC
- [转摘]如何让你的计算机无线网卡和有线网卡同时使用
- flash游戏代码html5,Flash贪吃蛇游戏AS代码翻译
- backtrack 4 in virtualBox 联网
- 再见 xxl-job!更强大的新一代分布式任务调度框架来了
- 计算机硬件故障可分为哪几类,计算机硬件故障有哪些(浅谈计算机硬件故障的识别与处理)...
- python爬电影_Python爬虫项目--爬取猫眼电影Top100榜
- office2016激活後显示是激活的状态,打开后还是提示激活:“让我们开始”
- c语言给坐标求多边形面积,多边形的面积问题
- 实验四 数据查询——简单查询 Sql Server数据库实验
热门文章
- appium入门篇(2)--desired capabilities
- ansible-playbook 单个yml文件部署tomcat简单示例
- Java 中的array数组总结之一
- 当碰到非ARC写的文件时在ARC环境下运行报错时解决办法
- srt乱码字幕中文显示解决办法
- [游戏] - 游戏教程
- java quartz实例_Java任务调度框架Quartz教程实例
- 计算机图形学跳一跳_微信小游戏“跳一跳”对内部审计师的启示
- google protobuf windows下环境配置
- shell之判断文件是否存在