vue快速入门

最新推荐文章于 2024-05-16 09:42:29 发布
最新推荐文章于 2024-05-16 09:42:29 发布
阅读量469 收藏
点赞数
分类专栏： vue Javaweb 文章标签： 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53616401/article/details/130624929
版权

目录

Vue

Vue基本介绍

Vue的快速入门

Vue指令

v-bind和v-model

v-on

v-if和v-show

v-if和v-show的区别

v-for

基本语法

vue练习

vue的生命周期

Vue

Vue基本介绍

Vue 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue是基于MVVM(Model-View-ViewModel)的前端开发思想

MVVM:其实是Model-View-ViewModel的缩写

  • Model: 数据模型，特指前端中通过请求从后台获取的数据

  • View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据

  • ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

Vue的快速入门

第一步

想要使用vue我们需要引入对于的vue.js文件，该文件我们可以在官方下载到

第二步

然后编写<script>标签来引入vue.js文件

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

第三步

在js代码区域定义vue对象

代码演示：

在创建vue对象时，有几个常用的属性：

  • el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值

  • data: 用来定义数据模型

  • methods: 用来定义函数。这个我们在后面就会用到

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>

第四步

在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

整体代码

注意事项：

1.{{}}是插值表达式的意思，用来将vue对象中定义的属性展示到页面上

2.data是数据模型

3.el :"#app" 表示我们的vue对象要接管id为app的这一块区域

<!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>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>

<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //创建Vue的步骤
    // 第一步：在VS Code中创建名为12. Vue-快速入门.html的文件，并且在html文件同级创建js目录，将**资料/vue.js文件**目录下得vue.js拷贝到js目录

    // 第二步：然后编写&lt;script&gt;标签来引入vue.js文件，代码如下：

    // 第三步：在js代码区域定义vue对象,代码如下：
    // 在创建vue对象时，有几个常用的属性：
    // - el:  用来指定哪儿些标签受 Vue 管理。 该属性取值 `#app` 中的 `app` 需要是受管理的标签的id属性值
    // - data: 用来定义数据模型
    // - methods: 用来定义函数。这个我们在后面就会用到
    
    // 第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的

    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data: {
            message: "Hello Vue"
        }
    })
</script>

</html>

Vue指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

在vue中，通过大量的指令来实现数据绑定到视图的

指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性

v-bind和v-model

指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定

v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当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>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a >链接1</a>
        <a >链接2</a>

        <input type="text" >

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>
</html>

在上述的代码中，我们需要给<a>标签的href属性赋值，并且值应该来自于vue对象的数据模型中的url变量。

<a v-bind:href="url">链接1</a>

当然v-bind可以简写，可以写成这种形式

<a v-bind:href="url">链接1</a>

注意：html属性前面有:表示采用的vue的属性绑定！

v-model： 用于在表单元素上创建双向数据绑定。

  • vue对象的data属性中的数据变化，视图展示会一起变化

  • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。

data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。

<input type="text" v-model="url">

双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

整体代码演示：

<!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>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>
</html>

v-on

v-on: 用来给html标签绑定事件的

  • v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数

  • v-on语法绑定事件时，事件名相比较js中的事件名，没有on

在js中，事件绑定demo函数

<input onclick="demo()">

vue中，事件绑定demo函数

<input v-on:click="demo()">

代码演示：

在下面的代码中我们给第一个按钮，通过v-on指令绑定单击事件，

 <input type="button" value="点我一下" v-on:click="handle()">

当然还有简写的方式 

v-on也存在简写方式，即v-on: 可以替换成@，

<input type="button" value="点我一下" @click="handle()">

然后在vue对象中编写方法

 methods: {
        handle: function(){
           alert("你点我了一下...");
        }
}

完成代码

<!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>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

v-if和v-show

指令描述
v-if条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else
v-else
v-show根据条件展示某元素，区别在于切换的是display属性的值

演示代码

<!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>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span>年轻人(35及以下)</span>
        <span>中年人(35-60)</span>
        <span>老年人(60及以上)</span>

        <br><br>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

在上面的代码中，我们其中采用了双向绑定到age属性，使用了v-model，意味着我们可以通过表单输入框来改变age的值。

使用v-if的方式

年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>

使用v-show的方式

年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)</span>
<span v-show="age > 35 && age < 60">中年人(35-60)</span>
<span v-show="age >= 60">老年人(60及以上)</span>

v-if和v-show的区别

他们两个的区别在于v-if对于不满足条件的元素，浏览器不会进行渲染，而v-show虽然我们看到的效果和v-if一样，但是v-show是通过控制css的display样式来控制，浏览器会将全部进行渲染

完整代码

代码演示：

<!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>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

v-for

基本语法

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。

有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<br class="Apple-interchange-newline"><div></div>

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

代码演示：

        <!-- 我们要对div标签进行变量，因此在div标签上，加上v-for 其中 (item, index) in address item表示遍历出来的元素 index是下标  address 表示从那个地方遍历 -->

<!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="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 我们要对div标签进行变量，因此在div标签上，加上v-for 其中 (item, index) in address item表示遍历出来的元素 index是下标  address 表示从那个地方遍历 -->
        <div v-for="(item, index) in address">{{item}}</div>
        <hr>
        <div v-for="(item, index) in address">{{index}}:{{item}}</div>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            address: ["jack", "tom", "mary"]
        },

        methods: {

        }

    })
</script>

</html>

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>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

vue的生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

代码演示：

当浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

_雨_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue快速入门教程
07-16
助你vue快速入门~~学完了感觉还不错____________________________________特此分享
Vue快速入门使用示例附录
03-10
"Vue快速入门使用示例附录"这个压缩包可能是为了帮助初学者快速理解并掌握Vue的基础操作和常见应用场景。让我们通过以下几个关键知识点来深入探讨Vue.js。 1. **安装Vue**: Vue可以通过CDN链接直接在HTML中引入，也...
Vue快速入门
梵高的向日葵
11-05 8201
文章目录一、Vue快速入门1、第一个Vue程序2、Vue基本语法2.1、if判断2.4、事件双向绑定3、Vue组件4、Axios异步通信5、计算属性6、插槽slot7、自定义事件内容分发8、创建vue项目二、Vue实战1、项目创建2、项目开发未完结 一、Vue快速入门 1、第一个Vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti
前端学习核心框架Vue2基础入门+实战教程
小谷同学的博客
05-16 841
Vue框架快速入门，提高你的开发效率！
VUE 快速入门
qq_55624813的博客
11-04 1449
目录 VUE 简介 什么是VUE? 什么场景使用VUE？ VUE 快速入门 官方js文件下载 业务及代码实现 总结(Summary) VUE 简介 什么是VUE? VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。 如何理解框架？ 可以将其理解为已经包含部分核心功能的半成品代码，缺少个性化定制，主要用于避免重复编码实现。 什么场景使用VUE？ 绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如:
Vue 快速入门
m0_59392076的博客
05-17 262
Vue快速入门 目录 一、Vue指令和参数 二、v-for条件指令 三、v-model指令 四、v-on和v-bind指令 五、component组件 提示：以下是本篇文章正文内容，下面案例可供参考 一、Vue指令和参数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>⼩滴课堂vue快速⼊⻔</title> ..
vue快速入门文档
jl15988
03-03 729
快速的学习vue，不懂的地方也可以向我提问，有错误的地方也请及时指正。
VUE快速入门手册
码字不易，大家的支持就是我坚持下去的动力
09-23 2327
Vue介绍VUE：vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。MVVM：MVVM是model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。
一篇文章，Vue快速入门
热门推荐
cV展示的学习园
06-24 5万+
① Vue概述及第一个Vue程序(Hello World) 1.1 什么是MVVM MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的
Vue快速入门-快速掌握Vue
weixin_52112756的博客
01-20 2739
Vue快速入门-快速掌握Vue 1. 简介 2. Vue—Hello World 3. 指令 4. 计算属性和侦听器 5. 组件化基础 6. 生命周期和钩子函数 7. 使用Vue脚手架进行模块化开发 1、简介 Vue (读音 /vju/，类似于 view) 是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。 是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。 1.2、MVVM编程思想 MVV
Ant Design Vue快速入门教程
dasfa11的博客
11-04 1万+
Ant Design Vue Ant Design是蚂蚁金服出品的一款前端UI库，官方的介绍是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。简而言之就是一款简洁漂亮的UI库。 环境node.js webpack vscode npm //安装vue脚手架和ant design vue npm install -g @vue/cli npm i --save ant-design-vue //创建一个vue demo vue create an
【Vue】快速入门
你不来，再美的天地，都狼藉 ~
03-24 1722
一文带你从HelloWorld认识Vue框架，深刻理解！
vue快速入门package.rar
04-06
这个"vue快速入门package"压缩包文件包含了多个基于Vue.js的小项目，可以帮助初学者快速理解和掌握Vue的核心概念与基本用法。 1. **计数器**：这是一个基础的Vue应用示例，展示了如何使用Vue的数据绑定和计算属性来...
Vue快速入门.docx
06-20
Vue.js 是一款由尤雨溪开发的轻量级但功能强大的前端框架，它采用MVVM编程思想，旨在简化用户界面的构建。Vue的核心特点是其渐进式框架设计，允许开发者根据项目需求逐步引入和使用其功能特性，无需一次性掌握所有...
vue快速入门:js文件的导入导出
最新发布
06-24
Visual Studio Code常用插件配置
vue 快速入门指南.docx
11-22
Vue 快速入门指南 本资源摘要信息主要介绍 Vue 框架的入门指南，从网页的发展历程到 Vue 框架的出现，讲解了前端开发的演变过程。 一、静态网页的产生 从 HTML 到 JavaScript 的出现，网页从静态到动态的转变。...
vue快速入门(一) 之 第一个vue程序
01-08
在“Vue快速入门(一) 之第一个Vue程序”中，我们将学习如何创建一个基础的Vue应用，包括理解和运用核心概念，如Vue实例、数据绑定以及选择器。 首先，让我们深入理解Vue的核心部分。在示例代码中，我们看到了以下...
vue小白入门教程
08-27
Vue 小白入门教程 本篇文章为初学者提供了一个详细的 Vue 入门教程，介绍了 Vue 的基本概念、环境搭建、第一个 Vue 应用程序...通过掌握这些知识点，初学者可以快速入门 Vue 框架，并开始构建自己的用户界面应用程序。
Vue快速入门与工程化实践
快速上手Vue，首先需要安装Node.js，因为Vue的很多开发工具和构建过程依赖于Node.js的npm包管理器。安装Node.js可以通过访问其官方网站下载对应平台的安装包。然后，可以通过以下方式安装Vue： 1. **直接通过`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值