Vue快速入门笔记

程序员文章站 2022-06-06 19:13:13

...

文章目录

一、Vue基础

1、第一个Vue程序
2、el：挂载点
3、data：数据对象

二、本地应用

1、v-text指令
2、v-html指令
3、v-on指令
4、 v-show指令
5、v-if指令
6、v-bind指令
7、v-for指令

8、v-model指令
三、网络应用

1、axios
2、axios+vue

一、Vue基础

1、第一个Vue程序

来自官方文档 https://cn.vuejs.org/v2/guide/
引入Vue

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

或者

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

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

声明式渲染

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

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

2、el：挂载点

Vue实例的作用范围
Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器
可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其他的dom元素
可以使用其他的双标签，不能使用HTML和body

3、data：数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

<body>
    <div id="app">
        {{ message }}
        <h2>
            {{school.name}}
            {{school.mobile}}
        </h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                school:{
                    name:"江西师范大学",
                    mobile:"123-321-9000"
                },
                campus:["瑶湖校区","青山湖校区"]
            }
        })
    </script>
</body>

二、本地应用

1、v-text指令

v-text指令的作用是设置标签的内容
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
内部支持表达式

<body>
    <div id="app">
        <h2 v-text="message + '!'">test</h2>
        <h2 v-text="info + '!'">test</h2>
        <h2>{{message + '!'}}test</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello",
            info:"This is v-text"
        }

    })
</script>
</body>

2、v-html指令

v-html指令的作用是设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

<body>
    <!-- 2、html结构 -->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <!-- 1、开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 3、创建Vue实例
        var app = new Vue({
            el: '#app',
            data: {
                // content:"tsundere_x",
                content:"<a href='http://tsundere-x.top'>tsundere_x</a>"
            }
        })
    </script>
</body>

3、v-on指令

v-on指令的作用是为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件的修饰符有多种

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doTest">
        <input type="button" value="v-on简写" @click="doTest">
        <input type="button" value="双击事件" @dblclick="doTest">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data:{
                food:"西瓜"
            },
            methods: {
                doTest:function(){
                    alert("v-on指令");
                },
                changeFood:function(){
                    this.food += "好好吃！"
                }
            },
        })
    </script>
</body>

4、 v-show指令

v-show指令的作用是根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="切换图片" @click="changeImg">
        <img v-show="isShow" v-bind:src="imgUrl" alt="">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                imgUrl:"img/1.jpg"
            },
            methods: {
                changeIsShow:function(){
                    this.isShow = !this.isShow
                },
                changeImg:function(){
                    if(this.imgUrl == "img/1.jpg")
                        this.imgUrl = "img/2.jpg"
                    else
                        this.imgUrl = "img/1.jpg"
                }
            },
        })
    </script>
</body>

5、v-if指令

v-if指令的作用是根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom移除
频繁的切换v-show，反之使用v-if，前者的切换消耗小

6、v-bind指令

v-bind指令的作用是为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind，只保留:属性名
需要动态的增删class建议使用对象的方式

<body>
    <div id="app">
        <!-- <img v-bind:src="imgSrc" alt=""> -->
        <br>
        <img :src="imgSrc" style="width: 10em;" alt="" :title="imgTitle + '!!!'"
        :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                imgSrc:"img/1.jpg",
                imgTitle:"哈哈哈哈哈",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

7、v-for指令

v-for指令的作用是根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

<body>
    <div id="app">
        <ul>
            <li v-for="(it,index) in arr">
                {{ index + 1}}城市:{{ it }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr:["北京","上海","深圳"],
                vegetables:[
                    {name:"番茄"},
                    {name:"西红柿"}
                ]
            }
        })
    </script>
</body>

8、v-model指令

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<–>表单元素的值

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Tsundere'
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message = "tsundere";
                }
            },
        })
    </script>
</body>

三、网络应用

1、axios

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

官网地址：https://github.com/axios/axios

2、axios+vue

axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可

Vue快速入门笔记

文章目录

一、Vue基础

1、第一个Vue程序

2、el：挂载点

3、data：数据对象

二、本地应用

1、v-text指令

2、v-html指令

3、v-on指令

4、 v-show指令

5、v-if指令

6、v-bind指令

7、v-for指令

8、v-model指令

三、网络应用

1、axios

2、axios+vue

Vue2.5笔记：Vue中的模版

Vue2.5笔记：如何在项目中使用和配置Vue

项目实战15.2—企业级堡垒机 jumpserver快速入门

vue.js入门教程之计算属性

vue.js入门教程之基础语法小结

vue.js入门教程之绑定class和style样式

Vue.js学习笔记之 helloworld

Vue.JS入门教程之列表渲染

Vue.JS入门教程之处理表单

Vue.JS入门教程之事件监听