Vue.js

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

JavaScript框架：相比于库，框架更为强大，但是用框架必须遵守其规则。
简化DOM操作：对Vue对DOM元素有特殊语法修饰，直接用就完了、
响应式数据驱动：数据改变页面同步更新。

官方文档

Vue作者是中国人，文档对中文支持还是不错的：

v2.x
v3.x

Vue基础

起步

导入开发版本的Vue

开发环境版本，包含了有帮助的命令行警告

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

生产环境版本，优化了尺寸和速度

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

创建Vue实例对象
使用模板语法把数据渲染到页面上
- 声明式渲染
- 插值表达式

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

{{数据名}}

el 挂载点

通过CSS选择器设置Vue示例管理的元素，被命中元素内部被两个大括号修饰的部分会被Vue实例中同名数据替换。

作用范围

作用范围只在Vue实例命中的元素内部生效，且可以对多个挂载点生效，嵌套元素内的挂载点也生效。

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

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

可使用的选择器

id选择器、class选择器和标签选择器均可使用，需要注意的是，使用标签选择器时如果存在多个相同的标签，则只会匹配第一个。推荐使用id选择器。

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

var app = new Vue({
    // el: '#app', // id选择器可使用
    // el:".app", // class选择器可使用
    el:"div",
    data: {
        message: 'Hello Vue!'
    }
})

可设置的DOM元素

只支持双标签(即有开头有结尾的标签)，不支持单标签(压根没地写挂载点)。注意，不支持html标签和body标签

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

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

data数据对象

Vue中用到的数据定义在data中，不仅支持字符串，也支持其他复杂数据类型，遵循js语法即可。

<body>
    <div id="app" class="app">
        {{message}}
        <h1>{{map.a}}&nbsp;{{map.b}}</h1>
        <ul>
            <li>{{array[0]}}</li>
            <li>{{array[1]}}</li>
            <li>{{array[2]}}</li>
        </ul>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        map:{
            a:"a_value",
            b:"b_value"
        },
        array:["1","2","3"]
    }
})

Vue指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-text

用于将数据填充到标签中，但是是整体替换。

<body>
    <div id="app" class="app">
        <h1 v-text="message1 + '!'">原本内容</h1>
        <h1 v-text="message2 + '!'">原本内容</h1>
        <h1>{{message1 + '!'}}原本内容</h1>
    </div>
</body>

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

v-html

也可以实现v-text功能，但也可以插入并解析HTML代码

<body>
    <div id="app" class="app">
        <p v-html="content1">原本内容</p>
        <p v-html="content2">原本内容</p>
        <p>{{content2}}原本内容</p>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data: {
        content1: 'Hello Vue!',
        content2: '<a href="http://www.baidu.com">百度一下，你就知道</a>'
    }
})

v-on

插入事件，绑定方法写在 methods 中，可以实现数据修改。

<body>
    <div id="app" class="app">
        <input type="button" value="v-on指令" v-on:click="fun1">
        <input type="button" value="v-on简写" @click="fun2"> <!-- 简写形式 -->
        <h3 @dblclick="change('是你爹')">{{message}}</h3>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data:{
        message:"我"
    },
    methods:{
        fun1:function(){
            alert("Hello");
        },
        fun2:function(){
            alert("World!");
        },
        change:function(p1){
            this.message += p1;
        }
    }
})

050 051 052

v-show

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

<body>
    <div id="app" class="app">
        <input type="button" value="LED开关" @click="LED">
        <input type="button" value="age++" @click="AgeUp"><br>
        <img v-show="open" src="../images/LED_OPEN.jpg" alt=""><br>
        <img v-show="close" src="../images/LED_OFF.jpg" alt=""><br>
        <img v-if="age>=18" src="../images/FBI_Warning.jpg" alt="" height="100" >
    </div>
</body>

var app = new Vue({
    el: '#app',
    data:{
        open:false,
        close:true,
        age:17
    },
    methods:{
        LED:function(){
            this.open=!this.open;
            this.close=!this.close;
        },
        AgeUp:function(){
            this.age++;
        }
    }
})

053 ------》 054

v-if

根据表达式真假切换元素显示和隐藏，操纵的是DOM元素。

如上例，实现效果相同，但实现方式不同：

055 ---------》 056

v-bind

用于绑定元素属性

<body>
    <div id="app" class="app">
        <img v-bind:src="imgSrc" alt="" height="150" > <br>
        <img :src="imgSrc" alt="" height="150" > <!-- 简写形式 -->
    </div>
</body>

var app = new Vue({
    el: '#app',
    data:{
        imgSrc:"../images/FBI_Warning.jpg"
    }
})

v-for

Vue界的 for-each 循环。

<body>
    <div id="app" class="app">
        <ul>
            <li v-for="(item, index) in array">
                {{index+1}}array:{{item}}
            </li>
        </ul>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data:{
        array:["a","b","c"]
    }
})

v-model

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

<body>
    <div id="app" class="app">
        <input type="text" v-model="message" @keyup.enter="GetMessage">
        <h3>{{message}}</h3>
    </div>
</body>

var app = new Vue({
    el: '#app',
    data: {
        message: "我"
    },
    methods: {
        GetMessage: function () {
            alert(this.message);
        }
    }
})

059 ------》 060

axios

常用网络请求库

导入

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

基础语法

get

axios.get(地址?查询字符) //查询字符格式为 key=value&key2=value2&key······

post

axios.post(地址,参数对象) //参数对象格式为 {key=value, key2=value2, key······}

then

axios.get(地址?查询字符).then(function(response){},function(err){});
axios.post(地址,参数对象).then(function(response){},function(err){});

示例：

<body>
    <input type="button" value="get" class="get">
    <input type="button" value="post" class="post">
</body>

/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num(笑话条数，数字)
响应内容：随机笑话
*/
document.querySelector(".get").onclick = function(){
    axios.get("https://autumnfish.cn/api/joke/list?num=2")
        .then(function(response){
        console.log(response);
    },function(err){
        console.log(err);
    })
}
/*
接口2：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username(用户名，字符串)
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick = function(){
    axios.post("https://autumnfish.cn/api/user/reg",{username:"Kiang"})
        .then(function(response){
        console.log(response);
    },function(err){
        console.log(err);
    })
}

Vue + axios

使用Vue与axios结合比使用原生语法要更好记、简便。

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

var app = new Vue({
    el:"#app",
    data:{
        joke:"随机笑话"
    },
    methods:{
        getJoke:function(){
            var that = this;
            axios.get("https://autumnfish.cn/api/joke")
                .then(function(response){
                that.joke = response.data;
            },function(err){
                console.log(err);
            })
        }
    }
})

063 ---》 064

Vue组件

非单文件组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>

<body>
    <div id="root">
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    //第一步：创建school组件
    const school = Vue.extend({
        template: `
            <div class="demo">
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>	
            </div>
        `,
        data() {
            return {
                schoolName: 'testSchool',
                address: 'testAddress'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        },
    })

    //第一步：创建student组件
    const student = Vue.extend({
        template: `
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        }
    })

    new Vue({
        el: '#root',
        //第二步：注册组件（局部注册）
        components: {
            school,
            student
        }
    })
</script>
</html>

Vue CLI

简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，使用Vue脚手架之后我们开发的页面将是一个完整的系统，它提供：

通过 vue-cli 实现的交互式的项目脚手架，通过执行命令方式即可下载相关依赖
通过@vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 ( @vue/cli-service )，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

安装

环境准备：需要安装配置 node.js

配置淘宝镜像

npm config set registry https://registry.npm.taobao.org

验证

npm config get registry

配置下载位置

npm config set cache "D:\npm\cache"
npm config set prefix "D:\npm\global"

验证

npm config ls

执行安装命令
```
npm install -g vue-cli
```
创建第一个Vue脚手架项目

posted @ 2022-05-03 15:06 AncilunKiang 阅读(83) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Element UI

· Node.js

· Vue.js

· vue入门

· 31-Vue

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称： AncilunKiang
园龄： 4年2个月
粉丝： 18
关注： 2

+加关注

2025年3月

日

一

二

三

四

五

六