Vue基础

最新推荐文章于 2025-01-23 15:51:02 发布

所追寻的风

最新推荐文章于 2025-01-23 15:51:02 发布

阅读量168

点赞数 1

分类专栏：前端文章标签： vue js

本文链接：https://blog.youkuaiyun.com/the_Discovery/article/details/107713565

版权

前端专栏收录该内容

7 篇文章

订阅专栏

渐进式前端框架，数据驱动
vue官方文档

1. Vue基础

el：app对象挂载点，用css选择器选择需要挂在到哪个元素
data：数据对象，字符串、数组、对象的访问如下代码所示
method：方法

<body>
    <div id="app">
        {{message}}
        {{courses[0]}}
        {{languages.oop}}
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hi~",
                courses: ["数据结构", "操作系统", "计算机组成原理", "计算机网络"],
                languages: {
                    pop: "c",
                    oop: "c++",
                }
            },
            method:{
                f: function() {
                    // 方法
                }
            }
        })
    </script>
</body>

2. 本地应用

2.1 内容绑定

<!-- 将文本添加到h2中 -->
<h2 v-text="message"></h2>

<!-- 也可以使用表达式 -->
<h2 v-text="message+'123'"></h2>

<!-- v-html解析成innerHTML -->
<h2 v-html="message"></h2>

2.2 事件绑定

使用v-on:click属性或者@click属性。

<input id="app" type="button" value="事件绑定" @click="clickFunction">
<script>
	var app = new var({
        el: "#app",
        methods: {
            clickFunction: function(){
                // 添加事件
            }
        }
    })
</script>

甚至还可以传递参数。

<input id="app" type="button" value="事件绑定" @click="clickFunction(111,'hello')">

<!-- 回车执行 -->
<input id="app" type="button" value="事件绑定" @keyyup.enter="clickFunction">

2.3 显示隐藏

使用v-show或者v-if属性。属性中支持关系运算符。

<img src="#" v-shwo="true">
<img src="#" v-shwo="isShow">
<img src="#" v-shwo="age>=18">

上述v-show属性全都可以替换成v-if。两者的区别如下表

v-show	v-if
修改元素的display样式来达到显示隐藏的效果	直接从DOM树中添加或移除DOM树

2.4 设置元素属性

使用v-bind:属性名或者**:属性名**

<img :src="imgSrc" >
<img :title="imgtitle" >

<!-- active类名是否生效 -->
<img :class="isActive?'active':''">
<img :class="active:isActive">

2.5 for循环构造列表元素

<body>
    <div id="app">
        <input type="button" value="添加" @click="add">
        <input type="button" value="移除" @click="remove">
        <ul v-for="(course,index) in courses">
            <li>{{index+1}} -> {{course}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                courses: ["数据结构", "操作系统", "计算机组成原理", "计算机网络"]
            },
            method: {
                add:function() {
                    this.course.push("面向对象程序设计")，
                },
                remove:function() {
                    this.course.shift(); // 移除数组中第0个元素
                }
            }
        })
    </script>
</body>

2.4 双向绑定

v-model指令便捷的设置和获取表单元素的值。

<input type="text" v-model="message">
<h2> {{ message }} </h2>

此时，h2中的内容随input中内容的变化而变化

3. 网络应用

Ajax封装库axios的使用

见Ajax 3. Ajax封装库axios