Vue入门

最新推荐文章于 2024-07-23 20:12:16 发布

PG....

最新推荐文章于 2024-07-23 20:12:16 发布

阅读量99

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_62321223/article/details/126130518

版权

1.Vue.js是什么？

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

什么是渐进式框架：

渐进式的意思就是 "主张最少"。每个框架都会有自己的一套编码方式，从而对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响咋业务开发中的使用方式。

通俗理解渐进式的意思就是：你可以只用我的一部分，而不是用了我这一部分就必须用我的所有部分。

Vue优点：

a.轻量级的框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb。Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。
b.简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习。
c.双向数据绑定：同时也是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
d.组件化：在前端应用里我们是否也可以像面向对象编程一样把模块封装呢？这就引入了组件化开发的思想。Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中我们只要先在父级应用中写好各种组件标签(占坑)，并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样，这个参数叫做组件的属性)，然后再分别写好各种组件的实现(填坑)，然后整个应用就算做完了。
e.视图&数据&结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
f.运行速度快

2. 库和框架的区别

2.1 库(Library)

本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
JavaScript：document.getElementById()
jQuery： $('').val()

2.2 框架(Framework)

是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：自定义mvc、SpringMVC、vue等。
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

侵入式代码：
   a.指的是引入或继承了别的包或框架；
   b.从字面意思理解，就是你的代码里已经嵌入了别的代码，这些代码可能是你引入过的框架，也可能是你通过接口继承得来的（比如：java中的继承），这样你就可以拥有侵入代码的一些功能。所以我们就称这段代码是侵入式代码。
   c.比如：自定义MVC框架就是侵入式框架。我们在在使用自定义MVC框架的时候就要继承自定义MVC框架所提供中央调度器(DispatchServlet)，这时自定义MVC框架的代码就侵入到我们的代码里面了，所以自定义MVC框架的代码就是侵入式的。
   d.侵入式代码的优点：侵入式可以使用户跟框架更好的结合，更容易更充分的利用框架提供的功能。
   e.侵入式代码的缺点：侵入式让用户代码产生对框架的依赖，框架外代码就不能使用了，不利于代码复用，依赖太多重构代码太痛苦了。一句话概括就是，你的代码需要依赖框架的代码，如果把框架拿掉或者换一个框架，就需要重新修改代码(因为使用侵入式的框架，一般需要继承或者实现框架的某一个类或者接口)。

非侵入式代码：
    a.非侵入式与侵入式正好相反，用户的代码不需要引入框架代码的信息，从类的编写者角度来看，察觉不到框架的存在。
   b.非侵入式代码优点：代码可复用，方便移植。体现了代码的设计原则：高内聚，低耦合。
   c.非侵入式代码缺点：用户代码与框架代码交互的方式可能就比较复杂。
   d.Vue框架就是非侵入式框架。

3. MVVM的介绍

MVVM，MVVM是Web前端一种非常流行的开发模式，MVVM通过数据双向绑定让数据自动地双向同步

MVVM ===> M / V / VM
M：model数据模型（JSON）
V：view视图（HTML）
VM：ViewModel 视图模型.可以把它理解成“胶水”，它是把View和Model结合起来。把后台Model的数据提供给前端View，再把前端View的数据(比如form表单)提供给后台Model。
通过ViewMode可以实现数据和视图的完全分离。

1) V（修改数据） -> M 将视图层的数据通过事件将数据提交到后端服务器(前端到后端)
$('#btn_login').click(function(){
通过ajax将页面中的数据通过json格式传递到后端服务器
});

2) M（修改数据） -> V 将后端数据（JSON）通过赋值的方式在视图层展现(后端到前端)
通过ajax的方式调用后端的数据接口将回传过来的JSON数据渲染到页面
$.ajax({
url:
data:
dataType:
type:
success:function(data){
$('#book_name').val(data....); .text() .html()
...
}
})

共性：不管是前端到后端，还是后端到前端，使用传统的方式都必须首先拿到
页面的Document元素，只有拿到了页面元素才能进行后续操作

MVVM（数据双向绑定）

M -> VM -> V

V -> VM -> M

请大家记住，要丢弃之前的思想（不要想着如何去拿到页面的元素），而是想着去操作数据！！！
数据是核心

注1：虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型
注2：学习Vue要转化思想：“不要在想着怎么操作DOM，而是想着如何操作数据！！！”

4.Vue导入

概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

语法：

<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>

五. Vue基本语法

5.1 插值表达式

概述：插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：{{ 变量名/对象.属性名 }}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ name }}</h1>
    </div>
    <script type="text/javascript">
        //创建vue对象
        var app = new Vue({
            //让vue接管div标签
            el:"#app",
            //定义数据,里边包含一个属性name,值为"Hello Vue"
            data:{
                name:"Hello Vue"
            }
        });
    </script>
</body>
</html>

6.显示数据(v-text和v-html)

概述：

v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.

当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。

插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.

语法：

v-text：<span v-text="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->
v-html：<span v-html="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->

区别：

v-text：把数据当作纯文本显示.
v-html：遇到html标签,会正常解析

7.数据双向绑定数据(v-model)

概述：

Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

注意：

1. 双向绑定, 只能绑定“文本框,单选按钮,复选框,文本域,下拉列表”等
2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型
3. 单个复选框, 绑定的是boolean类型
4. 多个复选框, 绑定的是数组
5. select单选对应字符串，多选对应也是数组

8.事件处理(v-on)

8.1.事件绑定(v-on)

概述：

Vue中也可以给页面元素绑定事件.

语法：

<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">点我</button>
<!--简化写法-->
<button @事件名="函数名/vue表达式">点我</button>

注意：

Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on

8.2.事件修饰符

概述：事件修饰符主要对事件的发生范围进行限定

语法：

<button @事件名.事件修饰符="函数名/vue表达式">点我</button>

分类：

.stop ：阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次

9.循环遍历(v-for)

9.1.遍历数组

语法：

v-for="item in items"
v-for="(item,index) in items"

items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始。

代码：

<div id="app">
	<ul>
        <li v-for="(user, index) in users">
        	{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
	</ul>
</div>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            users:[
                {"name":"张三","age":8,"gender":"男"},
                {"name":"李四","age":12,"gender":"女"},
                {"name":"王五","age":4,"gender":"男"}
            ]
        }
    });
</script>

9.2.遍历对象

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

value，对象的值
key，对象的键
index, 索引，从0开始

代码：

<div id="app">
	<ul>
        <li v-for="(value,key,index) in person">
        	{{index}}--{{key}}--{{value}}
        </li>
	</ul>
</div>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            person:{"name":"张三", "age":18, "address":"中国"}
        }
    });
</script>

9.3.key

概述：

:key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.

案例:

<div id="app">
    <button @click="add">添加</button>
    <ul>
        <li v-for="name in list">
            <input type="checkbox"> {{name}}
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: ["张三", "李四", "王五"]
        },
        methods: {
            add() {
                //注意这里是unshift,向数组的头部添加一个元素
                this.list.unshift("老刘");
            }
        }
    });
</script>

10.显示数据(v-bind)

概述：

v-bind的作用和插值表达式差不多, 只不过, v-bind主要用于动态设置标签的属性值

语法：

<!--完整写法-->
<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>
<!--简化写法-->
<标签名 :标签属性名="vue实例中的数据属性名"/>

案例：

<div id="app">
    <input type="button" :value="msg"/>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
           msg:"我是按钮"
        }
    });

</script>

11、Vue其他语法

11.1.计算属性

概述：计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用.

语法：

 var app = new Vue({
     el:"#app",
     //计算属性必须放在Vue的computed中
     computed:{
         //定义计算属性
         属性名(){
             return "返回值";
         }
     }
});

案例：

<div id="app">
    <h1>{{date}}</h1>
    <h1 v-text="date"></h1>
    <h1 v-html="date"></h1>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        computed:{
            //定义一个birth方法,该方法就是一个计算属性,可以在插值表达式中使用
            date(){
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth()+1;
                let day = date.getDay();
                return year + "-" + month + "-" + day;
            }
        }
    });
</script>

11.2.watch监听

概述：

watch可以监听简单属性值及其对象中属性值的变化.

watch类似于onchange事件,可以在属性值修改的时候,执行某些操作.

语法：

var app = new Vue({
    el:"#app",
    data:{
        message:"张三",
        person:{"name":"heima", "age":13}
    },
    //watch监听
    watch:{
        //监听message属性值,newValue代表新值,oldValue代表旧值
        message(newValue, oldValue){
        	console.log("新值：" + newValue + "；旧值：" + oldValue);
        },
        //监控person对象的值,对象的监控只能获取新值
        person: {
            //开启深度监控；监控对象中的属性值变化
            deep: true,
            //获取到对象的最新属性数据(obj代表新对象)
            handler(obj){
                console.log("name = " + obj.name + "; age=" + obj.age);
            }
        }
    }
});