VUE：模板语法（小白自学）
VUE：模板语法
一：何为声明式
安装规定的语法，去实现一些效果（不需要管流程）。
二：模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1 模板的理解：动态的html页面，包含了一些js语法代码
双大括号表达式
指令（以v-开头的自定义标签属性）
2 双大括号表达式
语法：{{exp}} 或 {{{exp}}}
功能：向页面输出数据
可以调用对象的方法
3 指令一：强制数据绑定
功能：指定变化的属性值
完整写法：
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法：
:xxx='yyy'
4 指令二：绑定事件监听
功能：绑定指定事件名的回调函数
完整写法：
v-on:click='xxx'
简洁写法：
@click='xxx'
--> <div id="app">
<h2>1、双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p> <!--msg是变量，可以写js表达式-->
<p v-text="msg2"></p> <!-- 写入文本 value textContent-->
<p v-html="msg2"></p> <!-- 转换成html语句 innerHTML-->
<h2>2、指令一:强制数据绑定</h2>
<img v-bind:src="imgUrl" />
<img :src="imgUrl" />
<h2>3、指令二：绑定事件监听</h2>
<button v-on:click="test">点击有惊喜</button>
<button @click="test2(msg)">点击还有惊喜</button> <!-- 可以传变量-->
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'taosir is studing...',
msg2:'<a href="http://www.baidu.com">taosir is here!</a>',
imgUrl:'https://www.baidu.com/img/baidu_jgylogo3.gif'
},
methods:{
test(){
alert("意不意外！");
},
test2(m){
alert(m);
}
}
})
</script>
</body>
</html>
VUE：模板语法（小白自学）的更多相关文章
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- Vue模板语法（一）
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- Vue 模板语法 && 数据绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 初始Vue、Vue模板语法、数据绑定（2022/7/3）
文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...
- (Vue)vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
- Vue模板语法（二）
Vue基础模板语法 二 1. 样式绑定 1.1 class绑定 使用方式:v-bind:class="expression" expression的类型:字符 ...
- (32)Vue模板语法
模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...
- 11 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...
随机推荐
- MPlayer 开始支持RTSP/RTP流媒体文件
hostzhu点评:MPlayer对流媒体的支持,让大家能更进一步地利用linux来看网络直播,对Linux下多媒体应用的推动作用可以说不可度量. RTSP/RTP streaming support ...
- TP框架 mysql子查询
一些比较复杂的业务关系,用子查询解决. 比循环便利要好的多哈. 比如下面这句 select 和where in 语句都用了子查询. 因为父查询在select里,所以用了select的字段当子查询的条件 ...
- 【hihocoder 1303】模线性方程组
[题目链接]:http://hihocoder.com/problemset/problem/1303 [题意] [题解] /* x % m[1] = r[1] x % m[2] = r[2] x = ...
- BA-siemens-insight_designer不支持win7 64位操作系统
如果把insight安装在win7 64位操作系统中,在编辑图形界面的时候,designer会出现下面的错误对话框,侬还是老老实实的安装32位的系统吧!
- 快速排序、查第k大
参考这里,提到两种方法,并说第二种好: http://www.cnblogs.com/qsort/archive/2011/05/09/2041653.html qsort的每一趟中,选定pivot以 ...
- getColor()方法过时的替代方法
Android SDK 升級到 23 之後,getResource.getColor(R.color.color_name) 過時 使用新加入的方法 ContextCompat.getColor(co ...
- Jasperreport+ireport 实践操作及web应用
Jasperreport+ireport 实践操作及web应用 学习完jasperreports+ireport,给我感觉深刻,不仅掌握了报表开发技术,还掌握了怎样在web中生成pdf,xls,r ...
- UI各种小控件的用法
今天给大家列举出来UI中的一些小控件的用法.方便大的学习与使用 一些方法和属性我们能够查看API文档.不必将每一个控件的功能都记住, 由于在使用的过程中,我们能够查看API文档.方便使用,我们仅仅要记 ...
- 24岁菜鸟，能一个人撑起App开发吗
"疲惫吾心.怎样躲藏.四处荒芜,怎话忧伤?"临近中秋,看到艾瑞斯的QQ签名,无尽的伤感.这个年仅24的青年.连续3年没有回家了,近期一个月总是失眠,没有家人的陪伴,就连女朋友 ...
- linux虚拟机网络设置好ping百度没有用
场景:公司内网,本机使用的是本地连接,不是wiff,虚拟机设置了桥接模式 问题:使用桥接模式 启动好网络服务,查看ifconfig也获取到了设置的ip,可是ping了www.baidu.com还是没有 ...