Vue的学习之模板语法(指令)

一、指令

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue的学习</title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><!-- Vue中判断的指令，会根据当中属性seen的值来判断是否添加或移除标签里面的内容 --><p v-if='seen'>现在你看到我了</p><!-- 用v-bind来绑定一个参数 --><a v-bind:href="url1">百度1</a><!-- 同时也可以实现动态参数 --><!-- 这里要注意个小细节，就是浏览器会将v-bind:[特性名]里的特性名强制转换为小写，导致vue实例的data属性特性名没有对应。 --><a v-bind:[attributename]="url2">百度2</a><!-- v-bind的缩写是:v-on的缩写是@--><!-- 这里给最内层click属性加上了一个修饰符.stop让外层的click不执行他的效果--><div @click='click1'><div @click.stop='click2'>click me</div></div></div><script type="text/javascript">var vm = new Vue({el: "#app",data: {seen: false,url1: "http://www.baidu.com",attributename: "href",url2: "http://www.baidu.com",},// 这里我们会用到Vue中的一个methods属性，// 用来存放专门的一些函数方法的methods: {click1: function() {console.log('click1....');},click2: function() {console.log('click2....');}}});</script></body>
</html>