vue.js的基础入门--指令

最新推荐文章于 2024-06-12 08:41:10 发布

fanxs98

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量136

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36986067/article/details/113995392

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

vue-cli是为单页面应用 (SPA) 快速搭建繁杂的脚手架

如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。https://cn.vuejs.org/v2/guide/index.html

学习vue，我们可以从最简单的引用cdn

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

接下来看看第一个vue写的页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <div id="app-2">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
</script>
</body>
</html>

vue指令

1.v-text

v-text是用于设置元素的文本值。

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue</title>
</head>
<body>
    <div id="app">
        <h1 v-text="message"></h1>
        <h2 v-text="info"></h2>
        <h3>{{message+info}}</h3>
    </div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            info:"info"
        }
    })
</script>
</body>
</html>

2.v-html

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue</title>
</head>
<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>

        <p v-html="address"></p>
        <p v-text="address"></p>
    </div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            content: 'Hello Vue!',
            address:'<a href="https://www.baidu.com/">百度</a>'
        }
    })
</script>
</body>
</html>

3.v-on

v-on点击事件，vue的点击事件可以用@代替v-on

<html>
<head>
    <title>vue</title>
</head>
<body>

    <div id="app">
        <input type="button" value="点击事件" @click="doIt">
        <input type="button" value="鼠标移入" @mouseenter="doIt">
        <input type="button" value="双击" @dblclick="doIt">
        <input type="button" value="按下" @mousedown="doIt">
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        methods:{
            doIt:function(){
                alert("鼠标点击");
            }
        }
    })
</script>
</body>
</html>

vue在方法中使用this.属性名就可以直接访问data中的数据

<html>
<head>
    <title>vue</title>
</head>
<body>

    <div id="app">
        <h1>{{info}}</h1>
        <input type="button" value="修改" @click="changeInfo">
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            info:"info修改前"
        },
        methods:{
            changeInfo:function(){
                this.info="info修改后"
            }
        }
    })
</script>
</body>

在vue中，不需要考虑如何更改DOM元素，只需要考虑更改数据，数据更改了后对应的元素也会更新

4.v-show

根据true或false切换元素的显示状态

实际上是修改元素的display实现显示隐藏

<button v-show="false">+</button>

5.v-if

如果说v-show操作的是样式，则v-if操作的是元素

带有 v-show 的元素始终会被渲染并保留在 DOM 中。

v-show 只是简单地切换元素的 CSS 属性 display。

频繁切换的用v-show，反之用v-if

v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

6.v-bind

用于绑定数据和元素属性

用v-bind的绑定的属性的值也可以是一个对象

v-bind可用:代替

<html>
<head>
    <title>vue</title>
    <style>
        .mystyle{
            border:1px solid red;
        }
    </style>
</head>
<body>

    <div id="app">
        <img src="https://cn.vuejs.org/images/logo.png" title="vue">
        <br>
        <img v-bind:src="info" v-bind:title="message">
        <br>
        <img :src="info" :title="message" :class="{mystyle:isActive}" @click="toggleActive">
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app1 = new Vue({
        el: '#app',
        data:{
            info:"https://cn.vuejs.org/images/logo.png",
            message:"标题",
            isActive:true
        },
        methods:{
            toggleActive:function () {
                this.isActive=!this.isActive
            }
        }
    })
</script>
</body>
</html>

7.v-for

根据数据生成列表结构，常用于数组

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

<html>
<head>
    <title>vue</title>
    <style>
        .mystyle{
            border:1px solid red;
        }

    </style>
</head>
<body>

    <div id="app">
        <ol>
            <li v-for="item in arr">
                {{item}}
            </li>
        </ol>
        <ul>
            <li v-for="(item,index) in arr">
                {{index}}:{{item}}
            </li>
        </ul>
        <h1 v-for="item in user" v-bind:title="item.username">
            {{item.username}}:{{item.password}}
        </h1>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app1 = new Vue({
        el: '#app',
        data:{
            arr:["ont","two","three"],
            user:[
                {"username":"001","password":"001pass"},
                {"username":"002","password":"002pass"},
            ]
        }
    })
</script>
</body>
</html>

8.v-model

表单控件或者组件上创建双向绑定，即改变是双向的

<html>
<head>
    <title>vue</title>
</head>
<body>

    <div id="app">
        <input type="text"v-model="message">
        <h6>{{message}}</h6>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app1 = new Vue({
        el: '#app',
        data:{
            message:"v-model"
        }
    })
</script>
</body>
</html>

fanxs98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js的基础入门--指令

vue-cli是为单页面应用 (SPA) 快速搭建繁杂的脚手架如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。https://cn.vuejs.org/v2/guide/index.html学习vue，我们可以从最简单的引用cdn<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>接下来看看第一个vue写的页面<%@ p
复制链接

扫一扫

专栏目录