vue入门

最新推荐文章于 2022-12-08 18:04:41 发布

DaiQuan2206

最新推荐文章于 2022-12-08 18:04:41 发布

阅读量811

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_45935397/article/details/123411240

版权

一、前后端分离介绍

1.1 软件项目架构演进

从单体到前后端分离

在这里插入图片描述

1.2 前后端分离架构

在这里插入图片描述

1.3 前端技术迭代

1.3.1 前端开发三要素

HTML 决定了网页中的内容
CSS 决定了网页中视图的样式
JavaScript 决定了网页的行为

1.3.2 前端框架

UI框架：Bootstrap、Layui
JS框架：jQuery

1.3.3 MVVM框架

React
Angular.JS
Vue 虚拟DOM+模块化

1.4 MVVM介绍

单体项目：后端MVC时代
前后端分离（阶段1）：前端MVC时代
- 页面流程控制是在前端完成
- 数据渲染还是通过DOM操作实现

在这里插入图片描述

前后端分离（阶段2）：MVVM时代
- MVVM Mode View ViewModel

二、Vue入门

https://vuejs.org
https://cn.vuejs.org

2.1 vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.2 vue入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="div1">
			<p>{{title}}</p>
			<p>{{line1}}</p>
			<p>{{line2}}</p>
			<p>{{line3}}</p>
			<p>{{line4}}</p>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:"#div1",
				data:{
					title:"枫桥夜泊",
					line1:"月落乌啼霜满天",
					line2:"江枫渔火对愁眠",
					line3:"姑苏城外寒山寺",
					line4:"夜半钟声到客船"
				}
			});
		</script>
	</body>
</html>

三、vue事件监听

3.1 事件监听

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

使用v-on指令监听事件，通过参数指定监听类型 v-on:click表示监听元素的点击事件
事件触发的JS函数定义在vue实例的methods中

<div id="app">
    <img :src="imgPath" style="height: 200px;"  
         v-on:mouseover="changeImg('imgs/img02.png')"
         v-on:mouseout="changeImg('imgs/img01.png')" 
         v-on:mousedown="changeImg('imgs/img03.png')"
         v-on:mouseup="changeImg('imgs/img02.png')"/>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            imgPath:"imgs/img01.png"
        },
        methods:{
            changeImg:function(path){
                vm.imgPath = path;
            }
        }
    });
</script>

3.2 JS函数传值

<div id="app">
    <div>
        <p v-for="b in bookList">
            <label>{{b.bookId}}</label>
            <label>{{b.bookName}}</label>

        <button v-on:click="doEdit(b.bookId,b.bookName,b.bookAuthor,b.bookPrice)">编辑</button>
        <button v-on:click="doDel(b.bookId)">删除</button>
        </p>
    </div>

    <div v-if="isShowUpdateDiv">
        <fieldset style="width: 400px;">
            <legend>修改图书</legend>
            <p>图书ID：{{book.bookId}}</p>
            <p>图书名称：<input type="text" v-model="book.bookName"/></p>
            <p>图书作者：<input type="text" v-model="book.bookAuthor"/></p>
            <p>图书价格：<input type="text" v-model="book.bookPrice"/></p>
            <p><input type="button" value="提交修改" v-on:click="doSubmitUpdate"/></p>
        </fieldset>
    </div>

</div>
<script type="text/javascript">
    var list = [
        {bookId:1001,bookName:"Java",bookAuthor:"张三",bookPrice:88.00,bookImg:"4b427.jpg"},
        {bookId:1002,bookName:"C",bookAuthor:"李四",bookPrice:66.00,bookImg:"5215.png"},
        {bookId:1003,bookName:"C++",bookAuthor:"王五",bookPrice:69.00,bookImg:"79408.jpg"},
        {bookId:1004,bookName:"JSP",bookAuthor:"赵柳",bookPrice:78.00,bookImg:"c2f79408.jpg"}
    ];

    var vm = new Vue({
        el:"#app",
        data:{
            imgPath:"imgs/img01.png",
            bookList:list,
            isShowUpdateDiv:false,
            book:{
                bookId:0,
                bookName:"",
                bookAuthor:"",
                bookPrice:0.0
            }
        },
        methods:{
            changeImg:function(path){
                vm.imgPath = path;
            },
            doEdit:function(id,name,author,price){
                vm.book.bookId = id;
                vm.book.bookName = name;
                vm.book.bookAuthor = author;
                vm.book.bookPrice = price;
                vm.isShowUpdateDiv=true;
            },
            doDel:function(bookId){
                console.log(bookId);
            },
            doSubmitUpdate:function(){
                vm.isShowUpdateDiv=false;
                console.log(vm.book);
            }
        }
    });
</script>

3.3 使用dataset传值

在vue的事件监听JS函数调用过程中，通常不适用js函数参数传值，使用事件监听标签的dataset传值：

在标签中使用 :data-attrName="" 绑定数据到标签上
在JS函数声明event参数，通过event.srcElement.dataset获取绑定的数据

<div id="app">

    <div>
        <p v-for="b in bookList">
            <label>{{b.bookId}}</label>
            <label>{{b.bookName}}</label>

         <button v-on:click="doEdit" :data-id="b.bookId" :data-name="b.bookName">编辑</button>
         <button v-on:click="doDel" :data-id="b.bookId">删除</button>
        </p>
    </div>
</div>
<script type="text/javascript">
    var list = [];

    var vm = new Vue({
        el:"#app",
        data:{
            imgPath:"imgs/img01.png",
            bookList:list,
            isShowUpdateDiv:false,
            book:{
                bookId:0,
                bookName:"",
                bookAuthor:"",
                bookPrice:0.0
            }
        },
        methods:{
            changeImg:function(path){
                vm.imgPath = path;
            },
            doEdit:function(event){
                var ds = event.srcElement.dataset;
                vm.book.bookId = ds.id;
                vm.book.bookName = ds.name;
                // vm.book.bookAuthor = author;
                // vm.book.bookPrice = price;
            },
            doDel:function(event){
                //event 表示触发当前JS函数的事件对象
                var bookId = event.srcElement.dataset.id;
                console.log("删除图书bookId:"+bookId)
            }
           
        }
    });
</script>

3.4 事件修饰符

在事件监听上添加特定的修饰符可以实现特定的功能

<div id="app">

    <form action="https://www.baidu.com">
        <input type="submit" value="提交" v-on:click.prevent="doSomething"/>
    </form>

    <button @click.once="method2">测试</button>

    <div style="background: greenyellow; width: 300px; height: 200px;" @click.self="method3">
        <div style="background: purple; width: 200px; height: 100px;" @click="method4">
            <button @click.stop="method5">测试2</button>
        </div>
    </div>

</div>
<script type="text/javascript">

    var vm = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            doSomething:function(){
                console.log("~~~~~");
            },
            method2(){
                console.log("~~~~method2")
            },
            method3(){
                console.log("~~~~method3")
            },
            method4(){
                console.log("~~~~method4")
            },
            method5(){
                console.log("~~~~method5")
            }
        }
    });
</script>

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

3.5 按键修饰符

键盘上的每个按键都是由键盘码的，我们可以在按键事件监听上添加键盘码修饰符，指定点击特定按键才触发事件

<input @keyup.65="method3" />
<input @keyup.enter="method3" />

3.6 系统修饰符

ctrl
shift
alt
meta

<input @keyup.ctrl.shift.65="method3" />

oThat">…


#### 3.5 按键修饰符

> 键盘上的每个按键都是由键盘码的，我们可以在按键事件监听上添加键盘码修饰符，指定点击特定按键才触发事件

```html
<input @keyup.65="method3" />
<input @keyup.enter="method3" />

3.6 系统修饰符

ctrl
shift
alt
meta

<input @keyup.ctrl.shift.65="method3" />