Vue 第一节
<style type="text/css">
[v-cloak]{/*带有v-cloak这个属性的设置隐藏是为了在加载慢的时候隐藏,不然在页面上会显示标签*/
display:none;
}
</style>
<div id="app" v-cloak>
<!--实例所控制的元素就是 V-->
{{msg}}
<!--v-text=""
1、默认是没有在网速慢的时候显示标签的问题
2、会将元素中默认的****号直接给替换了
-->
<h1 v-text="msg">6666</h1>
<!--如果数据是个标签字符串,需要用v-html标签,这样就不会让标签显示出来,而是直接输出标签里面的内容-->
<div v-html="msg2"></div>
<!--v-bind: 是绑定属性的指令-->
<input type="button" name="" id="" value="按钮" v-bind:title="mytitle"/>
<!--还可以这样写(省略v-bind)表达式和在变量后面加表达式-->
<input type="button" name="" id="" value="按钮" :title="mytitle + '我是新加的' "/>
<!--v-on 是绑定事件的指令,缩写是@ 比如@click="事件名称"-->
<input type="button" name="" id="" :value="methods" @click="show" v-on:mouseover="hover" />
</div>
<script type="text/javascript">
var vm = new Vue({//new 出来的这个 vm 对象 就是我们mvvm中的 vm调度者
el:'#app',
data:{//data中放的是 el 中用到的数据(也就是 MVVM 中的M,用来保存每个页面的数据的)
msg:'欢迎学习Vue',
msg2:'<h2>我是一个大大的标签<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3000545380,3594254539&fm=26&gp=0.jpg" /></h2>',
mytitle:'我是一个title提示值',
methods:'我身上绑定了点击和移入事件'
},
methods:{//这个属性中定义可用的方法
show:function(){
this.methods='您触发了我的点击事件'
// alert('您绑定了点击事件')
},
hover:function(){
this.methods='您触发了鼠标移入事件'
// alert('您触发了鼠标移入事件')
}
}
});
</script>