vue.js知识整理

最新推荐文章于 2024-05-17 14:32:46 发布

葛城王牌

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量32

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_76394282/article/details/135122873

版权

一、vue的常用指令

1、v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

<div id="app" v-text="msg"></div>
<script>
    var app=new Vue({
        cl="#app",
        data:{
            msg:"Hello,v-text!"
    }
})
</script>

2、v-html

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

<div id="app" v-html="msg"></div>
<script>
    var app=new Vue({
        cl="#app",
        data:{
           msg:"<h1>Hello,v-html!</h1>
    }
})
</script>

ps:v-bind有时候也经常用于绑定动态样式,具体的语法如下：

绑定单个动态类名时：

<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-bottom: 10px;
    }

</style>
<body>
    <div id="app">
        <!--v-bind绑定动态类名的语法结构：v-bind:class="类名变量"-->
        <div v-bind:class="className1"></div>
        <!--可以简写为-->
        <div :class="className1"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    className1:'box1',
                }
            }
        })
    </script>
</body>

绑定多个类名时：

<body>
    <div id="app">
        <!--v-bind绑定多个动态类名的语法结构：v-bind:class="[类名变量1,类名变量2,……]"-->
        <div v-bind:class="[className1,className2]"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    className1:'box1',
                    className2:'box2',
                }
            }
        })
    </script>
</body>

同时绑定静态+动态类名时:

<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-bottom: 10px;
    }
    .box2{
        border-radius: 50%;
    }

</style>
<body>
    <div id="app">
        <!--v-bind同时绑定静态类和动态类名的语法结构：v-bind:class="['静态类名',动态类名变量,……]"-->
        <div v-binf:class="['box1',className]"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    className:'box2',
                }
            }
        })
    </script>
</body>

在v-bind指令中使用逻辑判断时:

<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-bottom: 10px;
    }


</style>
<body>
    <div id="app">
      <!--当需要在v-bind中使用逻辑判断时-->
      <div v-bind:class="[num==1?'box1':'']"></div>
      <!--或者使用以下写法:-->
      <div v-bind:class="{'box1':num==1}"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    className:'box1',
                    num:1
                }
            }
        })
    </script>
</body>

4、v-on

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)

</style>

    <div id="app">
      <p>{{msg}}</p>
      <button v-on:click="sayhello">请单击</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                msg:"Hi"
            },
            methods:{
                sayHello:function(){
                    this.msg="Hello,v-on"
                }
            }
        })
    </script>

小结：

Vue.js为v-bind和v-on这两个最常用的指令提供了语法糖(语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，以便于程序开发，也称为糖衣语法，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会)，也可以说是缩写或简写。

<!-- v-bind可以省略v-bind，简写为一个冒号":" -->
    <!--完整写法-->
    <img v-bind:src="src"></img>
    <!--简写-->
    <img :src="src"></img>

    <!--v-on可以直接使用"@"简写-->
    <!--完整写法-->
    <a v-on:click="do"></a>
    <!--简写-->
    <a @click="do"></a>

5、v-for

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

<div id="app">
        <ul>
            <li v-for="(item,index)of fruit" :key="index"></li>
        </ul>
    </div>
<script>
    new Vue({
        el:"#app",
    })
    data:{
        fruit:["苹果","梨子","香蕉","橘子"]
    }
</script>

6、v-model

v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

<div id="app">
    <input type="text" v-model="msg">
    <p>文本框的内容:{{msg}}</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:""
        }
    })
        
    
</script>

v-model修饰符

v-model有3个修饰符，分别是lazy、number、trim

1、lazy

v-model默认是在input事件中同步输入框中的内容，也就是一旦数据发生改变，对应的data中的数据也会发生改变。如果使用lazy修饰符，可以让数据在失去焦点或者回车时才会更新。

<input type="text" placeholder="搜索"  v-model.lazy='keyword' />

2、number

默认情况下，在输入框输入数字的时候，默认会把输入的内容当作字符串类型处理，如果加上number修饰符，就可以让你在输入数字的时候将内容转为number类型。

<input type="text" placeholder="搜索"  v-model.number='keyword' />

3、trim

trim修饰符可以去除输入内容左右两边的空格。

<input type="text" placeholder="搜索"  v-model.trim='keyword' />

7、v-if和v-else

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

v-if的使用一般有两个场景：

1.通过条件判断展示或者隐藏某个元素或者多个元素；

2.进行视图之间的切换。

<!--使用v-if进行条件判断，条件为true则显示此标签，false则不显示-->
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            seen:true
        }
    })
</script>

v-else

<!--使用v-if进行条件判断，条件为true则显示此标签，false则不显示-->
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <p v-else>你看不到我了</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            seen:true
        }
    })
</script>

8、v-show

v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。

带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else。

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            ok:true
        }
    })
</script>

v-if和v-show的区别

v-if和v-show都可以用来动态地控制DOM元素的显示和隐藏，但是，二者是有区别的。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-if 也是“惰性”的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

<div id="app">
    <h1 v-show="seenShow">v-show:true</h1>
    <h1 v-show="notSeenShow">v-show:false</h1>
    <h1 v-if="seenIf">v-if:true</h1>
    <h1 v-if="notSeenIf">v-if:false</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            seenShow:true,
            notseenShow:false,
            seenIf:true,
            notseenIf:false
        }
    })
</script>

二、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

1、引入js

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

2、编写html

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">首页</router-link>
        <router-link to="/student">会员管理</router-link>
        <router-link to="/teacher">讲师管理</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

3、编写js

<script>
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }
 
    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]
    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })
    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    const app = new Vue({
        el: '#app',
        router
    })
    // 现在，应用已经启动了！
</script>

葛城王牌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js知识整理

v-if和v-show都可以用来动态地控制DOM元素的显示和隐藏，但是，二者是有区别的。Vue.js为v-bind和v-on这两个最常用的指令提供了语法糖(语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，以便于程序开发，也称为糖衣语法，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会)，也可以说是缩写或简写。v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。
复制链接

扫一扫