1、 v-text和v-html
- v-text ： 绑定的值一文本进行渲染 与 {{}} 效果类似
- 区别在于 v-text 如果没有渲染完成将不做显示， {{}} 会回按 原样显示
- 解决方式使用 v-cloak
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello.vue</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{key}}</p>
<p v-text="key">你好</p>
</div>
<script>
new Vue({
el:"#app",
data:{
key:"vue"
}
})
</script>
</body>
</html>
- v-html ： 以html样式渲染
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello.vue</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-text="key">你好</p>
<p v-html="key">html</p>
<p v-html="vhtml">vhtml---</p>
<p v-text="vhtml">v-html===</p>
</div>
<script>
new Vue({
el:"#app",
data:{
vhtml:"<h1>vue hello word</h1>",
}
})
</script>
</body>
</html>
2 、v-bind 属性绑定
- 写法
- 1、 直接写
v-bind
- 2、 简写为
:
- 3、 可拼接
:title="key +' 拼接的东西' ;
<p :title="key +' 拼接的东西'"> jidsjfi</p>
3、 v-on 事件
事件修饰
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式，事件嵌套的是后先处理外层事件 ，
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
4、键盘事件 @keyup
5 、v-model 双向数据绑定
<div id="app">
<p>{{msg}}</p>
<input type="text" v-model="msg" />
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "爱学习，无可挑剔"
}
});
</script>
页面数据改变 也会改变绑定值
总结
- 如何定义一个基本的Vue代码结构
- 插值表达式 和 v-text
- v-cloak
- v-html
- v-bind Vue提供的属性绑定机制 缩写是 :
- v-on Vue提供的事件绑定机制 缩写是 @
- v-model
