AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue基础学习笔记（上）

2023-10-11 50
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
云解析 DNS，旗舰版 1个月
全局流量管理 GTM，标准版 1个月
简介： Vue基础学习笔记

🚙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>
</head>
<body>
<div id="app">
    {{message}}
    {{name}}
</div>
<script src="../js/vue.js"></script>
<script>
    // let(变量)/const（常量）
    //声明式编程
    const app = new Vue({
        el:"#app", //用于挂载要管理的元素
        data:{ //定义数据
            message:    "你好啊，李银河！",
            name:   "codewhy"
        }
    })
    //原始js的做法（命令式编程）
    // 1. 创建div元素，设置id属性
    // 2.定义一个变量message
    // 3.将message变量放在前面的div元素中显示
    // 4.修改message的数据：今天天气不错
    // 5.将修改后的数据再次替换到div
</script>
</body>
</html>

二、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>
</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>

三、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>
</head>
<body>
<div id="app">
    <h2>当前计数：{{counter}}</h2>
    <!-- 1.简单的可以这样写 -->
    <!-- <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button> -->
    <!-- 2.复杂的监听这样写 -->
    <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(){
                this.counter++;
                console.log("add被执行");
            },
            sub:function(){
                this.counter--;
                console.log("sub被执行");
            }
        }
    })
    //以前：
    //1.拿button
    //2.添加监听
</script>
</body>
</html>

  • 语法糖：v-on:click === @click

四、Vue的MVVM

五、options选项

注：开发中什么时候称之为方法，什么时候称之为 函数？

  • 方法—定义在类中；函数—定义在外面

六、Vue的生命周期🛴

  • 注：在生命周期中，我们可以自己根据的需要求，编写回调函数。

七、vue的template

前端代码规范：缩进两个空格

打开：文件—首选项—用户片段—新建

{
  // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  //  "scope": "javascript,typescript",
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }
  "vue": {
        "prefix": "vue",
        "body": [
            "<!DOCTYPE html>",
            "<html lang='en'>",
            "<head>",
            " <meta charset='UTF-8'>",
            " <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:    '你好啊，李银河！',",
      "     name:   'codewhy'",
      "   }",
      " })",
      "</script>",
      "</body>",
      "</html>",
        ],
        "description": "vue实例对象"
    }
}

使用：直接输入prefix的值，回车即可。

八、Mustache插值语法

注：大括号插值法{{message}}

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <!-- mustache语法，不仅仅可以直接写变量，也可以写简单的表达式 -->
    {{firstname + " "+ lastname}}
    {{counter * 2}}
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            firstname:   'codewhy',
            lastname:   'byy',
            counter:    100
        }
    })
</script>
</body>
</html>

九、v-once

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <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:    '你好啊，李银河！',
            name:   'codewhy'
        }
    })
</script>
</body>
</html>
<

注：只在第一次渲染，后面不会渲染。

十、v-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>
</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:    '你好啊，李银河！',
            url:   '<a href="www.baidu.com">百度一下</a>'
        }
    })
</script>
</body>
</html>

注：解析标签

十一、v-text

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <h2 v-text="message"></h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        }
    })
</script>
</body>
</html>

注：不推荐，不灵活，不如Mustache

十二、v-pre

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <h2 v-pre>{{message}}</h2>
    <h2>{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy'
        }
    })
</script>
</body>
</html>

注：原封不动的显示，不解析数据

十三、v-cloak

<!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>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id='app' v-cloak>
    {{message}}
</div>
<script src='../js/vue.js'></script>
<script>
    //在vue解析之前，div中有一个属性v-cloak
    //在vue解析之后，div中没有一个属性v-cloak
    setTimeout(function(){
        const app = new Vue({
            el:'#app', //用于挂载要管理的元素
            data:{ //定义数据
                message:    '你好啊，李银河！',
                name:   'codewhy'
            }
        })
    },1000)
</script>
</body>
</html>

注：因为html从头到尾渲染，为了避免某些数据来不及渲染，我们可以通过v-cloak来设置style属性，没有渲染成功之前，显示为空，而不是直接是{{message}}。

十四、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>
</head>
<body>
<div id='app'>
    <!-- 这里是错误的，不可以使用mustache语法 -->
    <!-- <img src="{{imgurl}}" alt=""> -->
    <!-- 正确做法 -->
    <img v-bind:src="imgurl" alt="">
    <a v-bind:href="aHref" >百度一下</a>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            imgurl: "https://pic4.zhimg.com/v2-589b604591675be07573676ddcab2ff4_720w.jpg?source=d6434cab",
            aHref: 'https://www.baidu.com'
        }
    })
</script>
</body>
</html>
  • 语法糖：直接写:

十五、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{
            color:red;
        }
    </style>
</head>
<body>
<div id='app'>
    <!-- 字符串没有意义 -->
    <!-- <h2  class="active">{{message}}</h2>
    <h2  :class="active">{{message}}</h2> -->
    <!-- 对象绑定，有意义 -->
    <!-- <h2  :class="{类名1:boolean,类名2:boolean}">{{message}}</h2>  -->
    <h2  class="title" :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:    '你好啊，李银河！',
            isActive:   true,
            isLine: true,
        },
        methods:{
            btnClick:function(){
                this.isActive = !this.isActive
            }
        }
    })
</script>
</body>
</html>

简化：当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{
            color:red;
        }
    </style>
</head>
<body>
<div id='app'>
    <!-- 字符串没有意义 -->
    <!-- <h2  class="active">{{message}}</h2>
    <h2  :class="active">{{message}}</h2> -->
    <!-- 对象绑定，有意义 -->
    <!-- <h2  :class="{类名1:boolean,类名2:boolean}">{{message}}</h2>  -->
    <h2  class="title" :class="getClasses()">{{message}}</h2> 
    <button v-on:click="btnClick">按钮</button>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            isActive:   true,
            isLine: true,
        },
        methods:{
            btnClick:function(){
                this.isActive = !this.isActive
            },
            getClasses:function(){
              return {active:this.isActive,line:this.isLine}
            }
        }
    })
</script>
</body>
</html>

十六、v-bind动态绑定class属性（数组语法）🚜

意义不大，原始的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{
            color:red;
        }
    </style>
</head>
<body>
<div id='app'>
    <ul>
        <li :class="{active:isActive==index}" v-on:click="colorChoose(index)"   v-for="(item,index) in movies">
            {{index}}--------- {{item}}
        </li>
    </ul>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            movies:   ['夏洛特烦恼','大话西游','桃姐','人世间'],
            isActive:   0
        },
        methods:{
            colorChoose:function(index){
                this.isActive = index;
            }
        }
    })
</script>
</body>
</html>

十八.v-bind（style对象属性）

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <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> -->
    <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            finalSize: '50px',
            finalColor: 'red'
        }
    })
</script>
</body>
</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>
</head>
<body>
<div id='app'>
    <!-- <h2 :style="{key（属性值）:value(属性值)}">{{message}}</h2> -->
    <h2 :style="getStyles()">{{message}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素
        data:{ //定义数据
            message:    '你好啊，李银河！',
            name:   'codewhy',
            finalSize: '50px',
            finalColor: 'red'
        },
        methods:{
          getStyles:function(){
            return {fontSize:this.finalSize,color:this.finalColor};
          }
        }
    })
</script>
</body>
</html>

十九.v-bind（style数组属性）

了解即可

二十.计算属性

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>
<body>
<div id='app'>
    <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:{ //定义数据
            message:    '你好啊，李银河！',
            firstname:   'a',
            lastname:   'b',
        },
        methods:{
            getFullName(){
                return this.firstname + this.lastname;
            }
        },
        //计算属性
        computed: {
            fullName:function(){
                return this.firstname + this.lastname;
            }
        }
    })
</script>
</body>
</html>


文章标签：
云解析DNS
JavaScript
前端开发
关键词：
vue学习笔记VUE.js
学习笔记VUE.js
VUE.js学习笔记
宋wz
目录
相关文章
我是快乐的嘟嘟
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
57 26
html的七十二变
|
4天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
19 8
html的七十二变
|
4天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
17 7
html的七十二变
|
4天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
16 5
游客ady5kpv352g3u
|
3天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
10 3
html的七十二变
|
5天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
17 5
游客ady5kpv352g3u
|
3天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
12 2
html的七十二变
|
5天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
14 4
游客zi3qmblbcdexu
|
10天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
30 6
游客zi3qmblbcdexu
|
10天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
游客zi3qmblbcdexu
32 5

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    Vue 3和Element组件库的分页功能实现
  • 3
    Vue $watch监听对象属性，数组内对象属性改变
  • 4
    一文梳理Vue3核心原理
  • 5
    Vue打包后页面出现空白解决办法（臻享版）
  • 6
    【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！
  • 7
    自制简单的range（Vue）
  • 8
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 9
    vite原理之解析.vue文件
  • 10
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 1
    vue代码优化方案
    54
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 3
    在Vue中，子组件向父组件传递数据
    73
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    96
  • 5
    【vue3】vue3中路由hash与History的设置
    210
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1112
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    472
  • 8
    【vue】 vue2 监听滚动条滚动事件
    143
  • 9
    【天地图】vue 天地图 T is not defined
    173
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    608

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云OSS设置跨域访问