Vue 的简单使用

最新推荐文章于 2023-02-23 14:37:32 发布

山河故人丶

最新推荐文章于 2023-02-23 14:37:32 发布

阅读量965

点赞数

文章标签： Vue

本文链接：https://blog.csdn.net/Lixc_18/article/details/98628713

版权

一、Vue

1、Vue 简介

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

2、Vue 特点

易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效：20kB min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

3、Vue.js 的下载

下载链接：https://cn.vuejs.org/v2/guide/installation.html
在这里插入图片描述
下载好后就可以导入我们的项目中进行使用。

二、Vue 的指令

1、v-cloak、v-text、v-html 指令以及插值表达式的学习

首先我们需要引入 Vue.js ，代码如下：

<script src="../lib/vue.js" type="text/javascript">
</script>

其中 src 表示 vue.js 所在的目录，还有就是 script 标签要成对出现。

使用 Vue 还需要一个 Vue 对象，可以创建一个 Vue 对象，代码如下：

<script type="text/javascript">
    var vm = new Vue({
      
    });

</script>

差值表达式的格式为 {{需要插入的值}}

v-clock 指令
这个指令我们可以把它当成 HTML 元素的一个属性来使用，格式为：

 <p v-cloak>{{msg}}</p>

当 Vue 加载完毕时， v-clock 属性会自动消失，所以它还有一个 bug 就是当网速比较慢，vue 初始化未完成的时候，插值表达式不能被解析，会直接显示出来，加载完毕又会显示真实的值，造成闪烁。那么我们可以通过以下代码解决这个闪烁问题

[v-clock]{
    display:none;
}

这就是使用css 样式把所有带 v-clock 属性的元素都隐藏，当Vue 加载完毕后才进行显示。
v-text指令和 v-html指令

语法：<p v-text="msg1"></p>、<p v-html="msg"></p>
作用：和插值表达式一样，用于给HTML元素添加文本

v-text 和插值表达式的区别：

v-text不会存在闪烁问题
v-text会将Model中的数据完全替换到HTML元素中（覆盖）
插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换）

相同点：
4. 插值表达式和v-text都可以给HTML元素显示文本
5. 插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）

 <p v-text="msg"></p>

其中 v-text 和 v-html 的唯一区别就是给 HTML 添加内容时会解析内容中的 HTML。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <p v-text="msg"></p>
    <p v-html="msg"></p>
</div>
<script src="../lib/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {

            msg: "<h1>hello Vue</h1>",
        }
    });

</script>
</body>
</html>

效果展示：
在这里插入图片描述

2、v-bind、v-on 指令的学习

v-bind

语法：在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据，v-bind:可以简化为一个英文的冒号:。具体使用如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input type="text" v-bind:value="msg"/><br><br><br>
    <input type="text" :value="msg"/>
</div>
<script src="../lib/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "我是来自Model中的内容"
        }
    });

</script>
</body>
</html>

效果图如下：
在这里插入图片描述
v-on
v-on 在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码，其中v-on:可以被@替代，格式如下：

<button v-on:click="sayHello(name)">点击下显示你好</button>
 <button @click="sayHello(name)">点击下显示你好</button>

实例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <button v-on:click="show(msg,name)" :value="msg">点击显示内容</button>
    <br><br><br>
    <button @click="show(msg,name)" :value="msg">点击显示内容</button>
</div>
<script src="../lib/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            name: "靓仔",
            msg: "你好啊，"
        },
        methods: {
            show(msg, name) {
                alert(msg + name);
            }
        }
    });
</script>
</body>
</html>

效果展示：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190807164619923.png
注意事项

常见的web网页的事件都支持绑定
事件名字不带on
事件触发的方法必须在methods中定义
v-on标识的属性会被Vue解析为特定JavaScript，只要内容符合 JavaScript 规范都能正确执行（比如传入参数）

3、v-mode指令（双向数据绑定）

v-model 指令是唯一的一个实现双向数据绑定的指令。语法如下：

 <input type="text" v-model="num1"/>

适用元素为表单，其他元素不能适用 v-mode 指令，双向数据绑定是 model 层数据的改变会影响 view 层HTML结果，HTML中表单元素值的改变会写入对应的model层的数据中。我们可以使用双向数据绑定来实现一个简易的计算机，代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label>num1： <input type="text" v-model="num1"/></label>
    <select v-model="opr">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <label>num2： <input type="text" v-model="num2"/></label>
    <label>
        <button @click="calc()">=</button>
    </label>
    <span v-text="result"></span>
</div>

<script src="../lib/vue.js"></script>
<script>

    var vm = new Vue({
        el: "#app",
        data: {
            num1: '0',
            num2: '0',
            result: 0,
            opr: '+'
        },
        methods: {
            calc() {
                switch (this.opr) {
                    case '+':
                        this.result = parseInt(this.num1) + parseInt(this.num2);
                        break;
                    case '-':
                        this.result = parseInt(this.num1) - parseInt(this.num2);
                        break;
                    case '*':
                        this.result = parseInt(this.num1) * parseInt(this.num2);
                        break;
                    case '/':
                        this.result = parseInt(this.num1) / parseInt(this.num2);
                        break;
                }
            }
        }
    });

</script>

</body>
</html>

4、v-for 指令

使用 v-for 指令可以对数组进行遍历。

遍历简单数组：如果一个数组的名字为 names，遍历方法如下

<p v-for="name in names">{{name}}</p>

在变量数组的时候我们还可以把数组的索引进行输出，

<p v-for="name,index in names">{{name}}-------------{{index}}</p>

遍历对象属性值

    <p v-for="value,key in person">{{key+'--'+value}}</p>

使用v-for指令遍历数字（作用就是标准的for循环次数遍历）

 <p v-for="num,index in 12" v-text="num+'---'+index"></p>

Vue中的for指令实现数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <p v-for="user in users">{{user}}</p>
    <h1>绑定</h1>
    <label>id：<input type="text" v-model="id"/></label>
    <label>name：<input type="text" v-model="name"/></label>
    <label>age：<input type="text" v-model="age"/></label>
    <label>
        <button @click="add()">添加人员信息</button>
    </label>
    <p v-for="user in users" :key="user.id">
        <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
    </p>
</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            users: [
                {id: 1, name: '李某人', age: 18},
                {id: 2, name: '张某人', age: 17},
                {id: 1, name: '王某人', age: 19}
            ]
        },
        methods:{
            add(){
                this.users.push({id:this.id,name:this.name,age:this.age});
            }
        }
    });
</script>
</body>
</html>

5、v-if 和 v-show 指令

首先这两个指令都是控制元素的显示和隐藏，那么他们的区别有一下几点

v-if切换元素状态的具体操作是（创建元素–删除元素）比较消耗创建性能
v-show切换元素状态的具体操作是（修改css的display样式）比较消耗渲染性能

使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button @click="toggle()">点击</button>
    <p v-if="flag">我是使用v-if控制的p标签</p>
    <p v-show="flag">我是使用v-show控制的p标签</p>

</div>
<script src="../lib/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {
            toggle() {
                this.flag = !this.flag
            }

        }

    });
</script>
</body>
</html>

当为 true 时表示显示

山河故人丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 的简单使用

一、Vue1、Vue 简介 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。...
复制链接

扫一扫