0基础VUE入门

小赵呢

已于 2022-03-01 14:54:22 修改

阅读量866

点赞数

文章标签： vue.js javascript 前端

于 2022-03-01 14:50:05 首次发布

本文链接：https://blog.csdn.net/weixin_53227758/article/details/123205953

版权

0基础VUE入门

1、介绍

1.1 Vue.js 是什么

在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。

Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

官方网站：https://cn.vuejs.org

1.2初识Vue.js

创建文件夹vue_pro

创建文件夹vuejs，将vue.min.js引入文件夹

创建 hello.html

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

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

<body>
    <div id="app">

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

2、基本语法

2.1 基本数据渲染和指令

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写冒号（:）

<body>
    <div id="app">
        <div  v-bind:style="msg">
            单向绑定
        </div>

        <div  :style="msg">
            简写单向绑定
        </div>

        
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'color:red;'
            }
        })
    </script>
</body>

2.2双向数据绑定

什么是双向数据绑定？

当数据发生变化的时候，视图也会跟着发生变化

数据模型发生了改变，会直接显示在页面上

当视图发生变化的时候，数据也会跟着同步变化

用户在页面上的修改，会自动同步到数据模型中去

<body>
    <div id="app">
        {{keyword}}
        <input type="text" :value="keyword"/>
        <!-- 双向绑定只要一方变化,别的值也跟着绑定 -->
        <input type="text" v-model="keyword"/>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword:'尚硅谷'
            }
        })
    </script>
</body>

2.3事件

使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<body>
    <div id="app">
        <button v-on:click="show"></button>
        <button @click="a"></button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword:'尚硅谷'
            },
            methods:{
                show(){
                    alert("show....")
                },
                a(){
                    console.log("log")
                }
            }
        })
    </script>
</body>

2.4条件渲染

<body>
    <div id="app">
        <input v-model="ok" type="checkbox"/>
        <br>
        <div v-if="ok">选中了</div>
        <div v-else>没有选中了</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: true
            }
        })
    </script>
</body>

2.5列表渲染

<body>
    <div id="app">
        <div v-for="user in userList">
            {{user.name}} -- {{user.age}}
        </div>

        <div v-for="(user,index) in userList">
            {{index}} -- {{user.name}} -- {{user.age}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[
                    {"name":"lanlan","age":20},
                    {"name":"bingbing","age":21}
                ]
            }
        })
    </script>
</body>

2.6实例生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wPYR8ZPh-1646117390084)(file:///C:/Users/86157/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg)]

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'hello'
            },
            created(){//在页面渲染之前执行
                debugger
                console.log('created...')
            },
            mounted(){//在页面渲染之后执行
                debugger
                console.log("monted...")
            }

        })
    </script>
</body>

二、axios（重要）

1、axios的作用

axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求

2、axios实例

2.1复制js资源

vue.min.js

axios.min.js

2.2创建 axios.html

<div id="app">
    <table>
        <tr v-for="user in userList">
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <br/>
        </tr>
    </table>
</div>

2.3引入js

    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>

2.4编写js

<body>
    <div id="app">
        <table>
            <tr v-for="user in userList">
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <br/>
            </tr>
        </table>
    </div>

    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                userList: []
            },
            created() {//在页面渲染之前执行
                //调用方法
                this.getList()
            },
            //定义事件
            methods: {
                getList() {
                    //使用axios方式ajax请求
                    //请求的接口路径
                    axios.get("user.json")
                        .then(Response => {
                            // console.log(Response)
                            this.userList = Response.data.data.items
                            // console.log(this.userList)
                        })//请求成功
                        .catch(error => {
                            console.log(error)
                        })//请求失败
                }
            }
        })
    </script>
</body>

三、element-ui

1、element-ui

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建

官网：一个 Vue 3 UI 框架 | Element Plus (gitee.io)

小赵呢

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
0基础VUE入门

0基础VUE入门1、介绍1.1 Vue.js 是什么在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函
复制链接

扫一扫