VUE:模板语法(小白自学)

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:模板语法(小白自学) 的全部内容, 来源链接: utcz.com/z/379267.html

回到顶部