1.模板的理解:
动态的html页面
包含了一些JS语法代码
双大括号表达式
指令(以v-开头的自定义标签属性)
2.双大括号表达式
语法: {{exp}}
功能:向页面输出数据
可以调用对象的方法
3.指令一:强制数据绑定
功能:指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy 会作为表达式解析执行
简洁写法:
:xXx= 'yyy'
4.指令二:绑定事件监听
功能:绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx‘
下面是一个实例完整代码：
<body>
<div id="app">
<h2>1.双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<p v-text="msg"></p><!--textContent-->
<p v-html="msg"></p><!--innerHTML-->
<!--相当于<p>{{msg}}</p>-->
<h2>2.指令一：强制数据绑定</h2>
<img src="imgUrl">
<img v-bind:src="imgUrl">
<img :src="imgUrl"><!--属性前加：-->
<h2>3.指令二：绑定事件监听</h2>
<button v-on:click="test1">test1</button>
<button @click="test2(msg)">test2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'<a href="http:/www.atguigu.com">I Will Back!</a>',
imgUrl:'https://cn.vuejs.org/images/logo.png'
},
methods:{
test1(){
alert('Welcome!')
},
test2(content){
alert(content)
}
}
})
</script>
</body>
效果图如下：
在该实例中{{msg.toUpperCase()}}的作用是将msg中的内容全部显示为大写；<p v-text="msg"></p>与<p>{{msg}}</p>作用相似，其属性均为textContent，而<p v-html="msg"></p>的属性是innerHTML，不同的还有<p v-text="msg"></p>是把msg中无论是标签还是文本的内容均显示为文本，而<p v-html="msg"></p>是把文本显示为标签，所以在效果上图中会有个蓝色的链接内容。
另外实例中用了methods，所以在这里说一下表达式：表达式可以是一个方法名，这些方法都写在vue实例的methods属性内，并且是函数的形式，有时候需要在函数内写的this指向的是当前vue实例本身，因此可以直接使用this.xxx的形式来访问或者修改数据。
这次就先总结这些了，小白养成记ing~
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
