Vue.js基本指令v-text,v-html,v-bind,v-on

先记住这句话:Vue.js的指令都是带有 v- 前缀的。

Vue指令 v-text

在vue.js中我们除了使用插值表达式将data中包含属性的属性值在标签中进行展示之外,我们还可以通过指令将其展示出来

  • v-text会覆盖元素中原本的内容,但是 插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空
  • v-text只会显示文本内容,并不会显示标签
<body>
    <div id="app">
    	<p>{{msg1}}p>
        <p v-text="msg1">p>
        <p v-text="msg2">p>
    div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg1: "这是对应的值",
                msg2: "

这是对应的值

"
}, methods: {} });
script> body>

Vue指令 v-html

v-html同样是用来显示data中属性的属性值的(数据绑定),此指令不仅可以显示文本内容,还可以显示带标签的内容

<body>
    <div id="app">
    	<p>{{msg1}}p>
        <p v-html="msg1">p>
        <p v-html="msg2">p>
    div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg1: "这是对应的值",
                msg2: "

这是对应的值

"
}, methods: {} });
script> body>

Vue指令 v-bind 的三种用法

  1. 直接使用指令v-bind

  2. 使用简化指令:

  3. 在绑定的时候,拼接绑定内容::title="btnTitle + ', 这是追加的内容'"

<body>
    <div id="app">
    	
    	<input type="button" value="按钮" v-bind:title="mytitle">
    	<input type="button" value="按钮" v-bind:title="mytitle + '123'">
    	<input type="button" value="按钮" :title="mytitle">
    	
    	
    div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                mytitle: '这是一个自己定义的title'
            },
            methods: {}
        });
    script>
body>

Vue指令 v-on 事件绑定机制

  1. 直接使用指令v-on

  2. 使用简化指令@

<body>
    <div id="app">
    	
    	<input type="button" value="按钮"  v-on:click="alert('hello')">
    	<input type="button" value="按钮" v-on:click="show">
    	<input type="button" value="按钮" @:click="show">
    div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
		        show: function () {
		          alert('Hello')
		        }
	     	}
        });
    script>
body>

你可能感兴趣的:(Vue.js)