Vue的模板语法
基本语法
<body>
<script src="vue.js"></script>
<div id="app">
{{ msg }}
<div v-html='html'>
<input type="button" value="改变" @click="fc">
<div class="box" :class="{active:is_ok}" :class="['active']"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
html:"<p>hello</p>",
msg: 'hello',
is_ok: false
},
methods: {
fc: function () {
this.msg = 'ssss' }
}
})
</script>
v-text相当于innerText |
v-html相当于innerHTML |
v-if vs v-show v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 <h1 v-if="age>15">{{ age }}</h1> |
v-bind可以绑定标签中任何属性 v-bind:src 等价于 :src |
v-on 可以监听 js中所有事件 v-on:click 等价于 @click |
class 两种绑定方式: 1. :class="{active:is_ok}" 2. :class="['active']" 三元运算符 <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> |
事件处理 阻止单击事件继续传播 <a v-on:click.stop="fun"></a> 提交时间不在重载页面 <form v-on:submit.prevent="onSubmit"></form> 串联 <a v-on:click.stop.prevent="fun"></a> |
循环
<ul> |
表单输入绑定(用v-model) <input type="text" v-model="username"> <textarea v-model="info"></textarea> |
单选框绑定 {{ xb }} |
多选框 xb: [] |
<select v-model="xb"> |
计算属性和监听属性 计算(vue推荐方法) fnc() { |
过滤器 <div id="app"> |
axios(ajax) var demo = new Vue({ |
组件-基础 (面包屑导航)
<style> |
组件02
<style> |
vue 跨域解决方法 dev: { // Paths |
Vue的模板语法的更多相关文章
- vue基础---模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...
- VUE:模板语法(小白自学)
VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue基础之Vue的模板语法
Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...
- 前端框架之Vue(2)-模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue常用模板语法
常用模板语法 本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只 ...
- vue基础——模板语法
模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...
- 一起学Vue之模板语法
概述 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTM ...
- Vue小白篇 -Vue 的模板语法
可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...
随机推荐
- go---weichart个人对Golang中并发理解
个人觉得goroutine是Go并行设计的核心,goroutine是协程,但比线程占用更少.golang对并发的处理采用了协程的技术.golang的goroutine就是协程的实现. 十几个gorou ...
- mysql03---触发器
触发器trigger:某条数据改变,希望其他数据也改变(一张表的数据改变,另一张表的数据也变).监测insert,update,delete.能够监测增删改并出发增删改. 监测点(table)监测事件 ...
- 深入了解以太坊虚拟机第4部分——ABI编码外部方法调用的方式
在本系列的上一篇文章中我们看到了Solidity是如何在EVM存储器中表示复杂数据结构的.但是如果无法交互,数据就是没有意义的.智能合约就是数据和外界的中间体. 在这篇文章中我们将会看到Solidit ...
- 【转】Java 并发编程:volatile的使用及其原理
一.volatile的作用 在<Java并发编程:核心理论>一文中,我们已经提到过可见性.有序性及原子性问题,通常情况下我们可以通过Synchronized关键字来解决这些个问题,不过如果 ...
- RDA GUI
创建服务:“sysapp_table.h” / "dvb_guiobj_table.h" / "atv_guiobj_table.h" “服务”与“回调” ...
- combox组合框设置高度
组合框设置高度 转载 2013年10月24日 22:54:03 1033 MFC进行界面编程时,组合框CComboBox控件在可视化设计组件的时候是无法进行高度编辑的,但是我们在实际的项目中经常需要定 ...
- java笔记之线程方式1启动线程
* 需求:我们要实现多线程的程序. * 如何实现呢? * 由于线程是依赖进程而存在的,所以我们应该先创建一个进程出来. * 而进程是由系统创建的,所以我们应该去调用系统功能创建一个进程. * ...
- bzoj 2257: [Jsoi2009]瓶子和燃料【裴蜀定理+gcd】
裴蜀定理:若a,b是整数,且gcd(a,b)=d,那么对于任意的整数x,y,ax+by都一定是d的倍数,特别地,一定存在整数x,y,使ax+by=d成立. 所以最后能得到的最小燃料书就是gcd,所以直 ...
- 利用动态扫描和定时器1在数码管上显示出从765432开始以1/10秒的速度往下递减 直至765398并保持此数,与此同时利用定时器0以500MS速度进行流水灯从上至下移动 ,当数码管上数减到停止时,实验板上流水灯出停止然后全部开始闪烁,3秒后(用 T0定时)流水灯全部关闭,数码管上显示出“HELLO”,到此保持住
#include <reg52.h> #include <intrins.h> #define uchar unsigned char #define uint unsigne ...
- 软件常用版本英文snapshot和ga
版本号,顾名思义,系统.架包.软件的标识号.版本号的数字信息通俗易懂, 格式:主版本号+次版本+(修正版本号build-可选)+(编译版本号-可选)+英文常见号(重点). 常见号:英文各种架包名,Ma ...