Vue入门(初学者也能学会)

小鱼赶紧洗洗睡吧

已于 2023-08-03 09:13:02 修改

阅读量531

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-08-02 17:39:24 首次发布

本文链接：https://blog.csdn.net/rousongxiaobei_/article/details/132064214

版权

Vue官方网站： https://cn.vuejs.org/

一、为什么学习Vue框架？

1.Vue框架以其简单易学并且渐进式的特点深受开发者喜爱无论是中小型还是大型项目都可使用2.Vue框架来开发，在前端开发领域非常流行

二、搭建vue环境

vue环境的搭建有很多种：

1.使用cdn

2.下载javaScript文件，自行托管

3.使用npm安装

4.使用官方的cli来构建项目

我们初次学习，先使用自行下载js的方式。

三、主要介绍内容

1.Vue框架核心

2.MVVM模式

3.Vue起步

四、MVVM模式简介

4.1、Vue在设计上使用的MVVM（Model-View-ViewModel）模式

1.Model:负责数据存储

2.View:负责页面展示

3.ViewModel:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

4.2、优势

1.低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化时Model可以不变，当Model变化时View也可以不变

2.可重用性：可以把一些视图逻辑放在一个ViewModel里面，让多个View重用这段视图逻辑代码

3.独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

五、VUE实例

1. hello world

代码：

<!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">
        {
  {name}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
   
    // 创建一个Vue实例
    var app =new Vue({
        el:"#app",//绑定一个元素
        data(){
            return{
                name:'hello',
                height:100,
                love:[1,2,3],
            }
        }
    })
</script>
</html>

效果：

六、指令（Directive）

6.1.指令：是特殊的带有 v-前缀的特性

6.2.常用：Vue指令 v-if指令、v-else指令、v-show指令、v-on指令、v-model指令、v-bind指令、v-for指令…

6.3.指令的作用当表达式的值改变时，将某些行为应用到DOM上

6.4.v-if指令

称为条件渲染指令，根据表达式的真假来插入和删除元素

代码：

<!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">
        {
  {name}}
        <h1 v-if="isif">显示了</h1>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
   
    // 创建一个Vue实例
    var app =new Vue({
        el:"#app",//绑定一个元素
        data(){
            ret