Vue 学习笔记(2,Java编程视频教程

不掉发的花花 2021-08-08 18:12:58
java 后端 程序员


</head>

<body>

<div id=“app”>

<span id="sp"> {{ msg }} </span>
<input type="button" value="改变data的值" @click="changeData">

</div>

<!-- 引入Vue -->

<script src=“ https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<script> const app = new Vue({

 el: "#app",
data: {
msg: "hello Vue.js!",
},
methods: {
changeData() {
// this.msg = "Vue.js niubility!";
this.msg = Math.random();
}
},
// ====================初始化阶段====================
// 1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
beforeCreate() {
console.log("beforeCreate: " + this.msg);
},
// 2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
created() {
console.log("created:" + this.msg);
},
// 3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
beforeMount() {
console.log("beforeMount: " + document.getElementById("sp").innerText);
},
// 4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
mounted() {
console.log("Mounted: " + document.getElementById("sp").innerText);
},
// ====================运行阶段====================
// 5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
beforeUpdate() {
console.log("beforeUpdate-vue: " + this.msg);
console.log("beforeUpdate-dom: " + document.getElementById("sp").innerText);
},
// 6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 页面中数据已经和data中数据一致
updated() {
console.log("updated-vue: " + this.msg);
console.log("updated-dom: " + document.getElementById("sp").innerText);
},
// ====================销毁阶段====================
// 7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
beforeDestory() { },
// 8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
destoryed() { }
}); </script>

</body>

</html>


![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416908531743.jpg)
[](
)Vue 中组件(Component)
=====================================================================================
**组件作用**:用来减少 Vue 实例对象中代码量,日后在使用 Vue 开发过程中,可以根据不同业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用 Vue 进行开发时页面管理,方便开发人员维护。
[](
)全局组件的开发
--------------------------------------------------------------------------
全局组件注册给 Vue 实例,可以在任意 Vue 实例的范围内使用该组件。
全局组件的开发:

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.

<!DOCTYPE html>

<html>

<head>

<meta charset=‘utf-8’>

<title>全局组件的开发</title>

</head>

<body>

<div id=“app”>

<!-- 使用全局组件 -->
<login></login>
<!-- 使用局部组件 -->
<user-login></user-login>

</div>

<script src=“ https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<script> // 开发全局组件

// 参数1: 组件名称
// 参数2: 组件配置对象 template:用来书写组件的html代码(注意:在template中必须存在一个容器)
Vue.component('login', {
template : '<div>用户登录</div>'
});
// 驼峰命名法的组件会被特殊处理, userLogin 使用时必须写成 user-login
Vue.component('userLogin', {
template : '<div><input type="button" value="登录"></div>'
});
const app = new Vue({
el: "#app",
data: {},
methods: {},
}); </script>

</body>

</html>


![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416908113583.jpg)
[](
)局部组件的开发
--------------------------------------------------------------------------
通过将组件注册给对应 Vue 实例中一个 `components` 属性来完成组件注册,这种方式不会对 Vue 实例造成累加。
第一种开发方式:

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

<!DOCTYPE html>

<html>

<head>

<meta charset=‘utf-8’>

<title>局部组件的开发</title>

</head>

<body>

<div id=“app”>

<login></login>
<login></login>
<login></login>

</div>

<script src=“ https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<script> // 定义变量用来保存模板配置对象

const login = {
template: '<div><h2>用户登录</h2></div>'
};
const app = new Vue({
el: "#app",
data: {},
methods: {},
components: { // 局部组件
login: login // 注册局部组件
}
}); </script>

</body>

</html>


第二种开发方式:

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

<!DOCTYPE html>

<html lang=“en” xmlns:v-on=“ http://www.w3.org/1999/xhtml”>

<head>

<meta charset=“UTF-8”>

<title>局部组件的开发2</title>

</head>

<body>

<div id=“app”>

<login></login>
<login></login>
<login></login>

</div>

<!–声明局部组件模板 template标签 注意:在 Vue 实例作用范围外声明–>

<template id=“loginTemplate”>

<h2>用户登录</h2>

</template>

<script src=“ https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<script> // 定义变量用来保存模板配置对象

const login = { // 具体局部组件名称
template: '#loginTemplate' // 定义template标签选择器即可
};
const app = new Vue({
el: "#app",
data: {},
methods: {},
components: { // 局部组件
login: login // 注册局部组件
}
}); </script>

</body>

</html>


![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416908430469.jpg)
[](
)组件中 props 的使用
================================================================================
`props` 用来给组件传递相应静态数据或者是动态数据;
[](
)在组件上声明静态数据传递给组件内部
------------------------------------------------------------------------------------

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

<!DOCTYPE html>

<html lang=“en” xmlns:v-on=“ http://www.w3.org/1999/xhtml”>

<head>

<meta charset=“UTF-8”>

<title>在局部组件中使用props接收静态数据</title>

</head>

<body>

<div id=“app”>

<!--使用组件, 通过组件进行静态数据传递-->
<login user-name="zhenyu" age="20"></login>

</div>

<script src=“ https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<script> // 声明一个组件模板配置对象

let login = {
template: '<div><h2>欢迎: {{ userName }} 年龄: {{ age }}</h2></div>',
props: ['userName', 'age'] // props: 用来接收使用组件时通过组件标签传递的数据
}
const app = new Vue({
el: "#app",
data: {},
methods: {},
components: {
login // 组件注册
}
}); </script>

</body>

</html>


![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416909341667.jpg)
[](
)在组件上声明动态数据传递给组件内部
------------------------------------------------------------------------------------

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

<!DOCTYPE html>

<html lang=“en” xmlns:v-on=“ http://www.w3.org/1999/xhtml”>

<head>

<meta charset=“UTF-8”>

<title>在局部组件中使用prop接收动态数据</title>

</head>

<body>

<div id=“app”>

<!--使用组件接收 Vue 实例中的动态数据-->
<!--使用 v-bind 形式将数据绑定到 Vue 实例中 data 属性, data 属性发生变化, 组件内部数据跟着变化-->
<login v-bind:name="username" :age="userage"></login>

</div>

<script src=“ https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<script> const login = {

 template: '<div><h2>欢迎: {{ name }} 年龄: {{ age }}</h2></div>',
props: ['name', 'age']
}
const app = new Vue({
el: "#app",
data: {
username: "zhenyu",
userage: 25
},
methods: {},
components: {
login // 注册组件
}
}); </script>

</body>

</html>


![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628416909930747.jpg)
[](
)props 的单向数据流
-------------------------------------------------------------------------------
所有的 props 都使得其父子 props 之间形成了一个**单向下行绑定**:父级 props 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
# **读者福利**
**由于篇幅过长,就不展示所有面试题了,感兴趣的小伙伴**
**关注+点赞后,点击这里获取完整面试题(含答案)!**
![35K成功入职:蚂蚁金服面试Java后端经历!「含面试题+答案」](https://s2.51cto.com/images/20210808/1628416909345884.jpg)
![35K成功入职:蚂蚁金服面试Java后端经历!「含面试题+答案」](https://s2.51cto.com/images/20210808/1628416910985723.jpg)
![35K成功入职:蚂蚁金服面试Java后端经历!「含面试题+答案」](https://s2.51cto.com/images/20210808/1628416910409141.jpg)
**更多笔记分享**
![35K成功入职:蚂蚁金服面试Java后端经历!「含面试题+答案」](https://s2.51cto.com/images/20210808/1628416910569440.jpg)![](https://s2.51cto.com/images/20210808/1628416910678066.jpg)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
版权声明
本文为[不掉发的花花]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_15300844/3313965

  1. HTML + CSS + JavaScript to achieve cool Fireworks (cloud like particle text 3D opening)
  2. HTML + CSS + JavaScript realizes 520 advertising love tree (including music), which is necessary for programmers to express themselves
  3. Solve the problem of Web front-end deployment server (it can be deployed online without a server)
  4. HTML + CSS + JS make wedding countdown web page template (520 / Tanabata Valentine's Day / programmer advertisement)
  5. What else can driverless minibus do besides "Park connection"?
  6. Cloud native leads the era of all cloud development
  7. NRM mirror source management tool
  8. Bring it to you, flex Jiugong
  9. Lolstyle UI component development practice (II) -- button group component
  10. Deconstruction assignment in ES6
  11. Luo 2 peerless Tang clan was officially launched. The official gave a key point, and the broadcast time was implied
  12. 20初识前端HTML(1)
  13. 当新零售遇上 Serverless
  14. 20 initial knowledge of front-end HTML (1)
  15. When new retail meets serverless
  16. [golang] - go into go language lesson 5 type conversion
  17. [golang] - go into go language lesson 6 conditional expression
  18. HTML5(八)——SVG 之 path 详解
  19. HTML5 (8) -- detailed explanation of SVG path
  20. 需要开通VIP以后页面内容才能复制怎么办?控制台禁用javascript即可
  21. Web前端|CSS入门教程(超详细的CSS使用讲解,适合前端初学者)
  22. 实践积累 —— 用Vue3简单写一个单行横向滚动组件
  23. Serverless 全能选手,再下一城
  24. What if you need to open a VIP to copy the page content? Just disable JavaScript on the console
  25. Web front end | CSS introductory tutorial (super detailed CSS explanation, suitable for front-end beginners)
  26. Practice accumulation - write a single line horizontal scroll component simply with vue3
  27. Dili Reba is thin again. She looks elegant and high in a strapless hollow skirt, and her "palm waist" is beautiful to a new height
  28. Serverless all-round player, next city
  29. The difference between MySQL semi synchronous replication and lossless semi synchronous replication
  30. Vue表单设计器的终极解决方案
  31. The ultimate solution for Vue form designer
  32. Nginx从理论到实践超详细笔记
  33. Yu Shuxin's red backless swimsuit is split to the waist and tail, with a concave convex figure and excessive color matching, and his face is white to dazzling
  34. Nginx ultra detailed notes from theory to practice
  35. 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
  36. typecho全站启用https
  37. CCTV has another popular employee. The off-site interpretation is very professional, and the appearance ability is no less than that of Wang Bingbing
  38. [animation Xiaole | CSS] 086. Cool water wave loading transition animation
  39. Enable HTTPS in Typecho
  40. 50天用JavaScript完成50个web项目,我学到了什么?
  41. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  42. What have I learned from completing 50 web projects with JavaScript in 50 days?
  43. "My neighbor doesn't grow up" has hit the whole network. There are countless horse music circles, and actor Zhou Xiaochuan has successfully made a circle
  44. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  45. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  46. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  47. 30 + women still wear less T-shirts and jeans. If they wear them like stars, they will lose weight
  48. 数栈技术分享前端篇:TS,看你哪里逃~
  49. Several stack technology sharing front end: TS, see where you escape~
  50. 舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践
  51. Abandon the landing practice of Kong and nginx, Apache apisik on the baas platform of fun chain technology
  52. 浪迹天涯king教你用elementui做复杂的表格,去处理报表数据(合并表头,合并表体行和列)
  53. 前端HTML两万字图文大总结,快来看看你会多少!【️熬夜整理&建议收藏️】
  54. Wandering around the world king teaches you to use elementui to make complex tables and process report data (merge header, merge table body rows and columns)
  55. 路由刷新数据丢失 - vuex数据读取的问题
  56. Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]
  57. Route refresh data loss - vuex data reading problem
  58. Systemctl系统启动Nginx服务脚本
  59. Systemctl system startup nginx service script
  60. sleepless