网站首页 > 技术文章正文

web前端框架Vue基础一

ins518 2024-12-11 13:52:43 技术文章 16 ℃ 0 评论

学习大纲

为什么要学习Vue

传统开发&问题

在早期开发网站技术体系没有明确分工，前后端由一个开发工程师来完成，既要学习html、javascript、jquery等前端技术，开发速度和效率比较慢。

JQ有大量的DOM操作，vue有一个概念虚拟DOM 就是直接去内存中取
JQ没有统一模型不方便后期维护，vue是基于mvvm思想数据统一管理在模型汇总
JQ有语法可以提取公共的html或js吗？vue有组件 vue可以减少代码冗余便于后期维护

而且在MVC模式兴起之后虽然有所改善，但是后端程序员还是避免不了套页面的工作。

解决：前后端分离

后端只需要提供接口数据给前端，后续的工作由前端人员实现数据展示和服务端交互。

这样真正实现前后端分离

Vue 是什么

简单概括：Vue是当下很火的一个JS库&框架（国人尤雨溪）

库：一堆属性方法的集合，按需求调用

框架：针对业务提供的一套解决方案（N个库的集合）并且制定了统一的开发规范

官方解释

小结

为什么要学习Vue：减轻后端压力，用来解决前后端分离问题。

什么是vue：就是用js写的一个库或框架

渐进式：你可以用一个库，也可以用它的全家桶（根据项目需求来）

M V模式

明确：MV*模式主要解决的问题就是View代码难以维护的问题
种类：MVC、MVP、MVVM
MVC

Model模型 - 负责数据处理，

View视图 - 负责显示页面，

Controller控制器 - 负责调度使用哪个M和哪个V

MVP（和MVC的区别V<=>M不会直接通信）

Model模型 - 负责数据处理，

View视图 - 负责显示页面，

Controller控制器 - 负责调动M和V（不要）

Presenter主持人 - 负责调度使用哪个M和哪个V（MVC中的Controller）

MVVM

Model模型 - 负责数据处理，

View视图 - 负责显示页面，

ViewModel - 负责监控M数据变化同步到V

体验一下

<div id="app">
    <!-- 
        v必须在监控范围内写
        语法：{{ data中的键 }}
        作用：展示模型中的数据
     -->
     {{ msg }}
</div>

<!-- 步骤1：导入库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 步骤2：创建vue对象
// vue可以统一管理数据 它有数据模型
// 按照MVVM思想开发
// M   - 模型 model  - 负责管理数据
// V   - 视图 view   - 展示数据
// VM  - ViewModel   - 负责监控m 自动同步到 v

// 创建vue对象   有一个实参  对象类型
let vm = new Vue({
    // 声明监控范围（元素 element el）
    el: "#app", //用CSS选择器
    // 声明模型
    data: {
        msg: "展示数据"
    }
}) 
</script>

模版语法

<span>输出变量信息: {{ data }}</span>
<p>现实带有html格式的内容: <span v-html="data"></span></p>

语法

插值：顾名思义就是在页面展示数据（插：插入，值：数据）

文本：{{ data中的键 }}

显示HTML数据（模型中的html代码能够被解析）：v-html="data中的键"

指令：就是通过v-开头的语法显示数据

动态参数（动态标签的属性值）：v-bind:属性名="data中键" 或简写直接冒号

事件：v-on:事件类型="函数名" 或简写直接@

注意：
1-函数名不能写小括号
2-函数默认不存在，你需要在vm中定义methods键

2.需求

需求1：定义模型变量uname=小明 age=18，url=http://www.baidu.com/

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
        <p>你猜我叫什么？	答： {{uname}}	</p>							
        <p>你猜我今年多少岁？答：  {{age}}	</p>							
        <p> 哥哥你年龄太大了，我要你回到18岁，实现age-870 代码：{{age-870}}	 </p>
        <p>姓名反转显示，代码：	{{uname.split('').reverse().join(',')}}	</p>				
        <p>
            姓名等于悟空超厉害，否则八戒还得努力呀！代码：
            {{ uname == '悟空' ? '超厉害' : '八戒还得努力'}}
        </p>	
        <p> 声明a标签href中的值使用模型数据url</p>
        <p>
            <a v-bind:href="url">点击跳转url</a>
            <a       :href="url">点击跳转url</a>
        </p>
        <p>声明button按钮，点击弹出：hello</p>
        <input type="button" value="点我" v-on:click="fn1">
        <input type="button" value="点我" @click="fn1">
        <hr /><hr />
        <p>显示模型中的html键（逻辑上）： {{html}}</p>
        <p v-html="html"></p>
        <!-- 注：用v-html数据会放到标签里面 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1创建VM
new Vue({
    //声明监控访问
    el: '#app',
    //2创建模型 
    data: {
        uname:'小明',
        age: 18,
        url: 'http://www.baidu.com/',
        html: '<b>你好呀</b>'
    },
    methods: {//脚下留心：写对象 因为要写多个方法
        // 键就是函数名
        // fn1:function(){}
        // fn1:()=>{}   es6  箭头函数
        // fn1(){}      es6  对象 属性和方法的简写
        fn1() {
            alert('hello，world')
        }
    }
})
</script>
</body>
</html>

需求2：直接运行下述代码实现需求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
        <p>你猜我叫什么？	答： {{uname}}	</p>							
        <p>你猜我今年多少岁？答：  {{age}}	</p>							
        <p> 哥哥你年龄太大了，我要你回到18岁，实现age-870 代码：{{age-870}}	 </p>
        <p>姓名反转显示，代码：	{{uname.split('').reverse().join(',')}}	</p>				
        <p>
            姓名等于悟空超厉害，否则八戒还得努力呀！代码：
            {{ uname == '悟空' ? '超厉害' : '八戒还得努力'}}
        </p>	
        <p> 声明a标签href中的值使用模型数据url</p>
        <p>
            <a v-bind:href="url">点击跳转url</a>
            <a       :href="url">点击跳转url</a>
        </p>
        <p>声明button按钮，点击弹出：hello</p>
        <input type="button" value="点我" v-on:click="fn1">
        <input type="button" value="点我" @click="fn1">
        <hr /><hr />
        <p>显示模型中的html键（逻辑上）： {{html}}</p>
        <p v-html="html"></p>
        <!-- 注：用v-html数据会放到标签里面 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1创建VM
new Vue({
    //声明监控访问
    el: '#app',
    //2创建模型 
    data: {
        uname:'小明',
        age: 18,
        url: 'http://www.baidu.com/',
        html: '<b>你好呀</b>'
    },
    methods: {//脚下留心：写对象 因为要写多个方法
        // 键就是函数名
        // fn1:function(){}
        // fn1:()=>{}   es6  箭头函数
        // fn1(){}      es6  对象 属性和方法的简写
        fn1() {
            alert('hello，world')
        }
    }
})
</script>
</body>
</html>

3.小结

插值：顾名思义在视图插入模型中数据

文本数据：{{ data中的键 }} 或者 v-text="data中的键" （了解）

HTML数据：v-html="data中的键"

思考：v-html和v-text有什么区别？

回答：v-html能够解析模型中的标签 v-text仅仅原样输出

注意：只要是v-开头的都是vue指令

动态参数/标签的属性值动态也就是想要用模型数据

v-bind:属性名="data中的键"

简写

:属性名="data中的键" 推荐

事件

v-on:事件类型="函数名"

简写

@事件类型="函数名" 推荐

注意：

1-函数名切记切记切记不能写小括号
2-函数不存在必须在vm中声明methods键（统一用es6对象属性和方法的简写）

列表渲染（循环）

1、明确需求

在实际工作中，上图商品数据来源于数据库[ {},..., {} ]

数组中每一个对象就是一条商品数据

思考：将上述数据存到模型中，视图如何显示呢？

回答：循环遍历，通过v-for指令

循环-在生活中：不断重复做某件事得表现
循环-在编程中：按个获取【复合类型数组/对象】中的数据、数据获取完毕退出终止获取
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
        <div 
         v-for="item in goodsList"
        >{{item.name}}{{item.id}}</div>
				<div 
         v-for="(item,i) in goodsList"
        >{{item.name}}{{i}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1创建VM
new Vue({
    //声明监控访问
    el: '#app',
    //2创建模型 
    data: {
        //定义循环变量
        goodsList:[
            {id:1,name:'商品名称',price:12},
            {id:2,name:'商品名称',price:13},
            {id:3,name:'商品名称',price:14},
            {id:4,name:'商品名称',price:15}
        ]
    },
    methods: {

    }
})
</script>
</body>
</html>

2.语法分析

v-for="数据 in data中键" 数据一般是数组中一个个对象

v-for="(数据, 索引/下标) in data中键"

条件渲染

1.明确需求

淘宝购物车：有商品-会显示商品数量，没商品-消失

思考：将上图购物车商品数据cartNum存到模型中，如何实现上述效果

回答：判断，通过v-if指令

2.语法分析

v-if="条件"

v-else-if="条件"

...

v-else

3.需求

需求1：实现购物车数量需求
需求2：判断成绩>=90优秀>=80一般>=70良好>=60及格>=0不及格，其他不行

4.代码实现

<div id="app">
    <h1>直接显示cartNum模型数据</h1>
    <div>{{ cartNum }}</div>

    
    <h1>仿淘宝判断是否显示</h1>
    <div v-if="cartNum">购物车{{ cartNum }}</div>
    <div v-else>购物车</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 声明监控范围
    el: "#app",
    // 声明模型数据
    data: {
        // cartNum: 666
        cartNum: 0
    }
})
</script>

判断成绩>=90优秀>=80一般>=70良好>=60及格>=0不及格，其他不行

<div id="app">
    <div v-if="score >= 90">优秀</div>
    <div v-else-if="score >= 80">一般</div>
    <div v-else-if="score >= 70">良好</div>
    <div v-else-if="score >= 60">及格</div>
    <div v-else-if="score >= 0">不及格</div>
    <div v-else>你有瑕疵，你不行</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 声明监控范围
    el: "#app",
    // 声明模型数据
    data: {
        // 需求2：判断成绩>=90优秀>=80一般>=70良好>=60及格>=0不及格，其他不行
        score: 5
    }
})
</script>

v-show

说明：通过v-if和v-show都可以实现判断

区别1：v-if控制DOM 移除标签，v-show控制css隐藏显示

区别2：v-if语法更强 else if 和 else

事件处理

事件就是用户和网页之间的交互

1.语法分析

语法： v-on:事件类型="处理函数"
简写：@事件类型="处理函数"

注意：

1：处理函数不能写小括号
2：函数不在，需要在vm中定义methods （切记：es6 对象的属性和方法简写）

2.需求

需求1：点击按钮弹出h5@qf（写函数）

需求2：显示data中的num键数据，通过按钮控制+/-（写函数）

需求3：通过按钮+（直接执行js代码更新数据）

2.代码实现

<div id="app">
    <button @click="fn1">点我弹QF</button>
    <h1>{{num}}</h1>
    <button @click="add">加</button>
    <button @click="del">减</button>
    <button @click="num=num+1">直接操作模型</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 声明监控范围
    el: "#app",
    // 声明模型数据
    data: {
        num: 6
    },
    // 声明普通方法
    methods: {
        // fn1: function(){}
        // fn1: () => {}
        fn1(){
            alert('h5@qf')
        },
        add() {
            // 获取：this.data中的键
            // 修改：this.data中的键 = 值
            this.num += 1  // this.num = this.num + 1
        },
        del() {
            this.num -= 1
        }
    }
    // 需求1：点击按钮弹出h5@qf（写函数）
    // 需求2：显示data中的num键数据，通过按钮控制+/-（写函数）
    // 需求3：通过按钮+（直接执行js代码更新数据）

})
</script>

3.事件修饰符

概念：名词

作用：vue提供了事件修饰符，可以修改默认的事件触发

<style>
.grandfather {
    width: 300px;
    height: 300px;
    background: yellow;
}
.father {
    width: 200px;
    height: 200px;
    background: green;
}
.son {
    width: 100px;
    height: 100px;
    background: red;
}
</style>
<div id="app">
    <h1>.stop 阻止冒泡</h1>
    <div class="grandfather" @click="grandfather">
        <div class="father" @click="father">
            <div class="son" @click.stop="son"></div>
        </div>
    </div>

    <h1>.prevent阻止默认动作</h1>
    <a href="http://baidu.com" @click.prevent>点击进入百度</a>
    
    <h1>.capture 打乱冒泡</h1>
    <div class="grandfather" @click.capture="grandfather">
        <div class="father" @click="father">
            <div class="son" @click="son"></div>
        </div>
    </div>
    
    <h1>.self 阻止冒泡（除非自身触发）</h1>
    <div class="grandfather" @click="grandfather">
        <div class="father" @click.self="father">
            <div class="son" @click="son"></div>
        </div>
    </div>

    <h1>.once 仅触发一次</h1>
    <button @click.once="fn">悟空</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 声明监控范围
    el: "#app",
    // 声明模型数据
    data: {
    },
    // 声明普通方法
    methods: {
        fn() {
            console.log('妖怪，快放了我师傅')
        },
        grandfather(){
            console.log('this is grandfather')
        },
        father(){
            console.log('this is father')
        },
        son(){
            console.log('this is son')
        }
    }

})
</script>

4.按键修饰符

场景

上述用户输入完毕账号密码后，直接回车相当于按了登录按钮
思考：如何实现
解决：监听键盘事件&触发的键

传统：设置键盘事件onkeyup -> 判断用户按得是哪个键 -> 如果enter就提交表单
现在：通过vue语法 @事件类型.键盘修饰符=“方法名”

如下练习


<div id="app">
    <input 
        type="text" 
        @keyup.enter="fn1"
        @keyup.space="fn2"
        @keyup.delete="fn3"
    />
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 声明监控范围
    el: "#app",
    // 声明模型数据
    data: {
    },
    // 声明普通方法
    methods: {
        fn1() {
            console.log('this is enter')
        },
        fn2() {
            console.log('this is space')
        },
        fn3() {
            console.log('this is delete')
        }
    }

})
</script>

总结

事件：用户和网页之间的交互

事件三大组成：事件源、事件类型、事件处理函数

vue中事件语法

v-on:事件类型="函数名"

@事件类型="函数名"

留心1：函数名不加小括号，除非传递参数

留心2：函数需要在vm的methods键中定义

vue中事件修饰符

@事件类型.修饰符="函数名"

修饰符种类

.stop阻止冒泡

.prevent阻止默认动作

.self阻止冒泡（除本身）

.once 仅触发一次

.capture（打乱冒泡）

.passive（优化直接告诉浏览器没有阻止默认动作）

vue按键修饰符

@事件类型.修饰符="函数名"

修饰符种类：delete、enter、space等也可以写数字

上一篇： Vue 将推出「无虚拟DOM」版本，又是新的前端框架趋势?
下一篇： Avue - 更加贴合企业开发的数据驱动前端开发框架

网站首页 > 技术文章正文

web前端框架Vue基础一

学习大纲

为什么要学习Vue

Vue 是什么

小结

M V模式

体验一下

模版语法

列表渲染（循环）

条件渲染

v-show

事件处理

总结

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 技术文章 正文

web前端框架Vue基础一

学习大纲

为什么要学习Vue

Vue 是什么

小结

M V模式

体验一下

模版语法

列表渲染（循环）

条件渲染

v-show

事件处理

总结

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 技术文章正文

取消回复欢迎你发表评论: