Vue.js最最最基础入门的笔记整理

最新推荐文章于 2022-07-16 19:58:51 发布

Ludwig1597

最新推荐文章于 2022-07-16 19:58:51 发布

阅读量348

点赞数 1

分类专栏： Vue.js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Ludwig1957/article/details/113065527

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2021.1.23

Vue.js学习笔记（一）

准备工作

学前须知

HTML
CSS
JavaScript
AJAX（还未学）

开发工具

VSCode
Live Server插件//代码保存时浏览器自动刷新（浏览器实时预览）

课程安排

Vue基础
本地应用
网络应用
综合应用

Vue基础

Vue简介

是JavaScript框架
简化DOM操作
响应式数据驱动

第一个Vue程序

作者：尤雨溪，文档:https://cn.vuejs.org

三个步骤：

导入开发版本的Vue.js
创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

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

el:挂载点

el的作用：用来设置Vue实例挂载(管理)的元素

三个问题:

Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素以及其内部的后代元素。
是否可以使用其他的选择器？
可以。但是建议使用ID选择器。
是否可以设置其他的dom元素？
可以使用其他的双标签，不能使用HTML和BODY

<body>
    {{message}}
    <div id="app" class="app">
        {{message}}
        <span>{{message}}</span>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            //el: "#app",//建议使用id选择器
            //el: ".app",//类选择器
            el: "div", //标签选择器
            data: {
                message: "你好，Vue"
            }
        })
    </script>
</body>

data:数据对象

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

<body>
    <div id="app">
        {{message}}
        <h2>{{my.name }} {{my.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[2]}}</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",
                my: {
                    name: "Ludwig",
                    mobile: "8888 8888"
                },
                campus: ["南京", "北京", "上海"]
            }
        })
    </script>
</body>

本地应用

通过Vue实现常见的网页效果
学习Vue指令，以案例巩固知识点
Vue指令指的是，以v- 开头的一组特殊语法

1.内容绑定，事件绑定

v-text
v-html
v-on基础

v-text //设置标签的文本值（textContent）

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

<body>
    <div id="app">
        <h2 v-text="message+'!'">南京</h2>
        <h2 v-text="info+'!'">南京</h2>
        <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: "学习v-text指令",
                info: "我的第一个前端框架"
            }
        })
    </script>
</body>

v-html //设置标签的innerHTML

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

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

v-on基础 //为元素绑定事件

v-on指令的作用：为元素绑定事件
事件名不需要写on
v-on指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

<body>
    <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>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //创建vue实例
        var app = new Vue({
            el: "#app",
            data: {
                food: "西兰花炒蛋"
            },
            methods: {
                doIt: function() {
                    alert("做IT")
                },
                changeFood: function() {
                    //console.log(this.food);
                    this.food += "好好吃！"
                }
            }
        })
    </script>
</body>

案例：计数器

<body>
    <div id="app">
        <!-- 计数器功能区域 -->
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 编码 -->
    <script>
        //创建vue实例
        var app = new Vue({
            el: "#app",
            data: {
                num: 1,
            },
            methods: {
                add: function() {
                    //console.log('add');
                    if (this.num >= 10) {
                        alert('不能再加啦，到顶啦')
                    } else {
                        this.num++;
                    }
                },
                sub: function() {
                    //console.log('sub');
                    if (this.num <= 0) {
                        alert('不能再减啦，到底啦')
                    } else {
                        this.num--;
                    }
                }
            }
        })
    </script>
</body>

总结

创建Vue实例时：el(挂载点)、data(数据)、methods(方法)
v-on指令的作用是绑定事件，简写为 @
方法中通过this关键字获取data中的数据
v-text指令的作用是：设置元素的文本值，简写为 {{}}
v-html指令的作用是：设置元素的innerHTML

2.显示切换，属性绑定

v-show
v-if
v-bind

v-show //根据表达式的真假，切换元素的显示和隐藏

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

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="增加年龄" @click="addAge">
        <img v-show="isShow" src="images/坂本.jpg" alt="">
        <img v-show="age>=18" src="images/坂本.jpg" alt="">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: 15
            },
            methods: {
                changeIsShow: function() {
                    this.isShow = !this.isShow
                },
                addAge: function() {
                    this.age++;
                }
            }
        })
    </script>
</body>

v-if //根据布尔值的真假，切换元素的显示和隐藏(操纵dom元素)

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

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">学习vue的第一天</p>
        <p v-show="isShow">学习vue的第一天 v-show修饰</p>
        <h2 v-if="temperature>=35">热死</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                temperature: 40
            },
            methods: {
                toggleIsShow: function() {
                    this.isShow = !this.isShow;
                }
            },
        })
    </script>
</body>

v-bind //设置元素的属性(比如:src,title,class,元素的特点都写在元素内部)

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <!-- v-bind可以省略直接写冒号 -->
        <img :src="imgSrc" alt="" :title="imgTitle" :class="isActive?'active':''" @click="toggleActive">
        <img :src="imgSrc" 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: "images/坂本.jpg",
                imgTitle: "坂本龙一",
                isActive: false
            },
            methods: {
                toggleActive: function() {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

</html>

3.列表循环，表单元素绑定

v-for
v-on补充
v-model

v-for //根据数据生成列表结构

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

<body>
    <div id="app">
        <input type="button" value="添加蔬菜" @click="add">
        <input type="button" value="删除蔬菜" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}城市：{{item}}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{item.name}}
        </h2>
    </div>
      
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["北京", "南京", "上海", "深圳"],
                vegetables: [{
                    name: "西红柿"
                }, {
                    name: "马铃薯"
                }]
            },
            methods: {
                add: function() {
                    this.vegetables.push({
                        name: "西兰花"
                    })
                },
                remove: function() {
                    this.vegetables.shift();
                }
            }
        })
    </script>
</body>

v-on补充 //传递自定义参数，事件修饰符

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符 (比如.enter是回车)可以对事件进行限制
修饰符有很多

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'vue')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function(p1, p2) {
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function() {
                    alert('吃了吗');
                }
            }
        })
    </script>
</body>

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

v-model指令的作用：便捷的设置和获取表单元素的值
绑定的数据回合表单元素值相关联
绑定的数据<----->表单元素的值（双向绑定）

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <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: "vue"
            },
            methods: {
                getM: function() {
                    alert(this.message);
                },
                setM: function() {
                    this.message = "啦啦啦"
                }
            }
        })
    </script>
</body>

小结

是在b站看的黑马程序员的快速入门Vue.js视频的1-18课学习的，学习了最简单的操作，简单了解了什么是vue，什么是框架，知道了vue的挂载点，数据和方法的设置，还远远不够。

Ludwig1597

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue.js最最最基础入门的笔记整理

2021.1.23文章目录Vue.js学习笔记（一）准备工作学前须知开发工具课程安排Vue基础Vue简介第一个Vue程序el:挂载点data:数据对象本地应用1.内容绑定，事件绑定v-text //设置标签的文本值（textContent）v-html //设置标签的innerHTMLv-on基础 //为元素绑定事件总结2.显示切换，属性绑定v-show //根据表达式的真假，切换元素的显示和隐藏v-if //根据布尔值的真假，切换元素的显示和隐藏(操纵dom元素)v-bind //设置元素的属性(比.
复制链接

扫一扫