vue基础入门

最新推荐文章于 2024-08-25 09:57:22 发布

Xiaosw1024

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量308

点赞数 1

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_46250898/article/details/108445213

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目前公司前端在用vue框架，因此总结了一下vue的学习笔记(最好的学习方：官方文档)，感兴趣的小伙伴可以一起来学习交流下。

一、vue的介绍

1. 什么是vue.js

在学习一个新的框架时，首先应该知道它是什么，它是用来干嘛的，其次是应该如何使用它，然后可以对比下它跟相似的框架的区别或者说优势在哪。这是我认为比较好的一种学习方式，也更容易帮助我们理解。

vue.js是一个目前比较流行的前端框架，Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手(连我这个前端小白使用起来都觉得非常爽)，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)

2. 为什么要学习流行框架

vue.js能够大大的提高我们的开发效率。在之前学习的js,jquery，他们都是直接操作Dom元素的，而使用vue可以减少不必要的Dom操作
提高渲染效率
数据双向绑定的概念，我们只需要使用vue提供的指令，只关注数据的业务逻辑而不需要知道是如何渲染的

二、vue的基本使用

编辑器使用的vscode,个人感觉很好用！

首先安装vue.js

直接使用script标签引入

<script src="https://cn.vuejs.org/js/vue.js"></script>

使用npm方式下载（构建大型项目时比较方便，以后介绍）

第一个案例hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--直接引入，这里需要注意的是：在开发中引入开发版本，生产版本删除警告之类的东西-->
    <script src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        
    </div>
    <script>
        let app = new Vue({
            el: '#app', //表示创建vue的时候，vue控制的页面区域
            data: {
                message: 'hello world vue',
            } 
        })
    </script>
</body>
</html>

打开浏览器查看效果：
在这里插入图片描述
页面效果：

3. mustache语法（插值语法),就是双大括号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--直接引入，这里需要注意的是：在开发中引入开发版本，生产版本删除警告之类的东西-->
    <script src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--两种拼接方式，效果是一样的-->
        {{firstName}}+{{lastName}}
        {{firstName+lastName}}
        
    </div>
    <script>
        let app = new Vue({
            el: '#app', 
            data: {
                firstName: 'kobe',
                lastName: 'bryant'
            } 
        })
    </script>
</body>
</html>

v-once指令：使用了v-once指令，vue只会渲染数据一次，数据改变了也不会再重新渲染
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
            } 
        })
        
    </script>
</body>
</html>

效果：
在这里插入图片描述
5. v-html指令：会将数据以HTML的形式解析
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{url}}</h1>
        <h1 v-html="url"></h1>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                url: "<a href='http://www.baidu.com'>百度一下</a>"
            } 
        })
        
    </script>
    
</body>
</html>

效果：
在这里插入图片描述
6. v-cload指令：使用v-cload指定样式，在vue编译完成时，这些样式会从绑定的元素移除；有时候网络较慢，vue还来不及渲染，这是就显示出了源代码，而我们并不想浏览网页的用户看到这种效果。
代码：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        {{message}}
    </div>

    <script>
       let app = new Vue({
           el: '#app' ,
           data: {
               message: '今天天气真好'
           }
       })
    
    </script>
</body>
</html>

v-bind指令：v-bind可以动态绑定不同的属性
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--v-bind指令可以动态绑定不同属性-->
        <img v-bind:src="imageUrl">

        <a v-bind:href="link">百度一下</a>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                imageUrl: 'https://cn.vuejs.org/images/logo.png' ,
                link: 'http://www.baidu.com'
            } 
        })
        
    </script>
</body>
</html>

效果：
在这里插入图片描述
这里注意，对象语法和数组语法（数组语法使用较少）：

<!--对象语法: 含义就是class后面跟一个对象
        <div v-bind:class='{类名1:boolean,类名2:boolean}'>{{message}}</div>
        只有当boolean的值为true时,对应的类才会加到标签中
    -->

基本使用就这些，接下来继续学习vue的高级使用。

Xiaosw1024

关注

1
点赞
踩
1

收藏

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

目前公司前端在用vue框架，因此总结了一下vue的学习笔记(最好的学习方：官方文档)，感兴趣的小伙伴可以一起来学习交流下。一、vue的介绍1. 什么是vue.js在学习一个新的框架时，首先应该知道它是什么，它是用来干嘛的，其次是应该如何使用它，然后可以对比下它跟相似的框架的区别或者说优势在哪。这是我认为比较好的一种学习方式，也更容易帮助我们理解。vue.js是一个目前比较流行的前端框架，Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手(连我这个前端小白使用起来都觉得非常爽)，还
复制链接

扫一扫

专栏目录