vue代码和MVVM之间的关系
<!--将来new的vue实例会控制这个元素中的所有内容-->
<!--vue实例控制的这个元素区域就相当于V-->
<div id="app">
<!--使用v-clock可以解決页面在刚加载时出现源码的问题-->
<p>{{msg}}</p>
</div>
插值表达式
使用{{ 变量名称即可 }}
v-cloak
好处:使用v-cloak能够解决插值表达式闪烁问题
用法:先创建一个css样式
[v-cloak]{
display: none;
}
在元素中使用即可:
{{msg}}
v-text
好处:默认是没有闪烁问题的
v-text会覆盖元素中的原本的内容,但是插值表达式智慧替换自己的这个占位符,不会把整个元素的内容清空
例:
asd
asd会被替换,但是会有闪烁问题
v-html
使用v-html可以将文本解析为一个可用html元素
data:{
msg2:‘
哈哈
’}
v-bind 缩写 :
使用v-bind用于将变量值绑定到属性的指令
可以在v-bind中使用js表达式
v-bind:属性可以简写为 :属性
data:{
mytitle:‘这是一个定义的title’
}
v-on 缩写@
是用于事件绑定机制
click可以替换为其他任何操作事件
使用方法:
需要现在vue实例中指定methods属性
var vm=new Vue({
el:’#app’, //表示当前new的vue实例,要控制页面的那个元素
methods:{ //这个methods属性定义了当前vue实例所有的可用方法
show:function(){
alert(“111”)
}
}
})
在html元素中使用v-on即可调用该方法