vue的基本代码以及常见指令

时间 2019-12-09

标签 vue 基本代码以及常见指令繁體版

原文原文链接

当咱们在页面当中引入vue.js的时候，这时候咱们就能够调用vue的构造函数，来建立一个vue的实例，vue使用的基本代码结构以下：html

<!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="./lib/vue.min.js"></script>
</head>
<body>
    <!-- view视图 -->
    <div id="id">
        <p>{{msg}}</p>
    </div>
    <script>
        // 当引入vue.js，页面就有一个vue的构造函数
        // view-model
        var vm=new Vue({
            el:'#id',
            // m模块，存储数据
            data:{
                msg:'哈哈哈'
            }
        })
        // vue不建议咱们直接操做dom元素，而是交给vue实例
    </script>
</body>
</html>

Vue的实例就是view-model部分，而其中的data就属于model部分，被vue实例绑定的html区域，则是view部分vue

上面例子当中，{{}}这个是插值表达式，咱们能够将data中定义的数据插入当中，这样页面就会在对应的位置，渲染出变量的值，在变量先后，咱们能够添加任意的字符串，或是表达式dom

而常见的vue指令有v-text，v-bind，v-html，v-on函数

他们的使用语法都是在绑定范围内的标签中用于绑定标签属性或定义标签内的内容,例如ui

<p v-text='msg'></p>
<p v-html='h'></p>
<input type="button" v-bind:value="value" v-bind:title="title" v-on:click="show">

其中，v-text和v-html都是会将所赋值的变量的内容渲染到对应的标签中去，而且会覆盖掉标签中所写有的内容，可是v-html能写入html代码并解析渲染spa

v-cloak指令能够用来解决闪烁问题，闪烁问题就是指在网速很慢的状况下，vue相关文件未彻底加载，此时html的内容就已经被渲染出来，这是插值表达式{{}}中的变量名就会直接显示出来，等到文件加载完毕，插值表达式才会显示本应正确显示的内容code

给具备插值表达式的标签添加v-cloak指令，而后在style中使用属性选择器，加上display ：none就能够解决问题htm

事件修饰符：blog

.prevent ,.stop,.captrue,.once,.self事件

.prevent就是用来阻止默认事件的，好比a标签的跳转

.stop就是用来阻止事件冒泡

.self则是表示元素的事件没法经过冒泡或者捕获触发

.once表示元素的修饰符只能触发一次

.captrue则将元素的事件冒泡改成事件捕获

v-if和v-show用于判断某个标签是否应该被渲染或者是否应该被显示

v-if是决定这个元素是否被渲染，所以对于可能不会出如今用户面前的标签，建议使用v-if

v-show是决定这个元素是否被显示，所以对于频繁切换显示状态的元素，建议使用v-show

v-model指令，v-model和上面的全部指令不一样，它是双向数据绑定的指令，常和表单元素结合使用