百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

深入浅出Vue,全网最全笔记(深入浅出vue.js pdf)

zhezhongyun 2025-04-11 09:45 28 浏览

一、Vue.js的基本认识

1、官网

英文官网:https://vuejs.org

中文官网:https://cn.vuejs.org

2、简介

渐进式JavaScript 框架(核心 + 扩展)

作者:尤雨溪(一位华裔前 Google 工程师)

作用:动态构建用户界面

3、优点

体积小:压缩后33K

更高的运行效率:基于虚拟dom

双向数据绑定:不操作dom,关注业务逻辑

生态丰富、学习成本低:入门容易,学习资料多

二、第一个Vue应用

1、引入脚本库

创建文件夹05-vue,复制vue.js,创建 01-hello.html,创建<script>标签


<script src="vue.js"></script>

2、数据绑定


    
    
{{ message }}
<script src="vue.js"></script> <script> // 创建一个vue对象 // Vue构造函数的参数是一个配置对象,对象中的key是一些固定的关键字 new Vue({ el: '#app', //绑定vue作用的范围,用id选择器选中div data: { //在data中注册变量,用于视图中的数据绑定 message: 'Hello Vue!', } }) </script>

这就是声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

data() {
    return {
        message: 'Hello Vue!'
    }
}

也可以写成

data: {
    message: 'Hello Vue!'
}


三、数据绑定指令

1、数据绑定指令

step1:创建 02-数据绑定指令.html

step2:引入脚本,创建Vue对象

 <script src="vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        company: '京东',
        site: 'http://www.jd.com'
      }
    })
</script>

step3:使用数据绑定指令做数据渲染


v-bind: 指令的简写形式



{{company}}

2、双向数据绑定指令

step1:创建 03-双向数据绑定指令.html

step2:将02的代码复制到03

step3:将 v-bind:value 修改成 v-model





什么是双向数据绑定?

  • 当数据发生变化的时候,视图也会跟着发生变化
    • 数据模型发生了改变,会直接显示在页面上
  • 当视图发生变化的时候,数据也会跟着同步变化
    • 用户在页面上的修改,会自动同步到数据模型中去

注意:v-model只用于用户交互组件中


四、理解MVVM

1、安装Vue.js devtools

  • 离线安装

先解压Vue.jsDevtools

然后在Chrome中加载已解压的扩展程序

  • 在线安装

先离线安装安装谷歌访问助手

然后在Chrome网上应用商店,搜索Vue.js devtools扩展程序,并安装

  • 使用Vue插件

2、MVVM

五、绑定事件监听

创建 04-绑定事件监听.html

使用 v-on 进行事件绑定,v-on:click 表示处理鼠标点击事件,事件调用的方法定义在 vue 对象声明的 methods 节点中


  
<script src="vue.js"></script> <script> new Vue({ el: '#app', data: { company: '京东' }, methods: { study(){ alert('我要去' + this.company + '学习') } } }) </script>

v-on 指令的简写形式



六、计算属性


创建 05-计算属性.html

例1:模板中使用js表达式


    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello',
            },
            
        })
</script>


模板表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会难以维护。


原始值: {{ message }}

反转消息: {{ message.split('').reverse().join('') }}


所以,对于任何复杂逻辑,你都应当使用计算属性

例2:使用计算属性

computed: {
    reversedMessage () {
        console.log('计算属性执行')
        return this.message.split('').reverse().join('')
    }
}

反转消息: {{ reversedMessage }}

例3:使用方法


methods:{
    reversed () {
        console.log('方法执行')
        return this.message.split('').reverse().join('')
    }
}


反转消息: {{ reversed() }}


计算属性缓存 vs 方法

看起来计算属性和方法能完成相同的功能,那么他们有什么区别呢?

  • 计算属性基于缓存
  • 方法将总会再次执行

反转消息: {{ reversedMessage }}

反转消息: {{ reversedMessage }}

反转消息: {{ reversed() }}

反转消息: {{ reversed() }}


计算属性的例子:计算属性的单向绑定和双向绑定

创建06-计算用户全名.html


    
姓:
名:
姓名1(单向):
姓名2(双向):
<script src="vue.js"></script> <script> new Vue({ el: '#app', data: { firstName: 'Helen', lastName: 'Yao', // fullName: 'Helen Yao', }, computed: { fullName1() { console.log('计算fullName1') return this.firstName + ' ' + this.lastName }, fullName2: { get() { console.log('计算fullName2') return this.firstName + ' ' + this.lastName }, //当给fullName2指定新值时自动调用:实现双向绑定 set(value) { console.log('fullName2 的 setter') const names = value.split(' ') this.firstName = names[0] this.lastName = names[1] }, }, }, }) </script>

七、监视

创建 07-监视.html


    
姓:
名:
姓名:
<script src="vue.js"></script> <script> new Vue({ el: '#app', data: { firstName: 'Helen', lastName: 'Yao', // fullName: 'Helen Yao', }, watch: { //当firstName改变时自动调用 firstName(value) { console.log('watch firstName') this.fullName = value + ' ' + this.lastName console.log(this.fullName) }, //当lastName改变时自动调用 lastName(value) { console.log('watch lastName') this.fullName = this.firstName + ' ' + value } }, }) </script>

八、条件渲染


创建 08-条件渲染.html


<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok: false
        }
    })
</script>

点击复选框,显示或隐藏协议内容。分别使用 v-ifv-show 实现

同意许可协议

yes.

no.

yes.

no.

九、列表渲染

创建 09-列表渲染.html

<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: [
                { username: 'helen', age: 18 },
                { username: 'peter', age: 28 }
            ]
        }
    })
</script>

v-for:列表循环指令

  • {{index}} {{item.username}} {{item.age}}


十、实例生命周期

创建 10-实例的生命周期.html

{{ message }}

分析生命周期相关方法的执行时机

<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '床前明月光'
        },
        // 页面在内存中已经初始化完毕:
        // 可以操作 data 中的数据、调用methods中的方法
        // 但是数据尚未被渲染到页面中:用户看不见
        created() {
            console.log('created')
            //可以操作 data 中的数据
            console.log(this.message)
            //可以调用methods中的方法
            this.show()
            //无法取出dom节点取数据,说明用户无法在浏览器中看见这个内容
            console.log(document.getElementById('h3').innerText)
        },
        // 数据已经被渲染到页面中
        mounted() { // 第四个被执行的钩子方法
            console.log('mounted')
            //可以取出dom节点取数据,说明用户已经在浏览器中看见内容
            console.log(document.getElementById('h3').innerText)
        },
        methods: {
            show() {
                console.log('show方法被调用')
            }
        },
    })
</script>

综合案例

创建:综合案例.html


  
序号 姓名 年龄 email
{{index + 1}} {{item.name}} {{item.age}} {{item.email}}
<script src="vue.js"></script> <script src="axios.js"></script> <script> new Vue({ el: '#app', data() { return { userList: [], } }, created() { this.showList() }, methods: { showList() { //使用自定义配置 const request = axios.create({ baseURL: 'http://localhost:8080', //url前缀 timeout: 1000, //超时时间 headers: { token: 'helen123456' }, //携带令牌 }) // 请求拦截器 request.interceptors.request.use( function (config) { // 在发送请求之前做些什么,例如:在请求头中携带一个令牌 config.headers.token = 'helen123456' return config }, function (error) { // 对请求错误做些什么 return Promise.reject(error) } ) // 添加响应拦截器 request.interceptors.response.use( function (response) { // 对响应数据做点什么,例如:使用response.data替代response,简化前端拿到的数据结果 return response.data }, function (error) { // 对响应错误做点什么 return Promise.reject(error) } ) //基于promise request({ method: 'get', url: '/user/list', }) .then((response) => { console.log('获取数据成功', response) this.userList = response }) .catch((error) => { console.log('获取数据失败', error) }) }, }, }) </script>

相关推荐

激光手术矫正视力对眼睛到底有没有伤害?

因为大家询问到很多关于“基质不能完全愈合”的问题,有必要在这里再详细解释一下。谢谢@珍惜年少时光提出的疑问:因为手头刚好在看组织学,其中提到:”角膜基质约占角膜的全厚度的90%,主要成分是胶原板层,...

OneCode核心概念解析——View(视图)

什么是视图?在前面的章节中介绍过,Page相关的概念,Page是用户交互的入口,具有Url唯一性。但Page还只是一个抽象的容器,而View则是一个具备了具体业务能力的特殊的Page,它可以是一个...

精品博文图文详解Xilinx ISE14.7 安装教程

在软件安装之前,得准备好软件安装包,可从Xilinx官网上下载:http://china.xilinx.com/support/download/index.html/content/xilinx/z...

卡片项目管理(Web)(卡片设计的流程)

简洁的HTML文档卡片管理,简单框架个人本地离线使用。将个人工具类的文档整理使用。优化方向:添加图片、瀑布式布局、颜色修改、毛玻璃效果等。<!DOCTYPEhtml><html...

GolangWeb框架Iris项目实战-JWT和中间件(Middleware)的使用EP07

前文再续,上一回我们完成了用户的登录逻辑,将之前用户管理模块中添加的用户账号进行账号和密码的校验,过程中使用图形验证码强制进行人机交互,防止账号的密码被暴力破解。本回我们需要为登录成功的用户生成Tok...

sitemap 网站地图是什么格式?有什么好处?

sitemap网站地图方便搜索引擎发现和爬取网页站点地图是一种xml文件,或者是txt,是将网站的所有网址列在这个文件中,为了方便搜索引擎发现并收录的。sitemap网站地图分两种:用于用户导...

如何在HarmonyOS NEXT中处理页面间的数据传递?

大家好,前两天的Mate70的发布,让人热血沸腾啊,不想错过,自学的小伙伴一起啊,今天分享的学习笔记是关于页面间数据伟递的问题,在HarmonyOSNEXT5.0中,页面间的数据传递可以有很多种...

从 Element UI 源码的构建流程来看前端 UI 库设计

作者:前端森林转发链接:https://mp.weixin.qq.com/s/ziDMLDJcvx07aM6xoEyWHQ引言由于业务需要,近期团队要搞一套自己的UI组件库,框架方面还是Vue。而业界...

jq+ajax+bootstrap改了一个动态分页的表格

最近在维护一个很古老的项目,里面是用jq的dataTable方法实现一个分页的表格,不过这些表格的分页是本地分页。现在想要的是点击分页去请求数据。经过多次的修改,以失败告终。分页的不准确,还会有这个错...

学习ES6- 入门Vue(大量源代码及笔记,带你起飞)

ES6学习网站:https://es6.ruanyifeng.com/箭头函数普通函数//普通函数this指向调用时所在的对象(可变)letfn=functionfn(a,b){...

青锋微服务架构之-Ant Design Pro 基本配置

青锋(msxy)-Gitee.com1、更换AntDesignPro的logo和名称需要修改文件所在位置:/config/defaultSetting.jsconstproSett...

大数据调度服务监控平台(大数据调度服务监控平台官网)

简介SmartKettle是针对上述企业的痛点,对kettle的使用做了一些包装、优化,使其在web端也能具备基础的kettle作业、转换的配置、调度、监控,能在很大一定程度上协助企业完成不同...

Flask博客实战 - 实现博客首页视图及样式

本套教程是一个Flask实战类教程,html/css/javascript等相关技术栈不会过多的去详细解释,那么就需要各位初学者尽可能的先去掌握这些基础知识,当然本套教程不需要你对其非常精通,但最起码...

Web自动化测试:模拟鼠标操作(ActionChains)

在日常的测试中,经常会遇到需要鼠标去操作的一些事情,比如说悬浮菜单、拖动验证码等,这一节我们来学习如何使用webdriver模拟鼠标的操作首页模拟鼠标的操作要首先引入ActionChains的包fro...

DCS F-16C 中文指南 16.9ILS仪表降落系统教程

10–ILS教程我们的ILS(仪表着陆进近)将到达Batumi巴统机场。ILS频率:110.30跑道航向:120磁航向/126真航向无线电塔频率:131.0001.设置雷达高度表开关打开(前)并...