vue.js入门（1）——vue.js核心思想和基础操作(v-text,v-html,v-bind,v-on,v-for,v-show,v-if)

我会带着你远行 2021-09-14 18:46 308阅读 0赞

在本章开启之前，由于之前学习nodeJS莫名埋了个坑，因此，需要填一下swig模板渲染双大括号绑定数据，与VUE.JS也是双大括号绑定数据冲突的坑，查阅了官方文档，只要在new一个vue实例的时候，修改下delimiters参数即可，所以以后看到$\{\}请默认为\{ \{\}\}。这个参数不能设置成全局的，就很烦，所以每次初始化实例的时候都要写一遍。如果只是单纯的想看vue的内容请跳过这个开头。

![70][]

1.基本思想

关于为什么要重学Vue，或者说Vue的好处是什么，用一句话概括就是：数据驱动模板。在实际项目中，js和dom的交互会非常频繁，因此用数据驱动模板，会让代码变得更易维护，（别的）程序猿在迭代的时候只需要关心新数据的添加以及少量模板改动即可，不需要去重新看一遍之前写的代码的逻辑。有时候一个函数写个几百行甚至几千行，里面的条件判断过几个月去看可能连自己都怕。从性能的角度上考虑，浏览器单纯执行js和dom渲染的操作都很快，最耗费性能的是dom和js之间的交互。并不是说vue就从根本上解决了这个问题，但vue以数据驱动模板的方式确实更快。

说到底一句话就够了：数据驱动模板

2.基础操作

首先生成一个最基本的demo

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js学习--基本操作</title>
        <link rel="stylesheet" type="text/css"  href="/static/css/common.css" >
    </head>
    <body>
    
    <div id="demo">
        ${ message }
    </div>
    </body>
    <script src="/static/js/vue.js"></script>
    <script>
        //数据
        var obj = {
            message:"hello,Vue!",
        }
        //数据-模型桥梁
        var vm = new Vue({
            delimiters: ['${', '}'],
            el:"#demo", //挂载节点
            data:obj, //数据
        });
        //输出一下自身属性看一下
        console.log( vm );
    </script>
    </html>

结果如下所示，可以看到hello vue已经被渲染上去了

![20180211162059262][]

基本指令

1.v-text

根据官网的解释，v-text更新了元素的textContent，v-text 约等于 插值

<div id="demo">${ message }</div>  == <div id="demo" v-text="message"></div>

那么当他们俩都写的时候

<div id="demo" v-text="text">${ message }</div>

为了区分两者，v-text和双括号绑定的内容不同，结果显示的是text的值，且内容不被解析(如图)。说明v-text权重高于插值。

![70 1][]

2.v-html

更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

其实只要注意到他是更新innerHTML就好了。注意这里的内容会被解析成html

![70 2][]

3.v-bind(:)

用法：  
动态地绑定一个或多个特性，或一个组件 prop 到表达式。  
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。  
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

v-bind的用处比较广泛，详情建议看一下官网的文档，下面介绍比较简单情节，后面会慢慢深入

![70 3][]

可以看到自定义属性id和class red都绑定成功了，如果isRed的值为false，则字体不会变红，注意这里不能给class直接赋值为string，vue会报错。这个官网有说，附上官网示例图。

![70 4][]

4.v-on(@)

修饰符：  
.stop - 调用 event.stopPropagation()。  
.prevent - 调用 event.preventDefault()。  
.capture - 添加事件侦听器时使用 capture 模式。  
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。  
.\{keyCode | keyAlias\} - 只当事件是从特定键触发时才触发回调。  
.native - 监听组件根元素的原生事件。  
.once - 只触发一次回调。  
.left - (2.2.0) 只当点击鼠标左键时触发。  
.right - (2.2.0) 只当点击鼠标右键时触发。  
.middle - (2.2.0) 只当点击鼠标中键时触发。  
.passive - (2.3.0) 以 \{ passive: true \} 模式添加侦听器  
用法：  
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。  
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。  
用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。

简单示例：

<div id="demo">
        <input type="text" v-on:keyup="testFn" />
        <p>${obj.message}</p>
    </div>
    </body>
    <script src="/static/js/vue.js"></script>
    <script>
        //数据
        var obj = {message:""};
        //数据-模型桥梁
        var vm = new Vue({
            delimiters: ['${', '}'],
            el:"#demo",
            data:{
                obj:obj,
            },
            methods:{
                testFn:function(ev){
                    if(ev.keyCode==13){ //判断是否为enter键
                        //这里特意输出this对象看一下，该对象指向vue实例，但奇怪的是，这个实例的返回值没有data字段，只有_data=data
                        //当然你也可以直接找到this下面的obj，用this.obj就可以找到了，官方就是这么个设定，喜欢用哪种就用哪种吧
                        console.log(this);
                        this.obj.message=ev.target.value;
                    }
                }
            },
        });

结果，在input输入框输入内容，回车后，p标签会出现内容。注意代码注释中对this的解释。

事实上这样还是不够简便，v-on的函数里只要实现自己的逻辑就可以，关于事件的逻辑，如是否阻止冒泡，如何触发等，都可以用修饰符直接解决。上述代码的简写如下所示

<div id="demo">
        <input type="text" @:keyup.enter="testFn" v-model="inputValue" >
        <p>${obj.message}</p>
    </div>
    </body>
    <script src="/static/js/vue.js"></script>
    <script>
        //数据
        var obj = {message:""};
        //数据-模型桥梁
        var vm = new Vue({
            delimiters: ['${', '}'],
            el:"#demo",
            data:{
                obj:obj,
                inputValue:"",
            },
            methods:{
                testFn:function(ev){
                    this.obj.message=this.inputValue;           
                }
            },
        });.enter="testFn" v-model="inputValue" >
        <p>${obj.message}</p>
    </div>
    </body>
    <script src="/static/js/vue.js"></script>
    <script>
        //数据
        var obj = {message:""};
        //数据-模型桥梁
        var vm = new Vue({
            delimiters: ['${', '}'],
            el:"#demo",
            data:{
                obj:obj,
                inputValue:"",
            },
            methods:{
                testFn:function(ev){
                    this.obj.message=this.inputValue;           
                }
            },
        });

5.v-for

![20180212143042359][]

v-for提供了两种遍历的方式

第一种是遍历数组

第二种是遍历对象

如果是遍历数组var arr =  \[a,b,c\]

用v-for = "item in arr"

每个item为 a ， b ， c

用v-for ="(item,index) in item"

item同上，index为数组下标，1 ， 2 ， 3

如果是遍历对象 var obj = \{name:"dkr",age:"18",sex:"nan"\}

item ,index同上

同时还可以遍历到key值，也就是可以遍历到键值对+索引值

[点击打开链接][Link 1]官方文档说的更加清楚一些，不懂的可以看看官网的例子，非常好懂，吐槽一下three.js的API，真的没法比

6 v-show 和 v-if

关于v-show和v-if

我只提一句

jQ里常用的两种方法remove()去除节点，hide()，修改元素的display为none隐藏元素。

v-show的原理 ----》 hide()

v-if的原理---》 remove()

<div id="demo">
        <input type="text" v-on:keyup.enter="testFn" v-model="inputValue"/>
        <p v-show="!obj.length">输出一段话验证v-show</p>
        <p v-if="!obj.length">输出一段话验证v-if</p>
        <p v-for="item in obj">${item.message}</p>
    </div>
    </body>
    <script src="/static/js/vue.js"></script>
    <script>
        //数据
        var obj = [];
        //数据-模型桥梁
        var vm = new Vue({
            delimiters: ['${', '}'],
            el:"#demo",
            data:{
                obj:obj,
                inputValue:"",
            },
            methods:{
                testFn:function(ev){
                    //这里特意输出this对象看一下，该对象指向vue实例，但奇怪的是，这个实例的返回值没有data字段，只有_data=data
                    //当然你也可以直接找到this下面的obj，用this.obj就可以找到了，官方就是这么个设定，喜欢用哪种就用哪种吧
                    this.obj.push ({"message":this.inputValue});
                }
            },
        });

![201802121444375][]

可以看到v-if的元素已经从文档流里面不见了

而v-show只是动态添加了style而已

个人认为官方文档的质量非常好，初学者可以从基础的demo开始，去官方文档慢慢学

[70]: /images/20210813/73733a40dc134573b91d838592642393.png
[20180211162059262]: /images/20210813/98a54add05e943c0978147041f2717b2.png
[70 1]: /images/20210813/da7f22eca3f840d0a7d04d0f3aeefa4e.png
[70 2]: /images/20210813/8985b7cd6f9241f09a2751e00dc07438.png
[70 3]: /images/20210813/d8e37eac176649b98ad5c2eed6b724ec.png
[70 4]: /images/20210813/e878c3cb304e4c73ba844238b98ed636.png
[20180212143042359]: /images/20210813/9b45ff93ae754dfd905a4795eb7a8870.png
[Link 1]: https://cn.vuejs.org/v2/guide/list.html
[201802121444375]: /images/20210813/5bd81718382a4868b20370a7a4618a49.png