文章目录
1 VUE.JS案例复习
1.1 入门案例
首先创建结构目录， 并导入相关依赖包，便于后续完成前端代码的编写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门案例</title>
</head>
<body>
<div id="app">
<!-- 利用差值表达式 获取数据 -->
{{msg}}
<!-- v-text标签 只有页面渲染数据完成之后,才会展现
只能使用在展现标签中
-->
<p v-text="msg"></p>
</div>
<!-- 1.引入vue.js -->
<script src="../js/vue.js"></script>
<!-- 2.定义vue js -->
<script>
new Vue({
//数据挂载
el: "#app",
data: {
msg: "VUE的入门案例"
}
})
</script>
</body>
</html>
在入门案例中，我们使用俩种方式展示了挂载点中的信息，一种是利用插值表达式进行获取数据并展示，另一种是通过v-text标签进行数据的获取并展示，在前序前端知识的学习中我们知道，当页面信息较多，页面并没有渲染完成时，插值表达式也会显示到页面中，用户将看到未渲染完的代码片段，这对于用户体验是十分不友好的，使用v-text标签可以很好的避免这个问题，但要注意的是，其只能使用展现标签中，如p标签等，即直接可以实现页面输出的标签，并不能使用在如input<>标签的操作标签中。
1.2 点击事件用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击事件操作</title>
</head>
<body>
<div id="app">
<!-- 点击事件的案例
1.事件绑定使用基本语法 v-on:
2.简化写法 v-on: 使用@符号代替
-->
{{num}} <br>
<!-- <button v-on:click="">自增</button> -->
<button @click="addNum">自增</button>
</div>
<script src="../js/vue.js"></script>
<script>
/*
JS中的变量名称
1. var 最常规的变量声明,没有作用域
2. let 代替var 有作用域
3. const 定义常量
*/
const app = new Vue({
el: "#app",
data: {
num: 100
},
methods:{
addNum(){
//自增
this.num ++
}
}
})
</script>
</body>
</html>
事件绑定使用v-on语法进行，可绑定点击，划过等多种操作，也可以使用@代替v-on进行简化语法操作。
var关键字是在JS代码中声明变量最常用的变量类型，我们在前序学习中了解到，js是一种弱类型的语言，所以其声明变量的关键字最关键的作用就是限制其作用域。关键字var声明的变量不限定其作用域，在所有位置都可以直接使用，在实际项目开发中，这样容易导致变量名重名，所以我们建议使用let关键字声明变量，let关键字表明当前的变量为局部变量，当然也可以使用const关键字定义常量。
1.3 双向数据绑定
1.3.1 页面案例测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
<h1>测试双向数据绑定</h1>
<!-- 定义一个输入框 -->
<!-- 双向数据绑定的规则:
1. data中的数据变化,则页面数据变化.
2. 页面数据变化,则data中的数据变化
-->
用户名: <input type="text" v-model="msg"/>
{{msg}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "admin1111111"
},
methods:{
}
})
</script>
</body>
</html>
1.3.2 双向数据绑定的原理
设计模型: MVVM
模块说明:
- M Model 代表数据. 大概率事件 代表 data中的数据.
- VM ViewModel 视图模型层 在内部进行计算 在页面进行展现
- V View 视图层 用户看到的页面展现效果.
内存原理图:
总结: 虚拟DOM是实现数据实时更新的重要的组件. 内存数据变化.则页面数据实时变化.
双向数据绑定，核心关键就在虚拟DOM上，虚拟DOM会接收输入的数据，并将数据实时传输到页面，帮助自动完成了页面刷新的功能。
1.4 分支结构用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分支结构-IF</title>
</head>
<body>
<div id="app">
<h1>分支结构测试</h1>
请输入分数: <input type="text" v-model="score" />
<!--
判断原则: 如果判断为true 则展现标签
-->
<p v-if="score > 100">优秀过头了吧！！</p>
<p v-else-if="score >= 90">优秀</p>
<p v-else-if="score >= 80">良好</p>
<p v-else-if="score >= 70">中等</p>
<p v-else-if="score >= 0">再接再厉</p>
<p v-else>请输入分数</p>
<!--
用户输入考试成绩,自动获取评级.
>=90 优秀
>=80 良好
>=70 中等
低于70 再接再厉
-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 'null'
},
methods:{
}
})
</script>
</body>
</html>
1.5 循环遍历结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环遍历结构</title>
</head>
<body>
<div id="app">
<h1>循环结构</h1>
<h2>------------------获取数组的值----------------</h2>
<!-- 指定午饭数组,之后循环遍历输出 -->
<h3 v-for="item in lunch">{{item}}</h3>
<h2>------------------获取数组的值与下标----------------</h2>
<!-- 获取数组下标 -->
<h3 v-for="(item,index) in lunch">下标{{index}}的值为{{item}}</h3>
<h2>------------------获取数组对象的值----------------</h2>
<h1>遍历数组对象</h1>
<p v-for="user in list">
id号: {{user.id}} | 名称: {{user.name}}
</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
lunch: ['宫保鸡丁','爆炒腰花','土豆片','土豆丝','土豆泥'],
list: [
{id: 1, name: "张三"},
{id: 2, name: "李四"},
{id: 3, name: "王五"}
]
},
methods:{
}
})
</script>
</body>
</html>
2. VUE生命周期函数
2.1 生命周期函数图例
生命周期函数的目的: 控制整个vue对象的, 在各个阶段都可以对VUE进行控制.
如果你配置了生命周期方法，生命周期函数都是自动调用的，VUE3对VUE2的销毁阶段生命周期进行了更新，有需要的可以自行到VUE官网查看其区别。
2.2 VUE生命周期函数
其生命周期共可以分为4类
第一类: 对象的初始化阶段
- beforeCreate：在组件实例初始化完成之后立即调用。
- created：在组件实例处理完所有与状态相关的选项后调用。
- beforeMount：在组件被挂载之前调用。
- mounted：在组件被挂载之后调用。
第二类: 数据修改阶段
- beforeUpdate：在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
- updated：在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
第三类: 对象的销毁阶段
- beforeUnmount ：在一个组件实例被卸载之前调用。
- unmounted：在一个组件实例被卸载之后调用。
2.3 初始化时知识点
- beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
解释: 创建了一个VUE的对象,只是还没有加载其中的属性.只是一个空对象. - created
在实例创建完成后被立即同步调用
解释: VUE对象开始填充数据. 表示配置完成. - beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
解释: 对象根据已经配置的内容,在指定的区域开始加载数据.(属性的值,保存到内存中) - mounted
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
解释: 在指定的区域中,渲染页面. (为页面填充数据), 页面初始化完成.
2.4 生命周期函数案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue生命周期函数</title>
</head>
<body>
<div id="app">
<h3 v-text="msg"></h3>
<button @click="destroy">销毁</button>
</div>
<!--引入js函数类库 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
msg: "vue生命周期"
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate(){
console.log("beforeCreate")
},
//在实例创建完成后被立即调用
created(){
console.log("created")
},
//在挂载开始之前被调用：相关的 render 函数首次被调用。
beforeMount(){
console.log("beforeMount")
},
//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
mounted(){
console.log("mounted")
},
//数据更新时调用，发生在虚拟 DOM 打补丁之前
beforeUpdate(){
console.log("beforeUpdate")
},
//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
updated(){
console.log("updated")
},
//实例销毁之前调用。在这一步，实例仍然完全可用
beforeDestroy(){
console.log("beforeDestroy")
},
//实例销毁后调用。
destroyed(){
console.log("destroyed")
},
methods:{
destroy(){
this.$destroy()
}
}
})
</script>
</body>
</html>
我们可以在浏览器的控制台中修改数据，触发其修改的生命周期函数。
539
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
