VUE [入门篇]

2022-08-31 275

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1、 v-if 、v-else、v-else-if、v-show2、v-for 3、v-text 、v-html4、v-on5、v-model 6、v-bind 7、v-pre、v-cloak、v-once

VUE简介

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

渐进式: 构建项目可以由简单到复杂

Vue优点
1.体积小压缩后的文件只有33k
2.运行效率更高采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术. 由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM
3.双向数据绑定让开发者不再去操作DOM,将更多的经历投入到业务中
4.生态丰富市面上有大量的开源项目基于vue 进行开发成熟稳定.

两个核心点
（1）响应式数据绑定
当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。
（2）组合的视图组件
即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。

虚拟DOM
利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

MVVM
1).字母解释
1.M model 数据
2.V view 视图
3.VM (view-model) 数据和视图的控制

2).当页面数据发生变化时,则通过dom监听将数据传给model
当model的数据发生变化时,则通过数据绑定绑定到页面中

声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
额外补充：
渲染分为：命令式渲染和声明式渲染
命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
声明式渲染：只需要告诉程序想要什么效果，其他的交给程序来做
具体区别看如下代码，执行结果一样，实现方式不同。

<html>
    <head>
        <meta charset="utf-8">
        <title>命令式渲染和声明式渲染</title>
        
    </head>
    <body>
        <script type="text/javascript">
            var arr = [1,2,3,4,5];
            // 命令式渲染：关心每步，关心流程，用命令去实现
            var newArr = [];
            for(var i = 0, len = arr.length; i < len; i++) {
                newArr.push(arr[i] * 2);
            }
            console.log(newArr);
 
            // 声明式渲染：不关心中间流程，只需要关心结果和实现条件
            var arr1 = arr.map(function(item) {
                return item*2;
            });
            console.log(arr1)
        </script>
    </body>
</html>

1.Vue入门
1.1入门示例

安装

(1) CDN引入

(2) NPM安装

npm install vue

helloworld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <!--第二步：引入Vue库-->
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
    <!--第三步:创建一个Div-->
    <div id="app">
        <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
        {{message}}
    </div>
 
    <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
    <script type="text/javascript">
        var app=new Vue({ // 创建Vue对象。Vue的核心对象。
            el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
            data:{    // data: 是Vue对象中绑定的数据
                message:'hello Vue!' // message 自定义的数据
            }
        })
    </script>
</body>
</html>

1.2 内部指令
1、 v-if 、v-else、v-else-if、v-show
这几个条件指令用于显示与隐藏各类元素，使用方式如下：

<html>
    <head>
        <meta charset="utf-8">
        <title>分支结构语法</title>
    </head>
    <body>
        <div id="app" align="center">
            <h1>根据根据分数评级</h1>
            <!-- v-if当判断条件成立时 div展现  控制dom元素增加 开销较大 -->
            <div v-if="score>=90">优秀</div>
            <div v-else-if="score>=80">良好</div>
            <div v-else-if="score>=70">中等</div>
            <div v-else>不及格</div>
            
            <!-- 直接渲染到页面中采用display: none;隐藏属性 如果频繁展现的元素 使用v-show -->
            <div v-show="flag">测试show数据</div>
            <button @click="flag= !flag">展现</button>
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    //定义分数
                    score: 100,
                    flag: false
                }
            })
        </script>
    </body>
</html>

v-if与v-show的区别

v-if：在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。
v-show：调整css dispaly属性，开销较小，在常频繁地切换时使用。
2、v-for
(1) 基本用法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<!--模板-->
<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>
<!--js代码-->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            items:[20,23,18,65]
        }
    })
</script>
 
</body>
</html>

(2) 对象遍历

参数: 第一个为值,第二个为键名,第三个为索引

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script></head>
</head>
<body>
<!--模板-->
<div id="app">
    <ul>
        <li v-for="(value,key,index) in object">
            {{ index }}. {{ key }} - {{ value }}
        </li>
    </ul>
</div>
 
<!--js代码-->
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            object:{
                firstName: 'John',
                lastName: 'Doe'
            }
        }
    })
</script>
</body>
</html>

3、v-text 、v-html
（1）v-text

{{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}} (插值闪烁)，Vue提供的v-text可以解决这个问题

作用: 直接展现解析数据

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
 
<div>
    {{ message }}
</div>
 
<!--和下面的一样-->
<div v-test="message"></div>
 
</body>
</html>

（2）v-html

用于解析html的数据

<!-- v-html指令直接显示html效果容易被攻击本网站内可以使用

 第三方数据来源不要使用-->

4、v-on
（1）常规用法

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
 
<!--v-on常规用法-->
<div id="add">本场比赛得分: {{count}}
    <button v-on:click="add">加分</button>
</div>
 
<!--//JS-->
<script type="text/javascript">
    new Vue({
        el: '#add',
        data:{
            count: 1
        },
        methods: {
            add: function(){
                this.count++;
            }
        }
    });
</script>
 
 
 
</body>
</html>

5、v-model
用法: 在表单控件或者组件上创建双向绑定,当js数据修改时,页面内容变化, 当页面内容修改时,则数据变化.

以下的model都需要在data中声明初始值

data: {

        message: "a",
        count: 1,
        status: [],
        sex: '男',
        selected: ''
    }

（1）input

（2）textarea

（3）checkbox

有效

无效

状态：{{status}}

（4）radio

男

女

性别：{{sex}}

（5）select

<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>

Selected: {{ selected }}

完整代码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
 
</head>
<body>
<div id="app">
    <input type="text" v-model="message"/>
    <br>
 
    <textarea cols="30" rows="10" v-model="message"></textarea>
    <br>
 
    <input type="checkbox" id="first" value="1" v-model="status"/>
    <label for="first">有效</label>
    <input type="checkbox" id="second" value="2" v-model="status"/>
    <label for="second">无效</label>
    <div>状态:{{status}}</div>
    <br>
 
    <input type="radio" id="one" value="男" v-model="sex"/>
    <label for="one">男</label>
    <input type="radio" id="two" value="女" v-model="sex"/>
    <label for="one">女</label>
    <div>性别:{{sex}}</div>
    <br>
 
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <div>Selected {{ selected }}</div>
    <br>
</div>
 
 
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: "a",
            count: 1,
            status: [],
            sex: '男',
            selected: ''
        }
    })
</script>
</body>
</html>

6、v-bind
用于处理html标签的动态属性，即动态赋值。

(1) 常规用法

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-blind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
 
 
 
</head>
<body>
    <div id="app">
 
        <img v-bind:src="imgSrc"   width="400px">
 
    </div>
 
 
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                imgSrc: "../img/20220114112403.png"
            }
        })
    </script>
</body>
</html>

(2) 缩写

7、v-pre、v-cloak、v-once
（1）v-pre

    用法:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-pre>{{ message }}</div>
    </div>
 
 
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                message: 'A'
            }
        })
    </script>
 
</body>
</html>

（2）v-cloak

介绍:
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
 
 
</head>
 
<body>
<style type="text/css">
    [v-cloak] {
        display: none;
    }
</style>
<div id="app">
    <div v-cloak>{{message}}</div>
</div>
 
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: '欢迎使用'
        }
 
    })
</script>
</body>
</html>

（3）v-once

用法:
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <span v-once>{{message}}</span>
</div>
 
<script>
    new Vue({
        el:'#app',
        data: {
            message: '0'
        }
    })
</script>
</body>
</html>

VUE [入门篇]

VUE简介

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

VUE [入门篇]

​VUE简介

热门文章

最新文章

相关课程

相关电子书

VUE简介