vue简介和在html上的简单入门

最新推荐文章于 2024-05-12 16:53:08 发布

醉死梦红尘丶

最新推荐文章于 2024-05-12 16:53:08 发布

阅读量454

点赞数

分类专栏： vue 入门文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_33611030/article/details/108048809

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

入门

3 篇文章 0 订阅

订阅专栏

vue

文章目录

简介

前端渐进式javaScript框架
soc原则（关注点分离原则）只关心视图层
分层（m v vm）
核心：前后端分离

官方：cn.vuejs.org

结构

网络通信：axios/ajax
页面跳转：vue-router
状态管理：vuex（所有的东西统一管理）
vue-ui:ICE

科普：javaScript框架

jQuery:大家熟知的javaScript框架，优点是简化DOM操作，缺点DOM操作太频繁，影响前端性能
Angular:Google收购的前端框架，java开发，特点是MVC模式并且增加了模块化开发的理念，采用TypeScropt开发，缺点是版本迭代不合理
React:faceboot出品，一款高性能的js前端框架，特点是【虚拟DOM】，用于减少DOM操作，内容中模拟DOM操作，有效的提升了前端渲染效率，缺点是需要学习一门【jsx】语言
Axios:前段通信框架，因为vue就是为了处理DOM，所以不具备通信能力，所以需要额外使用通信框架，也可以使用AJAX

科普：ui框架

Ant-design:阿里巴巴出品，基于react的ui框架
ElementUI、iview、ice：饿了么出品基于vue的ui框架
bootstrap：twitter推出的一个用于前端开发的开源工具包
AmazeUI：又叫"妹子ui"一款HTML5跨屏前端框架

科普：构建工具

babel：js编译工具，主要用于浏览器不支持的es新特性，比如用于编译TypeScript
webPack：模块打包器，主要作用是打包、压缩、合并、及按顺序加载

科普：主流前端框架

iView:是一个强大的基于vue的ui的库，主要特点是移动端支持多
- 官网：iviewui.com
ElementUI：饿了么前端开源维护的Vue UI组件库，支持桌面端较多

MVVM模式

model、view、viewmodel

在这里插入图片描述

Model:模型层，在这里表示javaScript对象

View:视图层，在这里表示DOM（html操作的元素）

ViewModel:连接视图和数据的中间件，vue.js就是MVVM的VIewModel层的实现者

注意：在mvvm架构中，不允许数据和视图直接通信，只能通过VIewModel来通信于是就定义了一个Observer观察者

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到试图的变化，并能够通知数据发生的变化

所以他的核心就是实现DOM监听与数据绑定

第一个VUE

安装插件 idea =》设置 =》PIugins =》vue.js 安装重启

引入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

第一个实例

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

用法

绑定属性 v-bind:属性名=""

 <!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    {{ message }}

    <hr/>
    <div id="app">
    <span v-bind:title="message">
    哈哈哈哈哈哈
</span>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</html>

判断语句 v-if=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h1 v-if="message">yse</h1>
    <h1 v-else>no</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:true
        }
    })
</script>
</html>

for语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <li v-for="(item,index) in items"> {{item.message}}------{{index}}</li>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
           items:[
    {message:"aaa"},{message:"bbbb"},{message:"ccccc"}
           ]
        }
    })
</script>
</html>

监听事件用v-on指令监听dom事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="sayHi">aaa</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message:"哈哈哈哈"
        },
        methods:{//方法定义在method中
            sayHi:function () {
                alert(this.message);
            }
        }
    })
</script>
</html>

双向数据绑定使用 v-model 指令与表单元素进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    输入文本：<input type="text" v-model="message">
    <h1>{{message}}</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message:"哈哈哈哈"
        }
    })
</script>
</html>

vue它的7个属性

el属性
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
- 用来设置模板，会替换页面元素，包括占位符。
methods属性
- 放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
- 创建真正的Virtual Dom
computed属性
- 用来计算
watch属性
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值

组件

什么是组件

在这里插入图片描述

组件时可复用的vue实例，说白了就是一组可以重复使用的模板，跟jstl的自定义标签、Thymeleaf的th:fragment等框架有着异曲同工之妙，通常一个应用会以一颗嵌套的组件树的形式来组织：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <didi v-for="item in items" v-bind:item1="item"/>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    //定义一个vue组件component
    Vue.component("didi",{
        props:["item1"],//接收参数
       template:`<h1>{{item1}}</h1>`//组件
    });
    var app = new Vue({
        el: "#app",
        data: {
            items:["aaaaa","bbbbb","cccccc"]
        }
    })
</script>
</html>

Axios异步通信

什么是Axios

Axios是一个开源的可以在浏览器端和NodeJS的异步通信框架，她主要的作用就是实现了AJAX异步通信，其功能特点如下：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
客户端支持防御xsrf(跨站请求伪造)

中文文档：http://www.axios-js.com

为什么要使用Axios

由于vue.js是一个视图层框架并且作者(尤雨溪)严格遵守SoC(关注度分离原则)，所以vue.js并不包括AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为Vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架，少用jQuery，因为他操作Dom太频繁！

如何使用

导入js

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用钩子函数第一个axios

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        mounted(){
            axios.get("data.json").then(Response=>(console.log(Response.data)));
        }
    });
</script>
</html>

data.json 数据

{
  "name": "弟弟们",
  "url": "http://www.didimen.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "山西",
    "city": "太原",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com"
    },{
      "name": "bing",
      "url": "https://cn.bing.com/"
    },{
      "name": "baidu",
      "url": "https://www.baidu.com"
    }
  ]
}

vue生命周期

在这里插入图片描述

vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是vue的生命周期。通俗说就是vue实例从创建到销毁的过程，就是生命周期。

在vue的整个生命周期中，他提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应中的this直接指向的是vue的实例。

解决闪烁问题

    <!--解决闪烁问题-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>

<div id="app" v-cloak>
    <div>
        {{info.name}}
    </div>

vue:计算属性、内容发布、自定义事件

什么是计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先它是一个属性其次这个属性有计算的能力（计算是动词），这里的计算就是一个函数；简单说，他就是一个能够将计算结果缓存起来的属性（将行为装换成了静态的属性），仅此而已；可以想象成缓存内存中运行（虚拟DOM）

计算属性：methods，computed方法名不能重名，重命之后只会调用methods中

methods执行需要带括号，computed执行不需要带括号

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--解决闪烁问题-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <p>currentTime1:{{currentTime2}}</p>
    <p>currentTime1:{{currentTime1()}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message:"aaa"
        },
        methods:{
            currentTime1:function () {
                    return Date.now();//返回一个时间戳
            }
        },
        computed:{//计算属性：methods，computed方法名不能重名 ，重命之后只会调用methods中
            currentTime2:function () {
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</html>

重点：计算属性的主要特性就是为了将不经常变化的计算结果缓存起来，节约系统开销

插槽

可以应用在组合组件场景中（开了一个口方便之后的插入组件）

ntTime1:function () {
return Date.now();//返回一个时间戳
}
},
computed:{//计算属性：methods，computed方法名不能重名，重命之后只会调用methods中
currentTime2:function () {
this.message;
return Date.now();//返回一个时间戳
}
}
});

```

重点：计算属性的主要特性就是为了将不经常变化的计算结果缓存起来，节约系统开销

插槽

可以应用在组合组件场景中（开了一个口方便之后的插入组件）

醉死梦红尘丶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue简介和在html上的简单入门

vue文章目录vue简介结构科普：javaScript框架科普：ui框架科普：构建工具科普：主流前端框架MVVM模式注意：在mvvm架构中，不允许数据和视图直接通信，只能通过VIewModel来通信于是就定义了一个Observer观察者第一个VUE用法绑定属性 v-bind:属性名=""判断语句 v-if=""for语句监听事件用v-on指令监听dom事件双向数据绑定使用 v-model 指令与表单元素进行绑定vue它的7个属性组件什么是组件Axios异步通信什么是Axios为什么要使用Ax
复制链接

扫一扫