Vue.js基本指令v-text，v-html，v-bind，v-on
先记住这句话：Vue.js的指令都是带有 v- 前缀的。
Vue指令 v-text 在vue.js中我们除了使用插值表达式将data中包含属性的属性值在标签中进行展示之外，我们还可以通过指令将其展示出来
- v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空
- v-text只会显示文本内容，并不会显示标签
{{msg1}}
>
var vm = new Vue({
el: '#app',
data: {
msg1: "这是对应的值",
msg2: "这是对应的值"
},
methods: {}
});
Vue指令 v-html v-html同样是用来显示data中属性的属性值的（数据绑定），此指令不仅可以显示文本内容，还可以显示带标签的内容
{{msg1}}
>
var vm = new Vue({
el: '#app',
data: {
msg1: "这是对应的值",
msg2: "这是对应的值"
},
methods: {}
});
Vue指令 v-bind 的三种用法
- 直接使用指令
v-bind
- 使用简化指令
:
- 在绑定的时候，拼接绑定内容：
:title="btnTitle + ', 这是追加的内容'"
>
var vm = new Vue({
el: '#app',
data: {
mytitle: '这是一个自己定义的title'
},
methods: {}
});
Vue指令 v-on 事件绑定机制
- 【Vue.js基本指令v-text，v-html，v-bind，v-on】直接使用指令
v-on
- 使用简化指令
@
>
var vm = new Vue({
el: '#app',
data: {},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
}
}
});
推荐阅读
- 做一件事情的基本原理是什么（）
- dubbo基本认识
- HTML基础--基本概念--跟着李南江学编程
- 动态组件与v-once指令
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 一般模型化关系——从模型是什么到如何起作用的基本答案
- canvas（一）基本用法
- 带你了解类型系统以及flow和typescript的基本使用
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- MySQL数据库的基本操作