Vue 前端开发

已于 2023-03-14 14:18:01 修改
阅读量3.6k 收藏 24
点赞数 1
文章标签： vue.js javascript 前端 Powered by 金山文档
于 2023-03-14 14:00:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41299062/article/details/129485426
版权

Vue介绍

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任

官网：https://v3.cn.vuejs.org/

Vue 优点

响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作

可组合的视图组件：把视图按照功能切分成若干基本单元，可维护、可重用、可测试等

使用Vue的四种方式：

  1. 在HTML中以CDN包形式导入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2 下载js文件保存至本地再导入

<script src="/存储路径/vue.global.js"></script>

3使用npm安装 4使用官方VueCli脚手架构建项目（不建议新手直接用）

使用参考文档https://cn.vuejs.org/guide/quick-start.html

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        {{ message }} <!--引用变量-->
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    message: "hello Vue"  //变量名和对应值
                }
            }
        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

声明式渲染

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        {{ counter }} <!--引用变量-->
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    counter: 0  //变量名和对应值
                }
            },
            // 打开页面执行的函数
            mounted() {
                setInterval(()=> { //周期性执行递加
                    this.counter++
                },1000)
            }
        };
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层组件实例的数据。所有VUE,js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

数据绑定的常见形式就是使用"双大括号"语法在HTML中插入文本：

<span>Message:{{msg}}</span>

{{msg}}将被替代对应组件实例中msg属性的值。无论何时，绑定的组件实例上msg属性发生改变，插值处内容都会更新

常用指令

指令是指V-前缀的特殊属性，它的作用是当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM

v-text

v-text的效果与{{}}的效果一样，将数据填充到标签中，但是没有闪烁问题！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <p v-text="msg"></p>
        <p>{{ msg }}</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "Hello Vue"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

v-html

在某些情况下，从服务端请求的数据本身就是一个HTML代码，如果使用{{}}会将将数据解析为普通文本而非HTML代码，为输出真正的HTML，就需要使用v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        {{ msg }}<br>
        <span v-html="msg"></span>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "<span style='color: red'>Hello Vue!</span>"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
v-bind

用于动态绑定一个或者多个属性值，或者向另一个组件传递props值

应用场景：图片地址src、超链接herf、动态绑定一些类、样式等

v-bind 指令接受一个参数，以冒号分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <a v-bind:href="url">百度</a>

    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    url: "https://www.baidu.com"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
v-bind: 绑定Class

操作元素标签的class和style属性是数据绑定的一个常见需求

例如希望动态切换class，为div显示不同背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
    <style>
        .test {
            width: 200px;
            height: 200px;
            background: grey;
        }
        .active {
            background: orange;
        }
    </style>
</head>
<body>
    <div id="hello-vue">
        <div v-bind:class="{active: isActive}" class="test"> <!--active这个class存在与否取决于数据属性isActive-->
        </div>
        <button type="button" @click="btn">增加样式</button>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    isActive: false  //变量名和对应值
                }
            },
            methods: {
                btn() {
                    // this.isActive = True;
                    // 实现动态切换
                    if (this.isActive) {
                        this.isActive = false
                    } else {
                        this.isActive = true
                    }
                    
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
v-bind 绑定style

v-bind:style语法非常像css,但其实是一个JavaScript对象。css属性名可以用驼峰式或短横线分隔（kebab-case,记得用引号括起来）命名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
    <style>
        .test {
            width: 200px;
            height: 200px;
            background: grey;
        }
    </style>
</head>
<body>
    <div id="hello-vue">
        <div v-bind:style="styleObject" class="test">
            Hello Vue!
        </div>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    styleObject: {
                        background: 'orange',  //变量名和对应值
                        fontSize: '24'
                    }
                }
            }
        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
v-on

在前端开发中，经常监听用户发生的事件，例如点击、拖拽、键盘事件等，这个时候就需要使用v-on

v-on: 冒号后面是even参数，例如click、change

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <p>点击次数: {{ counter }}</p>
        <button type="button" v-on:click="counter++">按钮</button>

    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    counter: 0  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

指令缩写

Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写 

 <!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

v-on缩写 

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

常用指令之流程控制

v-if

判断一个元素是否显示

通过seen值的真假来插入/移除元素。

<div id="hello-vue">
        <p v-if="seen">现在你能看到我</p>
        <p v-else>看不到</p>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     seen: true
                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

多分支

 <div id="hello-vue">
        <div v-if="type === 1">
            方式1
        </div>
        <div v-if="type === 2">
            方式2
        </div>
        <div v-else="type === 3">
            方式3
        </div>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     type: 2
                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');
    </script>
v-show

与v-if不同的式，v-show的元素始终会被渲染并保留在DOM中，所以v-show只是简单的切换元素display CSS属性

<div id="hello-vue">
        <p v-if="seen">现在你能看到我</p>
        <p v-else>看不到</p>
        <p v-show="seen">看不到了</p>

    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     seen: false,

                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>

v-for

基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法，

其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名 

// 循环数组
 <div id="hello-vue">
        <ul>
            <li v-for="(c,j) in myArray">
                {{ i }}-{{ c }}
            </li>
        </ul>

    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     myArray: [
                         '主机',
                         '键盘',
                         '鼠标'
                     ]

                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

v-for维护状态：

当Vue正在更新使用v-for渲染的元素列表时，它默认使用"就地更新"的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并确保他们只在每个索引正确渲染。

为了给Vue一个提示，以便他能跟踪每个节点的身份，从而重用和重新排序现有的元素，你需要为每项提供一个唯一的key属性

<div id="hello-vue">
        <ul>
            <li v-for="(v,k) in myArray" :key="k">
                {{ k }}-{{ v }}
            </li>
        </ul>
    </div>
    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     myArray: {
                         host: '主机',
                         displayer: '键盘',
                         keyboard: '鼠标'
                     }
                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>

v-for 选择列表

获取用户选择并赋值另一个变量再实时展示：

 <div id="hello-vue">
        <select @change="selectComputer($event)">
            <option value="None">未选择</option>
            <option v-for="row in computer" :key="row.id" :value="row.id">
                {{ row.name }}
            </option>
        </select>
        <p>当前选择主机ID: {{ selectComputerId }}</p>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     computer: [
                         {id:1 , name: '联想'},
                         {id:2 , name: '惠普'},
                         {id:3 , name: '华为'}
                     ],
                    selectComputerId: ""
                 }
             },
             methods: {
                 selectComputer(event){
                     console.log(event) //获取该事件的事件对象
                     this.selectComputerId = event.target.value; //获取事件的值
                     if (this.selectComputerId == "None") {
                         this.selectComputerId = "未选择！"
                     }
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>

v-model

双向数据绑定：当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会同步变化

v-model提供表单输入绑定，可以在<input>、<textarea>及<select>元素创建双向数据绑定

v-model指令其实是一个语法糖，背后本质上包含v-bind和v-on两个操作 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>

    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "Hello Vue!"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>
单选
<div id="hello-vue">
        <input type="radio" name="go"  value="go" v-model="msg">go<br>
        <input type="radio" name="python" value="python" v-model="msg">python
        <p>选择: {{msg}}</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "" //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>
select多选框
<div id="hello-vue">
        <select v-model="selected">
            <option value="" disabled>请选择</option>
            <option value="Go" >GO</option>
            <option value="Pytho" >Python</option>
            <option value="Php" >Php</option>
        </select>
        <p>选择: {{selected}}</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    selected: "" //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>
登录示例

获取用户输入用户名和密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <h1>欢迎登陆管理后台</h1>
        <from action="#">
            用户名: <input type="text" v-model="form.username"><br>
            密码: <input type="text" v-model="form.password"><br>
            <button @click="login">登录</button>
        </from>
        <p style="color: red" v-if="notice">用户名或者密码不能为空</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    form: {
                        username: '',
                        password: ''
                    },
                    notice: false
                }
            },
            methods: {
                login() {
                    if (this.form.username == '' || this.form.password == '') {
                        this.notice = true;
                    } else {
                        this.notice = false;
                        console.log(this.form) //获取输入用户名和密码提交服务端

                    }
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

常用指令总结

Vue 常用属性

数据属性

组件data选项是一个函数。Vue会在创建新组件实例的过程中调用此函数，它应该返回一个对象，然后Vue会通过响应系统将其包裹起来，并以$data的形式存储起来在组件实例中。为了方便起见，该对象的任何顶级属性，也会直接通过组件实例暴露

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        {{msg}}
    </div>

    <script>
         const HelloVue = {
            // 定义数据区域
             data() {
                 return {
                     msg: 'Hello Vue!'
                 }
             },
             // 定义函数（方法）区域
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

         console.log(vm.$data.msg)
         console.log(vm.msg)

         vm.msg = 'hello python!'
         console.log(vm.msg)
    </script>
</body>
</html>
方法

在methods选项中定义的方法与data选项中的数据一样，可以在组件的模板中使用。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        {{msg}}
        <p>{{count}}</p>
        <button @click="jia" type="button">递增</button>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     msg: 'Hello Vue!',
                     count: 1
                 }
             },
             // 定义函数（方法）区域
             methods: {
                 jia(){
                     this.count++
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

         console.log(vm.$data.msg)
         console.log(vm.msg)

         vm.msg = 'hello python!'
         console.log(vm.msg)
    </script>
</body>
</html>
计算属性

根据所依赖的数据动态显示新的计算结果。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        <p>总分: {{sum}}</p> <!--双大括号js基本支持表达式-->
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     math: 60,
                     english: 70

                 }
             },
             // 定义计算属性（缓存）
             computed: {
                 sum: function() {
                     return this.math + this.english
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>
</body>
</html>
监听属性

是一个观察动作，监听data数 据变化后触发对应函数，函数有newValue（变化之后 结果）和oldValue（变化之前结果）两个参数。 当需要在数据变化时执行异步或开销较大的操作时， 这个方式是最有用的。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        <p>{{count}}</p>
        <button @click="jia" type="button">递增</button>
        <p>监听新值: {{newValue}}, 旧值: {{oldValue}}</p>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     count: 0,
                     newValue: '',
                     oldValue: '',

                 }
             },
             // 定义函数（方法）区域
             methods: {
                 jia(){
                     this.count++
                 }
             },
             // 定义监听属性（数据发生变化）
             watch: {
                 // 函数名称要与数据属性名称保持一致
                 count(newValue,oldValue){
                     console.log(newValue,oldValue)
                     this.newValue = newValue
                     this.oldValue = oldValue
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>
</body>
</html>

实例生命周期钩子

生命周期是指Vue实例从创建到销毁的过程。就是Vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、卸载等一系列过程，在vue生命周期中提供了一系列的生命周期如下图

Vue Cli脚手架

Vue Cli是什么？

是一个基于Vue.js进行快速开发的完整系统提供：

1 通过@vue/cli实现的交互式的项目脚手架。

2 通过@vue/cli + @vue/cli-service-global实现的零配置原型开发。

3 一个运行时依赖(@vue/cli-service)，该依赖：

可升级；

基于webpack构建，并带有合理的默认配置；

可以通过项目内的配置文件进行配置；

可以通过插件进行扩展。

4 一个丰富的官方插件集合，集成了前端生态中最好的工具。

5 一套完全图形化的创建和管理vue.js项目中的用户界面

为什么要使用Vue脚手架？

如果使用Vue开发整个前端项目，自建Vue项目结构及配置比较复杂，例如各种js文件引入、打包上线等，因此为了提高开发效率，官方开发了VueCli脚手架快捷搭建开发环境。

了解NPM

Npm(Node Package Manager)，存放javaScript代码共享中心，是目前最大的JavaScript仓库。类似linux yum仓库。

使用Npm

安装Node.js，默认内置npm,下载地址http://nodejs.cn/download/

下载后配置淘宝npm国内仓库：

npm config set registry https://registry.npm.taobao.org --global npm config get registry

常用命令列表

脚手架使用

使用步骤：

1 安装： npm install -g @vue/cli

2 检查版本： vue -V

3 创建项目： vue create 项目名

4 运行项目，访问

项目目录介绍

Vue组件

介绍

Vue组件是一段独立的，能代表页面某一个部分的代码片段，拥有自己的独立数据、JavaScript脚本、以及CSS样式。

组件时可复用的Vue实例，在开发过程中可以经常把重复的功能，封装为组件，达到快捷快发的目的

使用组件的优点：

1 提高开发效率

2 方便重复使用

3 易于管理维护

文件格式

Vue单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许讲Vue组件的模板，逻辑与样式封装在单个文件中。

Vue SFC是经典的HTML 、CSS与javaScript三个经典组合的自然延伸。每个*.vue文件由三种类型的顶层代码块组成：

<template>: 部分定义了组件的模板。

<script>: 部分是一个标准的JavaScript模板。它应该导出一个vue组件定义作为其默认导出。

<style>: 部分定义了与此组件关联的CSS。

<template>
    <p class="greeting">{{ greeting }}</p>
</template>

<script>
    export default {
        data() {
            return {
                greeting: "hello world"
            }
        }
    }
</script>

<style>
    .greeting {
        color: red;
        font-weight: bold;
    }
</style>
使用

使用流程：

1、在src/components目录里开发一个组件文件(首字母大写)

2、在父组件里引用子组件import xxx from xxx

3、在默认导出里注册组件

4、在template模板使用组件

注册

使用模板时，这些组件必须先注册以便Vue能够识别。注册又分为两种方式：

全局注册：声明一次，在任何Vue文件模板中使用，一般使用该组件的地方多时使用。

局部注册：在使用组件的Vue中声明和使用，一般只需要解耦代码时使用

全局注册在src/main.js文件中

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Test from './components/Test.vue' //导入组件

const app = createApp(app)
app.use(router).mount("#app");
app.component('Test',Test) //注册组件

全局注册后，在任意意.vue文件里可使用该组件

如在views/home.vue中引用

局部注册：

例如在HomeView.vue中导入一个Test组件

1 先写一个Test组件 在components/Test.vue

<template>
  <div class="test">

  </div>
</template>

<script>
export default {
  name: "Test"

}
</script>

<style scoped>
    .test {
      width: 200px;
      height: 200px;
      background: orange;
    }
</style>

2 在Homeview中导入

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
  <Test></Test> //引用组件
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Test from "@/components/Test"; //导入组件

export default {
  name: "HomeView",
  components: {
    HelloWorld,
    Test,  //注册组件
  },
};
</script>
传参

可以从组件用法中可以看出，组件间的使用关系像是一种嵌套关系，在这个关系中，经常涉及相互传数据的需求，即父组件传子组件，子组件传父组件。

父、子组件的关系可以总结为：prop向下传递，事件向上传递

父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息

父传子：在默认页面中，也用到了父传子，在父组件Home.vue中给引用 的组件传入一个静态的值，子组件通过props属性接收，并在模板中使用

子传父：

uptime year
关注
  • 1
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
等风来
08-31 2万+
正式开始学习前 确保你已学过前端三件套 HTML CSS JavaScriptVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应用程序开发中。前端框架那么多，为什么Vue.js非学不可？Vue.js的简洁语法和易用性使得它成为构建现代Web应用程序的优秀选择，无论是小型项目还是大型复杂的应用都能发挥出色的效果。Vue.js使用双向绑定的数据模型，将数据和视图进行关联。
Vue前端开发规范
qq_45494741的博客
05-21 492
Vue前端开发规范文档 目录Vue前端开发规范文档一、概述二、方针三、环境要求四、编码规范4.1 HTML / Template 编码规范4.1.1 语法4.1.2 HTML5 doctype4.1.3 语言属性4.1.4 字符编码4.1.5 引入 CSS 和 JavaScript 文件4.1.6 减少标签的数量4.1.7 属性顺序4.1.8 语义化4.2 CSS / Less 编码规范4.2.1 命名4.2.2 语法4.2.3 代码风格4.2.4 样式兼容性4.2.5 选择器权重（样式覆盖）4.2.6
2024年前端最全实战 Vue 之配置多页面应用_vue 多页面，渣本二面阿里受挫
2401_84616230的博客
05-06 696
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
vue前端一个简单的静态页面
2303_76992412的博客
05-27 2631
Vue.js是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue的设计注重灵活性和“可以被逐步集成”的特点，可以用于构建简单的静态页面到复杂的单页应用程序。Vue的核心功能包括声明式渲染和响应性，它能够自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。此外，Vue支持单文件组件，允许开发者将组件的逻辑、模板和样式封装在同一个文件中，便于管理和复用。
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
m0_67844671的博客
09-28 1万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
前端vue 教程（详细版）
it_varlue的博客
04-04 4475
vue基础知识.vue生命周期.vue动画使用.vue路由配置和懒加载.vuex的使用.vue的插件库.
Vue（前端框架）
qq_42925518的博客
07-28 1万+
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3HiAnlx-1658970670003)(\java\8.框架\VUE\vue\Vue的介绍.PNG)]H
手把手Vue前端开发教程
m0_72410588的博客
04-29 1856
在本文中，我们简要介绍了 Vue.js 的常见用法和特性，包括安装 Vue，创建第一个Vue应用程序，Vue模板语法，Vue组件化以及Vue组件通信。Vue 组件可以通过 props 向其子组件传递数据，通过在子组件中触发事件向其父组件发送数据。在开始使用 Vue.js 之前，你需要在本地安装 Node.js 和 npm 包管理器。Vue 允许将应用程序划分为多个组件，以简化开发过程，并提高代码的可维护性和可重用性。最后，打开 HTML 文件，可以看到页面中输出了 “Hello Vue!
Vue前端开发规范整理(推荐)
08-27
Vue 前端开发规范整理 Vue 前端开发规范是基于 Vue 官方风格指南整理的关于 Vue 前端开发的规范，这些规范对于提高代码质量和维护性非常重要。本文将对这些规范进行详细的解释和说明。 组件名 组件名应该始终是...
vue前端开发实战PPT
01-25
Vue前端开发实战PPT系列涵盖了从基础到高级的Vue开发技能，旨在帮助开发者提升项目实战能力。 首先，从标题和描述我们可以看出，这个系列主要关注Vue的实际应用，通过一系列的PPT教程来教授开发人员如何有效地使用...
Vue前端开发规范.pdf
10-29
Vue前端开发规范
基于vue前端开发的图书管理系统
11-03
本系统基于vue前端开发了图书管理系统，具体的页面展示请看链接https://blog.csdn.net/m0_46657126/article/details/127659095?spm=1001.2014.3001.5502
Vue前端开发手册pdf
最新发布
06-05
为了统一前端的技术栈问题，技术开发二部规定开发技术必须以vue为主. 为了更好的规范公司的前端框架，现以我前端架构师为主，编写以下开发规范，如有不当的地方，欢迎批评教育并慢慢改善该开发文档，谢谢合作。 我们...
前端之VUE开发学习
Shi_haoliu的博客
04-11 212
前端之VUE开发学习（其实就是点理论，慢慢补充）。
前端框架Vue（概述，特点，安装，helloWorld，模板语法，指令，组件）
qq_53677566的博客
12-28 1万+
这里写目录标题Vue什么是Vue.js?Vue.js优点Vue安装第一个Vue demo模板语法Vue指令Vue生命周期**Vue组件** Vue 什么是Vue.js? Vue(读音 /vjuː/，类似于 view())是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue的核心库之关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。 ​ Vue.js是前端的主流框架之一，和Angular.js，React.js,并成为前端三大主流框架 Vue.js优点
前端基础-VUE入门教程(一)
hjw15910531612的博客
07-21 3368
总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 2万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
Vue前端+快速入门【详解】
qq_1424674116的博客
03-04 2455
1.MVVM思想原始HTML+CSS+JavaScript开发存在的问题：操作麻烦，耦合性强为了实现html标签与数据的解耦，前端开发中提供了MVVM思想：即Model-View-ViewModel：Model: 数据模型，指要展示到页面上的数据。在web开发中通常从服务端获取到数据，再把这些数据展示出来View: 视图，用于展示数据的各种html标签ViewModel: 视图模型控制中心，负责把Model数据显示到View里，也负责从View里收集数据到Model里。Vue框架就承担了这个角色。
vue前端开发实战pdf
09-03
《Vue前端开发实战PDF》是一本关于Vue前端开发实践的电子书，旨在帮助读者深入了解Vue的使用，并通过实际项目案例进行实战演练。本书内容分为几个主要部分。 首先，本书介绍了Vue的基本知识和核心概念，包括Vue的生命周期、数据绑定、组件化等。这部分内容帮助读者对Vue有一个全面的了解，为后面的实战内容打下基础。 接下来，本书通过实际的项目案例，演示了如何使用Vue进行前端开发。这些实战案例包括：购物车页面的开发、用户登录验证功能的实现、数据列表的展示与搜索等。通过这些案例，读者可以学习到如何使用Vue进行组件化开发、路由管理、状态管理等常见的前端开发技巧。 另外，本书还介绍了一些Vue的高级特性和扩展库的使用，如Vue Router、Vuex、axios等。这些内容能够帮助读者进一步提升自己的技能水平，应对更复杂的前端开发任务。 总体而言，《Vue前端开发实战PDF》是一本实用性很强的电子书，适合有一定前端开发基础的读者学习。通过学习这本书，读者可以系统地掌握Vue的使用技巧，提升自己的前端开发能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值