Vue学习

最新推荐文章于 2024-06-14 10:39:01 发布
最新推荐文章于 2024-06-14 10:39:01 发布
阅读量153 收藏
点赞数
分类专栏： 前端框架 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xieixnxia/article/details/120283861
版权

目录

一、Vue基础

Vue简介

Vue.js

Vue使用

案例：计数器 

Vue中的MVVM

Vue的options选项

Vue的周期函数

二、Vue基本语法

插值操作-其他指令使用

 绑定属性

v-bind绑定style

计算属性

一、Vue基础

Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

  1. Javascript框架
  2. 简化Dom操作
  3. 响应式数据驱动

Vue.js

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="../js/vue.js"></script>
    <script>
       const app =  new Vue({
           el: '#app',//用于挂载要管理的元素
           data: {//定义数据
                message: '你好啊，白鹿为霜！'

           }

        })
    </script>
</body>
</html>

Vue响应式

 修改数据后页面自动刷新

数据列表显示

v-for用于遍历

<!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">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
        
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
       const app =  new Vue({
           el: '#app',
           data: {
                message: '你好啊，白鹿为霜！',
                movies: ['七月与安生','肖申克的救赎','大话西游','盗梦空间']
           }

        })
    </script>
</body>
</html>

案例：计数器 

<!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">
        <h2>当前计数: {{counter}}</h2>
        <!--
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>
        -->
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0
            },
            methods: {
                add: function(){
                    console.log('add执行');
                    this.counter++;
                },
                sub: function(){
                    console.log('sub执行');
                    this.counter--;
                }
            }
           
        })
    </script>
</body>
</html>

Vue中的MVVM

Model-View-ViewModel

View层：

  • 视图层
  • 在我们前端开发中，通常就是DOM层
  • 主要作用是给用户展示各种信息

Model层：

  • 数据层
  • 数据可能是固定的死数据，更多的是来自服务器，从网络上请求下来的数据

VueModel层：

  • 视图模型层 
  • 视图模型层是Data Binding，也就是数据绑定，将Model的改变实时反映到View中
  • 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生了一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data

Vue的options选项

 API — Vue.js

 目前掌握这些选项：

  • el：

类型：string|HTMLElement

作用：决定Vue实例管理那个DOM

  • data:

类型：Object|Function（组件当中的data必须是函数）

作用：Vue实例对应的数据对象

  • methods:

类型：{[key:string]:Function}

作用：定义Vue的一些方法，可以在其他地方调用，也可以在指令中使用

Vue的周期函数

Vue 实例 — Vue.js

二、Vue基本语法

插值操作-其他指令使用

mustache语法

<!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">
        <h2>{{message}}</h2>
        <h2>{{message}},白鹿为霜</h2>
        <!--mustache语法中，不仅可以直接写变量，也可写简单的表达式-->
        <h2>{{firstname + lastname}}</h2>
        <h2>{{firstname + ' ' + lastname}}</h2>
        <h2>{{firstname}} {{lastname}}</h2>
        <h2>{{counter}}</h2>
        <h2>{{counter * 2}}</h2>

    </div>


    <script src='../js/vue.js'>
    </script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                firstname: 'xie',
                lastname: 'xinxia',
                counter: 100
            }
        })
    </script>



</body>

</html>

v-once

该指令表示元素和组件只渲染一次，不会随数据改变而改变

<!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">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',}
        })
    </script>
</body>
</html>

v-html

以html的格式解析

<!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">
        <h2>{{url}}</h2>
        <h2 v-html="url"></h2>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                url: '<a href="http://www.baidu.com">百度一下</a>'
            }
        })
    </script>
</body>
</html>

v-text 

类似于mustache

<!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">
        <h2>{{message}},xxx</h2>
        <!--会被后面内容覆盖，更倾向使用mustache-->
        <h2 v-text="message">,xxx</h2>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                url: '<a href="http://www.baidu.com">百度一下</a>'
            }
        })
    </script>
</body>
</html>

v-pre 

不做解析显示内容

<!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">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
            }
        })
    </script>
</body>
</html>

v-cloak

cloak：斗篷 

<!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>
    <!--在vue解析之前，div中有一个属性v-cloak  解析之后，没有-->
    <div id="app" v-cloak>
        <h2>{{message}}</h2>
        <h2>{{message}}</h2>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
            }
        })
    </script>
</body>
</html>

 绑定属性

v-bind 动态绑定属性

<!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">
        <img v-bind:src="imgURL" alt="mm">
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                imgURL: 'https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E5%A3%81%E7%BA%B8&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=undefined&latest=undefined&copyright=undefined&cs=4076493291,331486562&os=2930963262,531608254&simid=3400838867,377633000&pn=0&rn=1&di=78870&ln=2078&fr=&fmq=1526269427171_R&fm=&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fuploads.5068.com%252Fallimg%252F1712%252F144-1G209191R5.jpg%26refer%3Dhttp%253A%252F%252Fuploads.5068.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1636096525%26t%3Dc22525defd81066e0a4d1e28ddde5056&rpstart=0&rpnum=0&adpicid=0&nojc=undefined'
            }
        })
    </script>
</body>
</html>

v-bind语法糖

<img :src="imgURL" alt="mm">

动态绑定class

<!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>
    <style>
        .active{
            color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 :class="active">{{message}}</h2>
        <!--<h2 v-bind:class="{类名1: true,类名2: boolean}">{{message}}</h2>>-->
        <!--修改布尔值判断类是否加进去-->
        <h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
        <button v-on:click="btnClick">按钮</button>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                isActive: 'true',
                isLine: 'true'
            },
            methods: {
                btnClick: function() {
                    this.isActive = !this.isActive
                }
            }
        })
    </script>
</body>
</html>

v-bind绑定style

利用v-bind动态绑定css样式

  • 对象语法
  • 数组语法

对象语法

<!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">
       <!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>--> 
       <!--属性值加单引号，vue会作为变量解析-->
       <h2 :style="{fontSize: '50px' }">{{message}}</h2>
       <!--动态绑定-->
       <h2 :style="{fontSize: finalSize + 'px' ,color: finalColor}">{{message}}</h2>
       <h2 :style="getStyle()">{{message}}</h2>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                finalSize: 100 ,
                finalColor: 'pink'   
            },
            methods: {
                getStyle: function() {
                    return {fontSise: this.finalSize + 'px' ,backgroundColor: this.finalColor}
                }

            }
        })
    </script>
</body>
</html>

数组语法

<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
data:{
                message:'hello',
                baseStyle: {backgroundColor: 'yellow'},
                baseStyle1: {fontSize: '100px'}  
            },

计算属性

<!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">
        <h2>{{firstName + ' ' + lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{getFullName()}}</h2>
        <!--计算属性不需要加括号-->
        <h2>{{fullName}}</h2>
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                firstName: 'Lebron',
                lastName: 'James'
                
            },
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName
                }

            },
            methods: {
                getFullName() {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>
</html>
<!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">
        <h2>总价格: {{totalPrice}}</h2>
        
    </div>
    <script src='../js/vue.js'>
    </script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                books: [
                    {id: 110, name: 'Unix编程技术 ', price: 119},
                    {id: 111, name: '代码大全 ', price: 109},
                    {id: 112, name: '深入理解计算机原理 ', price: 98},
                    {id: 113, name: '现代操作系统 ', price: 122}
                    

                ]
                
            },
            computed: {
                totalPrice: function () {
                    let result = 0;
                    for (let i=0; i<this.books.length; i++){
                        result += this.books[i].price
                    }
                    return result

                }
            }
            
        })
    </script>
</body>
</html>

xiexinxia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue学习心得
weixin_49331914的博客
07-08 4299
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点; mvvm ●Model:模型层，在这里表示JavaScript对象 ●View:视图层,在这里表示DOM (HTML操作的元素) ●ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者 在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通
vue 学习
freeking101的博客
07-17 8167
​Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。................................................
Vue学习总结
魅控
08-07 5844
Vue 基础 指令： 插值表达式： 语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成 Model中的数据 bug点： 当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示 出来，加载完毕之后又会被替换成真实结果，造成闪烁（Vue的加载代码写在 HTML元素之后时会出现该bug） 1.v-cloak指令： 语法：把它当作HTML元素的一个属性使用 示例： {...
十天学完Vue学习总结
H215919719的博客
11-14 9169
内容比较概念，了解，看过即可。当然不是只有看看和跟着敲这么简单，要做1~2个项目加以理解我做的第一个项目是：音乐网站（不需要后台技术，发送请求就可以获得数据）适合新手小白练手第二个项目是一个点餐系统：前后端进行交互，适合想往全栈发展的小白去做最后祝大家学好吃好喝好！我的vue学习专辑就结束啦！
Vue 学习
HammerTien的博客
02-11 1616
Vue TodoList 项目 Vue初识之 TodoList Part1 Vue初识之 TodoList Part2 Vue初识之 TodoList Part3
Vue学习笔记
客官不爱喝酒的博客
04-15 2402
Vue学习笔记1.vue基础入门1.1 vue基础概念1.2安装vue.js1.3 MVVM理解1.4 vue初体验2.Vue基础语法2.1 options参数2.2 Vue生命周期2.3 mustache语法2.4 v-once2.5 v-html2.6 v-text2.7 v-pre2.8 v-cloak2.9 v-bind2.10 v-bind绑定style2.11 计算属性 computed2.12 v-on 事件监听2.13 v-if2.14 v-show2.15 v-for2.16v-model
vue学习心得
kiku
12-23 3925
vue学习心得 前言 使用vue框架有一段时间了，这里总结一下心得，主要为新人提供学习vue一些经验方法和项目中一些解决思路。 文中谨代表个人观点，如有错误，欢迎指正。 环境搭建 假设你已经通读vue官方文档（文档都没读一遍（至少），那不建议动手撸码），在大致了解vue是什么东西，有什么用，核心概念之后我们就可以开始着手学习vue。首先搭建环境。 学习vue，我的建议是通过官手脚手架起步。...
vue初学——vue学习路线
copple的专栏
03-05 3499
上个周末写了2篇文章都是关于vue的学习，然后在写第三篇的时候，看了一个视频——里面提到学习方法。作为一个程序员，对新技术的学习需要有一个自己的套路，即学习方法。掌握一套好的学习方法，后面不管学习什么新技术、新知识都能快速的上手吸收。所以，我停止了写第三篇文章的步伐，开始停下来思考如何构建自己的学习体系？ ...
Vue学习心得（1）
a253399414的博客
10-09 1766
** Vue 的安装方式 ** 下载使用（两种方式） 1.直接下载并用script标签引入，Vue 会被注册为一个全局变量，平时对于 Dom 操作比较频繁的小项目可以直接这样使用。 2.Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：针对单页应用的构建推荐使用这种方式，可以更好的体验到 vue 所提供的组件化功能 （单文件组件），顺带着享受到 webpa
vue学习
02-18
vue学习
vue学习资源
07-29
vue 比较好的教学资源，供参考
Vue学习手册
02-26
前端超热门的框架Vue，学习笔记，具体内容来自Vue官方文档
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 390
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 573
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
关于element-plus中el-select自定义标签及样式的问题
最新发布
x_XDGS的博客
06-14 280
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 208
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值