vue 点击一次切换样式再点击_Vue-声明式渲染

什么是渲染？

把数据填充到HTML标签中。

• 原生js拼接字符串
• 使用模板引擎

以下讲解Vue模板语法

一、Vue模板语法

1.插值表达式 { { }}

{ { msg }}

{ { 1 + 2 }}

{ { msg + '----' + 123 }}

{ { isOK? '确定' : '取消' }}

{ { text.split(',').reverse().join(',') }}

2. 指令 v-

指令本质是 自定义属性

https://cn.vuejs.org/v2/api/

v-cloak

解决 { { }} 闪动出现了一下的问题

<style type="text/css">
    [v-cloak]{
    
        display: none;
    }
</style>
<div v-cloak>{
    {msg}}</div>

2.1 数据绑定指令

v-text

填充纯文本，相当于不需要v-cloak的 { { }}

v-html

填充HTML，会显示标签样式

存在安全问题，本网站内部数据可以使用

v-pre

填充原始信息

数据响应式：数据的变化导致页面内容的变化

数据绑定：将数据填充到标签中

v-once

只编译一次，显示出来就不会变了

<div v-once>{
    {info}}</div>

3. 双向数据绑定

v-model

修改输入框的msg，标签里的msg也改变。是个页面到数据，数据再到页面的过程。

<div>{
    {msg}}</div>
<div>
    <input type="text" v-model='msg'>
</div>

• 页面到数据 事件监听
• 数据到页面 数据绑定

4. 事件绑定

v-on:click 简写：@click

<div id="app">
    <div>{
    {num}}</div>
    <div>
        <button @click='handle'>点击</button>
    </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
    
        el: '#app',
        data: {
    
            num: 0
        }, // 注意，这里不要忘记加逗号 
        // methods对象中定义一些函数
        methods: {
    
            handle: function() {
    
                // this是Vue的实例对象vm
                this.num++;  // 在函数中，想要使用data里面的数据，一定要加this 
            }
        }
    });
</script>

4.1 事件传参

• 直接绑定函数名，默认会传递事件对象作为事件函数的第一个参数
• 绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<button v-on:click='handle1'>点击1</button>
<button v-on:click='handle2(123, 456, $event)'>点击2</button>

Vue实例对象

var vm = new Vue({
    
    el: '#app',
    data: {
    
        num: 0
    },
    methods: {
    
        handle1: function(event) {
    
            console.log(event.target.innerHTML) // 点击1
        },
        handle2: function(p, p1, event) {
    
            console.log(p, p1) // 123 546
            console.log(event.target.innerHTML) // 点击2
            this.num++;
        }
    }
});

事件冒泡

 <div id="app">
     <div>{
    {num}}</div>
     <div v-on:click='handle0'>
         <button v-on:click='handle1'>点击1</button>
     </div>
 </div>

Vue实例对象

var vm = new Vue({
    
    el: '#app',
    data: {
    
        num: 0
    },
    methods: {
    
        handle0: function(){
    
            this.num++;
        },
        handle1: function(event){
    
        },
    }
});

点击handle1，handle0运行

4.2 阻止冒泡

传统用stopPropagation()

handle1: function(event){
    
    event.stopPropagation();
},

Vue用 v-on:click.stop='handle1'

4.3 阻止标签默认行为

event.preventDefault();

v-on:click.prevent='handle2'

4.4 按键修饰符

敲击回车键

v-on:keyup.enter='函数名'

敲击delete

v-on:keyup.delete='函数名'

4.5 自定义按键修饰符

定义 (数字是keyCode)

Vue.config.keyCodes.a = 65

使用

v-on:keyup.a='函数名'

5. 属性绑定

v-bind

原先

<a href="www.baidu.com">百度</a>

现在，url由数据提供可以改变。

<a v-bind:href="url">百度</a>
简写：
<a :href="url">百度1</a>

v-model就是v-bind:value="msg"允许value属性值可变，

再加上v-on:input='msg=$event.target.value'处理变化

 <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
 <input type="text" v-model='msg'>

6. 样式绑定

6.1 class样式处理

（1）对象类型

<