<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue 指令</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak 能够解决网速慢时 插值表达式闪烁的问题 -->
<p v-cloak>++++ {
{msg}} - - --</p>
<h4 v-text="msg">======</h4>
<!-- 默认v-text 是没有闪烁问题的 -->
<!-- v-text会覆盖元素中原本的内容,但是插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空 -->
<div v-html="msg2">=-=-=-=-=-=</div>
<!-- v-html 会输出带html标签的文本,html标签也会被解析 -->
<!-- v-text v-html 都会覆盖原有元素中的内容 -->
<input type="button" value="按钮" v-bind:title="mytitle + '123' ">
<!-- v-bind 是一个用于绑定属性的指令 -->
<!-- v-bind 简便用法如下 -->
<input type="button" value="测试" :title="mytitle">
<!-- v-bind 指令可以被简写为 :要绑定的属性 -->
<!-- v-bind 中,可以写合法的js表达式 -->
<!-- vue中提供了 v-on: 事件绑定机制 -->
<input type="button" value="按钮3" :title="mytitle" v-on:mouseover="show">
<!-- v-on:click 鼠标点击事件 -->
<!-- v-on:mouseover 鼠标滑过事件 -->
<input type="button" value="按钮4" :title="mytitle" @click="show">
</div>
<script src="./lib/vue.js"></script>
<script>
var vm =new Vue({
el:'#app',
data:{
msg:'vue测试',
msg2:'<h1>h1标签测试</h1>',
mytitle: '这是一个自己定义的title'
},
methods:{ //这个methods属性中定义了当前vue实例所有可用的方法
show:function(){
alert('hello')
}
}
})
</script>
<!--
v-bind vue提供的属性绑定机制 缩写是 :
v-on vue提供的事件绑定机制 缩写是 @
-->
</body>
</html>