Vue入门指令详解

置顶李巴巴

已于 2022-06-07 17:44:24 修改

阅读量4.8k

点赞数 2

文章标签： vue.js vue 前端框架 javascript

于 2022-04-29 13:12:49 首次发布

本文链接：https://blog.csdn.net/weixin_52850476/article/details/124479016

版权

一、Vue 初体验（快速建立一个Vue工程）

什么是 Vue.js ？

Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工作链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

起步

尝试 Vue.js 最简单的方法是使用 Hello Word 的例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

页面就会显示：Hello Vue！

至此，我们已经成功地创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。

接下来我们聊一下 js 中两个参数：el 挂载点 和 data 数据对象

el 挂载点

el 挂载点的作用是什么？ el 是用来设置 Vue 实例挂载（管理）的元素
Vue 实例的作用范围是什么？ Vue 会管理 el 命中元素及其内部的后代元素
是否可以使用其他的选择器？可以，但建议使用 id 选择器
是否可以设置其他的 dom 元素？可以使用其他的双标签，但不能使用 html 和 body

data 数据对象

data 用来定义 Vue 中用到的数据
data 中可以写复杂类型的数据
渲染复杂类型数据时，遵守 js 的语法即可，例如：对象的点语法、数组的索引下标语法

Vue 快速入门可查看官方文档：Vue.js (vuejs.org)

二、Vue 命令

指令汇总：

内容绑定、事件绑定	v-text v-html v-on基础
显示切换、属性绑定	v-show v-if v-bind
列表循环、表单元素绑定	v-for v-on补充 v-model

内容绑定、事件绑定

v-text

v-html

v-on基础

显示切换、属性绑定

v-show

v-if

v-bind

列表循环、表单元素绑定

v-for

v-on补充

v-model

v-text 指令

设置标签的文本值

<div id="app">
   <!--使用v-text将会替换标签内的所用内容, 并且只能使用单引号-->
   <h2 v-text="message+'!'">我爱北京</h2>
   <!--使用插值表达式可以选择性地替换值, 可使用单、双引号-->
   <h2>我爱{{message+"!"}}}</h2>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '北京'
  }
})

v-html 指令

设置标签的 innerHTML

<div id="app">
   <p v-html="content"></p>
</div>

var app = new Vue({
    el: "#app",
    data: {
      content: "<a href='http://www.baidu.com'>百度<\a>"
    }
});

v-on 基础

为元素绑定事件

<div id="app">
   <input type="button" value="v-on指令" v-on:click="doIt">
   <input type="button" value="v-on简写" @click="doIt">
   <input type="button" value="双击事件" @dblclick="doIt">
   <h2 @click="changeFood">{{ food }}</h2>
</div>

var app = new Vue({
    el: "#app",
    data: {
        food: "西兰花炒鸡蛋"
    },
    /*methods与data为同一级, 表示方法*/
    methods: {
        doIt: function () {
            alert("做It");
        },
        changeFood: function () {
            /*通过this获取当前dom对象, 并修改当前dom对象的数据, dom对象随之同步*/
            this.food += "好好吃！";
        }
    }
});

注意：
当更改 dom 元素的数据时，dom 元素会随着数据的更改而同步。所以只需要更改数据即可，不用更改 dom 元素，数据更改后 dom 元素会同步更改。

v-show 指令

根据表达式的真假，切换元素的显示和隐藏（操纵样式）

<div id="app">
    <img src="img/1.jpg" v-show="true">
    <img src="img/2.jpg" v-show="isShow"><!--isShow为true时显示-->
    <img src="img/3.jpg" v-show="age>=18"><!--年龄大于等于18时显示-->
</div>

var app = new Vue({
    el: '#app',
    data: {
        isShow: false,
        age: 18
    }
})

v-show 指令的原理是修改标签元素的 display，实现显示和隐藏。指令后面的内容最终都会解析为布尔值，值为 true 时显示，值为 false 时隐藏。且数据改变之后，对应元素的显示状态会同步更新。

v-if 指令

根据表达式的真假，切换元素的显示和隐藏（操纵 dom 元素）

<div id="app">
    <input type="button" value="切换显示" @click="toggleIsShow">
    <img src="img/2.jpg" v-if="isShow"><!--isShow为true时显示-->
</div>

var app = new Vue({
    el: '#app',
    data: {
        isShow: false
    },
    methods: {
        toggleIsShow: function () {
            this.isShow = !this.isShow;
        }
    }
})

v-if 指令的原理是操纵 dom 元素，实现显示和隐藏。表达式的值为 true 时，元素存在于 dom 树中，值为 false 时，元素从 dom 中移除。频繁的切换使用 v-show，反之使用 v-if，前者的切换消耗小。

v-bind 指令

设置元素的属性

表达式语法：v-bind:属性名=表达式（v-bind 可以省略）

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

    <div v-bind:class="isActive?'active':''">嘿嘿嘿！！！</div>
    <div v-bind:class="{active:isActive}">嘿嘿嘿！！！</div><!--推荐使用-->
</div>

var app = new Vue({
    el: '#app',
    data: {
        imgSrc:"https://www.baidu.com",
        message: '页面加载于 ' + new Date().toLocaleString(),
        isActive:true
    }
})

v-for 指令

根据数据生成列表结构

<div id="app">
    <ul>
        <!--item为自定义变量,记录每次循环的数据-->
        <li v-for="(item,index) in arr">    <!--index从0开始,可以省去-->
            {{ index }}：我爱{{ item }}
        </li>
    </ul>
    <h2 v-for="item in student" v-bind:title="item.name">
        我是: {{ item.name }}, 今年{{ item.age }}岁
    </h2>
</div>

var app = new Vue({
    el: '#app',
    data: {
        arr:["北京","上海","广州","深圳"],
        student:[
            {name:"小明", age:17},
            {name:"小红", age:18},
            {name:"小强", age:19}
        ]
    }
})

v-on 补充

传递自定义参数，事件修饰符

<div id="app">
    <!--带参数的事件-->
    <input type="button" value="点击" @click="doIt(666,'老铁')">
    <!--.enter是事件修饰符, 表示只有在按下回车键时才会触发事件-->
    <input type="text" @keyup.enter="sayHi">
</div>

var app = new Vue({
  el: '#app',
  methods:{
      doIt:function (p1,p2) {
          alert(p2 + p1);
      },
      sayHi:function () {
          alert("How are you?")
      }
  }
})

关于事件修饰符有很多，用法都一样，这里就不一一介绍了，更多可以参见官方 API：API — Vue.js (vuejs.org)

v-model 指令

获取和设置表单元素的值（双向数据绑定）

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

var app = new Vue({
  el: '#app',
  data: {
      message:"我真帅！！"
  }
})

三、网络应用

上一章所讲的指令都是用来进行本地控制的，但网络应用的使用愈来愈多，下面我们聊一聊网络应用 axios。

axios

功能强大的网络请求库

首先我们要进行导包（联网状态下）

<script src="https://unpkg.com/axios/dist/axios.min.s"></script>

使用 get 或 post 方法即可发送对应的请求，then 方法中的回调函数会在请求成功或失败时触发，通过回调函数的形参可以获取响应内容或错误信息。

接下来通过以下两种示例及代码为大家演示 axios 的使用方法

<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">

/*随机获取笑话的接口*/
document.querySelector(".get").onclick = function () {
    axios.get("https://autumnfish.cn/api/joke/list?num=3")
        .then(function (response) {    // 成功时触发
            console.log(response);
        },function (err) {             // 失败时触发
            console.log(err);
        })
}
/*用户注册接口*/
document.querySelector(".post").onclick = function () {
    axios.post("https://autumnfish.cn/api/user/reg",{username:"baby"})
        .then(function (response) {
            console.log(response);
        },function (err) {
            console.log(err);
        })
}

axios + vue

<div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
    <p>{{ joke }}</p>
</div>

var app = new Vue({
    el:"#app",
    data:{
        joke:"很好笑的笑话"
    },
    methods:{
        getJoke:function () {
            var that = this;
            axios.get("https://autumnfish.cn/api/joke")
                .then(function (response) {
                    console.log(response.data);
                    // 这里的this已经变了,是axios,不是app了,所以不能直接通过this获取joke
                    // 我们可以通过变量名记录之前的app
                    // this.joke = response.data;
                    that.joke = response.data;
                },function (err) {

                })
        }
    }
})

李巴巴

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue入门指令详解

本文章旨在带你快速构建一个 vue 工程，并通过示例介绍 vue 中常用的本地应用 v-text、v-html、v-on、v-show、v-if、v-bind、v-for、v-model等指令，以及网络应用的 axios 指令与 vue 的结合使用。什么是 Vue.js ？Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。.........
复制链接

扫一扫