vue.js入门

2022级计算机应用技术1班-郑玉莲

于 2023-12-25 11:21:01 发布

阅读量836

点赞数 22

文章标签：前端框架 vue.js 前端

本文链接：https://blog.csdn.net/zyl199317/article/details/135190833

版权

前言

首先要学会vue需要掌握以下一些内容

一、Vue.js的基本概念

Vue.js诞生于2014年，由尤雨溪开发，是一套基于前后端分离模式、用于构建用户界面的渐进式框架，它只关注视图层的逻辑、采用自底向上、增量式开发的设计。

优点：

轻量级: Vue简单﹑直接，所以Vue使用起来更加友好。
双向数据绑定: 数据驱动视图，视图也可以驱动数据。
组件化开发：vue.js提供了非常方便且高效的组件管理来进行加载公用的模块。
指令: 指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。
插件: 插件用于对vue框架功能进行扩展。

1、Vue.js的开发模式：MVVM

MVVM(Model-View-ViewModel)模式包括3个核心部分。

Model(模型)：数据层，主要是从数据库取出的经过特定出来之后的数据。
View(视图)：视图层，即HTML文档的DOM元素，也就是我们看到的页面。
ViewModel(视图模型)：用于连接视图与数据的数据模型，负责监听Model或者View的修改。

二、vue实例常用到的构造选项

常用的构造选项：

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

说明：在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

例子：

el:

使用el 绑定DOM元素

<div id="app">
{{msg}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"Vue实例绑定div成功!",
},
})
</script>

data:

Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

对象（Object）的形式

<div id="app">{{content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                content: "Mustache表达式通过data为对象获取content的值"

            }

        })

    </script>

函数（Function）的形式:

<div id="app">{{content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            // 这是下面function的简写形式

            data(){

                       return {

                            name:'张三',

                            age:18

                    }

              },

             // 另一种写法

            // data:function() {

            //     return {

            //         name: '张三',

            //         age: 18,

            //         sex: '男'

            //     }

            // },

        })

    </script>

methods：

概述：methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示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>
    1、第一步   引入vue.js
    <script src="../js/vue.js"></script>
</head>
<body>
   2、第二步
   <div id="app">
        <div>
            {{msg}}
            <p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>
            <!-- v-on  可以简写为  @ -->
            <button v-on:click="btnClick">点击</button>
            <!-- 简写形式 -->
            <!-- <button @click="btnClick">点击</button> -->
        </div>
    </div>
    <script>
       3、第三步
        var app = new Vue({
            el: "#app",
            data: {
                msg: "旧文本"
            },
           // 页面的点击事件都需要放到  methods 里面
            methods:{
                btnClick(){
                    this.msg="新文本"
                }
            }
        })
    </script>
</body>
</html>

三、常用指令

概述：指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

v-text	用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。
v-html	用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。
v-bind	用于实现单向动态数据绑定。
v-on	用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。
v-for	是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。
v-model	用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。
v-if和v-else	v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。
v-show	用于根据条件展示元素，用法与v-if大致一样。

v-text:

div id="app v-text-"msg"><div>
<script>
var app=new Vue({
el: "#app",
data:{
msg:"Hello,v-text!"
}
})
</script>

v-html:

<div id="app" v-html="msg><div>
<script>
var app=new Vue({
el: "#app",
data:{
msg:"<h1>Hello,v-html!</h1>"
}
})
</script>

v-bind:

<div id="app">
<input v-bind:value="msg">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"Hello,v-bind!"
}
})
</script>

v-on:

div id="app">
<p>{{msg}}</p>
<button v-on:click="sayHello">请单击</button>
</div>
<script>
var app=new Vue({
el:"#app",
data: {
msg:"Hi"
},
methods:{ 
sayHello:function(){
this.msg="Hello,v-on!"
}
}
})
</script>

说明：v-bind可以省略v-bind，简写为一个冒号 “:”:

<!--完整写法-->

<img v-bind: src="src"></img>

<img :src="src"></img>
v-on可以直接使用“@”简写：

<a V-on:click="do"></a>

<a @click="do"></a>

v-for:

for循环普通数组:

<div id="app"
<ul>
<li v-for="(item,index) of fruit" :key="index">
索引值index: {{index}}---每一项item: {{fitem}}
</li>
</ul></div>
<script>
new Vue({
el:"#app",//绑定了app这个元素
data:{
fruit :["苹果","梨子"，"香蕉","橘子"]
}
})
</script>

for循环对象数组:

<div id="app">
<ul>
<li v-for="(item,index) of fruit" :key="index">
索引值index: {{index}}--
每一项name: {{item.name}}---
每一项color: {{item.color}}
</li>
</ul>
</div>
<script
>new Vue({el:"#app"，//绑定了root这个元素
data:{
fruit :[
{name:"苹果",color:"红色"},
{name:"梨子",color:"黄色"},
{name:"橘子",color:"橘色"},
{name:"西瓜",color:"绿色"},
]
}
})
</script>

for循环对象

<div id="app">
<ul>
<li v-for="(value, key,index) of apple" :key="index">
属性索引: {{index}}---属性名: {{key}}---属性值: {{value}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
apple:
{name;"苹果",color:"红色"}
}
})
</script>

for循环整数

<div id="app"
<ul>
<li v-for="count of 10">
这是第{{count}}次循环
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
})
</script>

v-model:

<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>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text”v-model="msg">
<p>文本框的内容:{{msg}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:""
}
})
</script>
</body>
</html>

v-if:

<div id="app"
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
el:"#app",
data:{
seen:true
}
})
</script>

v-else:

<div id="app"
<p v-if="seen">现在你看到我了</p>
<p v-else>你看不到我了</p>
</div>
<script>
new Vue({
el:'#app',
data:{
seen: true
}
})
</script>

v-show:

<div id="app"
<h1 V-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
ok: true
}
})
</script>

四、filters过滤器

概述：在Vue.js中提供了一种过滤器，它可以对数据进行过滤处理，它的作用一般是用于一些常见的文本格式化，即修饰文本，并根据过滤的条件返回需要的结果，过滤器通常由管道符"|"进行标识。

过滤器一般可以用在两个地方：双花括号{{}}或v-bind表达式中。它分为全局过滤器和局部过滤器。

1、局部过滤器示例代码：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>电脑的价格:{{price|addPriceIcon}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                price:200
            },
            // 通过过滤器的方式在价格前面加上价格的符号
            filters:{
                // value就是传入的200的值
                addPriceIcon(value){
                    return '￥'+value
                }
            }
        })
    </script>
</body>
</html>

效果

2、全局过滤器示例代码：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>电脑的价格:{{price|addPriceIcon}}</p>
    </div>
    <script>
        // 通过过滤器的方式在价格前面加上价格的符号
        Vue.filter('addPriceIcon', function (value) {
            return '￥' + value
        })
        new Vue({
            el: '#app',
            data: {
                price: 200
            },
        })
    </script>
</body>
</html>

五、体会

在Vue中，我获得了一些宝贵的经验，这里有一些我个人的心得体会:
1.组件化开发:Vue的组件化开发模式使我更加清晰地组织和管理代码。通过组件，我可以将功能或UI元素封装在一起然后在整个应用中重复使用。这不仅提高了代码的复用性，也使得代码更加模块化，易于维护和测试。
2.响应式数据绑定: Vue的应式数据绑定特性使得数据和视图之间的同步变得非常简单。当数据发生变化时，视图会自动更新，无需手动操作DOM。这大大简化了数据和视图之间的交互逻辑，提高了开发效率.
3.指令和混入: Vue的指令和混入特性非常实用。指令，如v-if、v-for等，可以方便地操作DOM，而混入则可以在组件间共享方法和属性，实现代码的重用。
4.路由和状态管理:使用Vue Router进行前端路由管理，可以实现多页面的跳转和懒加载，极大地提升了用户体验。同时，使用Vuex讲行状态管理，可以更好地组织和维护应用的状态，使状态的管理变得更加简单和清晰.
5.构建工具和插件:使用Vue CLl等构建工具，可以快速搭建项目框架，简化项目配置。同时，通过插件可以方便地集成第三方库和工具，如axios、vue-i18n等。

2022级计算机应用技术1班-郑玉莲

关注

22
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
vue.js入门

前言首先要学会vue需要掌握以下一些内容一、Vue.js的基本概念Vue.js诞生于2014年，由尤雨溪开发，是一套基于前后端分离模式、用于构建用户界面的渐进式框架，它只关注视图层的逻辑、采用自底向上、增量式开发的设计。MVVM(Model-View-ViewModel)模式包括3个核心部分。二、vue实例常用到的构造选项说明：在创建Vue实例时，必不可少的一个选项就是el。
复制链接

扫一扫