Vue基本指令和事件

1.差值表达式 {{ }}

使用双大括号（Mustache) 语法: "{{ }}" 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来,在初识vue.js中的入门案例就是这种方式
在{{}}差值表达式中除了可以绑定vue对象的属性值之外还可以进行简单的运算。

<div id="app">
  {{number/10}}
  {{ok?'好':'坏'}}
  {{name}}
</div>
<script>
var app = new Vue({
    el:"#app",
    data:{
    name:'张三',
    number:100,
    ok:true
    }
})
</script>

2.问题

{{ }}差值表达式的方式可能会出现闪烁的问题，用户体验不好
解决方案：

  • 采用 v-cloak 配合 [v-cloak]{display:none}
  • 采用 v-text 方式
区别：v-text会替换掉要展示数据位置的内容，差值表达式只会替换掉{{}}位置的内容
 <div class="app" v-cloak> 
            <p>{{message}}</p>
            <p v-text="message"></p>
    </div>
    <script>
        new Vue({
            el:".app",
            data:{
                message:"vue"
            }
        })
    </script>

    <style>
        [v-cloak]{
            display: none;
        }
    </style>

3.v-html

v-html顾名思义，主要是为了将Vue对象中带有html标签的数据，注入到挂载目标中

    <div v-html="message1" id="vue_val1">
    </div>
    <script>
        new Vue({
            el:"#vue_val1",
            data:{
                message1:"<h1>绑定html</h1>"
            }
        })
    </script>

4.v-bind

v-bind可以通过vue绑定设置html标签的属性值，简写方式为:+属性值

<div id="app">
        <a v-bind:href="baidu">百度</a>
        <a :href="jd">京东</a>
    </div>
    <script>
    new Vue({
        el:'#app',
        data:{
            baidu:"www.baidu.com",
            jd:"www.jd.com"
        }
    })
    </script>

5.v-if

v-if可以根据vue的属性值决定标签的显示隐藏


<div id="app">
 <p v-if＝"show">显示这段文本</p>
</div> 
<script> 
var app =new Vue({ 
el :'#app', 
data: { 
show: true 
}) 
</script>

6.v-show

v-show可以根据vue的属性值决定标签的显示隐藏


<div id="app">
 <p v-show＝"show">显示这段文本</p>
</div> 
<script> 
var app =new Vue({ 
el :'#app', 
data: { 
show: true 
}) 
</script>

7.v-show和v-if的区别

v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做，直到条件第一次为真的时候才会开始渲染条件块。
相比之下,v-show 就简单得多，不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条件不太可能改变,则使用v-if 好点。

8.v-for

v-for是用来将vue对象中的数据通过遍历的方式在挂载目标中填充
:key 对应类型是能是number或者string

<div class="code" >
        <p v-for="(item, index) in codes" :key="index">{{ item}}</p>
        <hr>
        <p v-for="(item, index) in stu" :key="index">{{item.name}}</p>
    </div>
    <script>
        new Vue({
            el:".code",
            data:{
                codes:["java","c++","python","php"],
                stu:[
                    {'name':'张三'},
                    {'name':'李四'},
                    {'name':'王五'},
                    {'name':'赵六'}
                ]
            }
        })
    </script>

9.v-model 只适用于表当元素

v-model可以实现vue对象和挂载目标的双向数据绑定,这里的示例是修改输入框的内容，下面的值也会随之改变

<div id="info">
        <input type="text" name="" v-model="name">
        <p>{{name}}</p>

    </div>
    <script>
        new Vue({
            el:"#info",
            data:{
                name:""
            }

        })
    </script>

10.v-bind:class和v-bind:style(:class和:style)

v-bind:class="head"可以实现动态的决定挂载目标中是否需要样式
同时class的绑定支持数组的格式
v-bind:class=["head","footer"]

v-bind:style可以实现内联样式的绑定

<div id='app'>
 <div :style＝"{' color ': color， 'fontSize ':fontSize ＋' px '｝">文本<／div>
</div>
<script> 
var app =new Vue({
el :'#app', 
data: { 
color :'red ', 
fontSize : 14 
})
 </script>

大多数情况下， 直接写一长串的样式不便于阅读和维护，所以一般写在 data 或 computed 里， 以 data 为例改写上面的示例：

<div id='app'>
 <div :style＝"styles">文本<／div>
</div>
<script> 
var app =new Vue({
el :'#app', 
data: { 
styles:{
color:'red',
fontSize：14+'px'
}
})
 </script>

11.filters(过滤器)

Vue. 支持在{{}}插值的尾部添加一小管道符 "|" 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给 Vue 实例添加选项 filters 来设置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>
    <!-- vue的过滤器 -->
    <div id="app">
        {{ date | formatDate}}
    </div>
    <script>
        //在月份、日期、小时等小于 10 时前面补 0
        var padDate = function (value) {
            return value < 10 ? '0' + value : value;
        }

        new Vue({
            el: "#app",
            data: {
                date: new Date()

            },
            filters: {
                formatDate: function (value) {//value就是需要过滤的数据
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = padDate(date.getMonth() + 1);
                    var day = padDate(date.getDate());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());
                    return year + '-' + month + '-' + day + "-" + hours + '-' + minutes + '-' + seconds;
                }
            }
           
        })
    </script>
</body>

</html>

过滤器也可以串联，而且可以接收参数，例如：

<!--串联-->
{ { message | filterA | filterB } } 
<!--接收参数-->
 {{ message | filterA （ 'argl '，' arg2 ')}}

12.computed(计算属性)

模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护，计算属性就是为解决这个问题的

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要计算的值还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

<div id=”app”>
 <p >{{getResult}}</p>
</div> 
<script> 
var app =new Vue({ 
el :'#app', 
data: { 
show: true 
}) ,
computed:{
//复杂逻辑计算过程
getResult:function(){
return result
}
}
</script>

13.vue中的事件

在vue对象中，通过methods声名方法的集合，内部可以包含多个方法，在挂载目标中可以通过v-on:事件名称或者简写方式@事件名称来指向methods中的方法实现绑定

 <!-- v-on实现方法的绑定 @是v-on的简写 -->
<!--除了 click 外，还有 dblclick、 keyup, mousemove 等-->
    <div id="app">
        <button v-on:click="click">测试点击</button>
        <button @click="click">@点击</button>
    </div>

    <script>
        new Vue({
            el:"#app",
            methods: {
                click:function(){
                    alert('点击')
                }
            }
        })
    </script>

14.事件修饰符

  • .stop防止事件冒泡行为
 <div id="app" @click="div_click">
        <input type="button" value="按钮" @click.stop="btn_click">
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{
              //添加了.stop事件修饰符后外部的方法就不会因为冒泡被调用了
                div_click(){
                    console.log('div点击')
                },
                btn_click(){
                    console.log('btn点击')
                }
           }
        });
    </script>
  • .prevent 阻止默认行为事件修饰符
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
</head>

<body>
    <!-- 阻止默认行为 -->
    <div id="app">
        <a href="http://www.badu.com" @click.prevent="stop_herf">链接</a>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{
               stop_herf(){
                   console.log('阻止默认行为')
               }
           }
        });
    </script>
</body>

</html>
  • .self 私有事件修饰符

只有在元素本身触发时才触发事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
    <style>
        #app {
            height: 400px;
            background-color: dodgerblue;
        }
    </style>
</head>

<body>
    <!-- .self :事件修饰符，只有在元素本身触发时才触发事件 -->
    <div id="app" @click.self="div_click">
        <input type="button" value="按钮" @click="btn_click">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                div_click() {
                    console.log('div点击')
                },
                btn_click() {
                    console.log('btn点击')
                }
            }
        });
    </script>
</body>

</html>
  • .capture 捕获事件修饰符
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
    <style>
        #app {
            height: 400px;
            background-color: dodgerblue;
        }
    </style>
</head>

<body>
    <!-- capture:捕获事件修饰符 -->
    <!-- 下面示例中会先执行div的点击事件在执行按钮的点击事件 -->
    <div id="app" @click.capture="div_click">
        <input type="button" value="按钮" @click="btn_click">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                div_click() {
                    console.log('div点击')
                },
                btn_click() {
                    console.log('btn点击')
                }
            }
        });
    </script>
</body>

</html>
  • .once:只触发一次的事件修饰符
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
</head>

<body>
    <!-- .once:只触发一次的事件修饰符 -->
    <!-- .once 和 .stop的区别：
        .once只会阻止自己的冒泡行为，当有多层嵌套时，会继续往外传递
        .stop可以实现阻止冒泡行为
    
    -->
    <div id="app">
        <input type="button" value="按钮" @click.once="btn_click">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {

                btn_click() {
                    console.log('btn点击')
                }
            }
        });
    </script>
</body>

</html>

生命周期

每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子， 我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。如果你使用过 jQuery， 一定知道它 的 ready（）方法，比如以下示例：

$( document).ready (function() {
 // DOM 加载完后，会执行这里的代码 
}
来一张官网的图片
图片.png

Vue 的生命周期钩子与之类似，比较常用的有：
• created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。 需要初始化处理一些数据时会比较有用．
• mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
• beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。
这些钩子与 el 和 data 类似，也是作为选项写入 Vue 实例内，并且钩子的 this 指向的是调用它 的 Vue 实例：

var app =new Vue({
el : '#app',
mounted: function () {
     //vue挂载成功后执行
 },
beforeDestroy() {
     //vue销毁之前执行
}

Vue.js 只支持单个表达式，不支持语句和流程控制。另外， 在表达式中，不能使用用户自定义 的全局变量， 只能使用 Vue 白名单内的全局变量， 例如 Math 和 Date。 以下是一些无效的示例：

<!--这是语句，不是表达式-->
 {{var book = 'Vue.js'}} 
<!--不能使用流控制，要使用三元运算-->
{{ if (ok) return msg }}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,047评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,807评论 3赞 386
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,501评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,839评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,951评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,117评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,188评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,929评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,372评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,536评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,168评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2赞 351