vue教程3：vue常用指令

v-text

• 作用：渲染文本到标签上，跟JQuery的text()方法类似
• 直接上例子：

<script>
    var app = new Vue({
        el: "#app",
        data:{
            name:"张三先生",
            age: 30
        }
    });
</script>

<div id="app">
 	<h4>{{name}}</h4>
    <h4 v-text="name"></h4>
    <h4 v-text="name+'，你好！'"></h4>
</div>

结果如下：

v-html

• 作用：渲染html代码到标签内容，跟JQuery的html()方法类似

var app = new Vue({
    el: "#app",
    data:{
        name:"<span style='color:red;'>张三先生</span>"
    }
});

<div id="app">
    <p v-html="name"></p>
</div>

运行后就会输出红色字体的张三先生，这里就不贴图了

v-on

• 作用：绑定dom元素各种事件，例如点击、双击等等。事件方法写在methods对象内部。
• 传参：vue的事件不需要传递参数，直接在事件内部操作data对象就行了
• v-on事件可以简写为@

<div id="app">
 	<input type="button" value="提示" v-on:click="test" />
    <input type="button" value="简写" @click="test" />
    <p>
        {{message}}
        <input type="button" value="点击改变内容" @click="changeData" />
    </p>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data:{
            message:"今天天气不错"
        },
        methods:{
            test:function(){
                alert("这是一个提示信息！");
            },
            changeData:function(){
                this.message = "突然就下雨了";
            }
        }
    });
</script>

v-show

• 作用：根据表达式的返回值true/false，控制元素的显示和隐藏
• 原理：通过设置css的display属性来切换显示、隐藏

    <div id="app">
        <input type="button" value="切换" @click="change" /> <br />
        <img src="https://cn.vuejs.org/images/logo.png" v-show="isShow" />
    </div>

<script>
    var app = new Vue({
        el: "#app",
        data:{
            isShow: true
        },
        methods:{
            change:function(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>

v-if

• 作用：和v-show一样，根据表达式的返回值true/false，控制元素的显示和隐藏
• 原理：通过操作dom的添加、移除来控制显示状态，注意当隐藏时整个dom元素都会被删除，这点和v-show是不同的。

v-bind

• 作用：为元素绑定属性值，例如src、title、class
• 写法是v-bind:属性名=""，可以简写为 :属性名=""

    <div id="app">
        <!--以下2种写法作用相同-->
        <p v-bind:class="isActive ? 'active' : ''">这是一段文本</p>
        <p v-bind:class="{active: isActive}">这是一段文本</p>
        <input type="button" value="切换样式" @click="changeRed" />
    </div>

    <style>
        .active {
            color:red;
        }
    </style>

<script>
    var app = new Vue({
        el: "#app",
        data:{
            isActive: false
        },
        methods:{
            changeRed:function(){
                this.isActive = !this.isActive;
            }
        }
    });
</script>

v-for

• 作用：遍历数组生成对用的dom，比如用于ul-li生成、table-row生成

    <div id="app">
        <input type="button" value="增加" @click="add"> <br/>
        <ul>
            <li v-for="(item, index) in userList" :key="index">
                {{index}}：{{item.name}}
            </li>
        </ul>
    </div>

<script>
    var app = new Vue({
        el: "#app",
        data:{
            userList:[
                { name: "张三" },
                { name: "李四" },
                { name: "王五" }
            ]
        },
        methods:{
            add:function(){
                this.userList.push({ name: "宋六" });
            }
        }
    });
</script>

v-model

• 作用：表单元素数据的绑定，注意这是双向绑定。意思就是，表单控件值变了，则绑定的对象也会跟着变化；如果通过代码修改了对象值，则控件值也会同步变化。
• v-model是vue业务开发的核心，涉及到页面提交的都会用到

	<!--效果，文本框输入值变化，下面h4内容跟着变-->
    <div id="app">
        <input type="text" v-model="message" />
        <h4>{{message}}</h4>
    </div>

<script>
    var app = new Vue({
        el: "#app",
        data:{
            message: "今天天气真好"
        }
    });
</script>