JZTXT

2.前端框架(Vue)

发布时间 2023-10-11 23:56:08作者: 回家太晚太悲催

前端框架(Vue)

Vue

概念;

  • vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写；
  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上；
  • 官网：https://v2.vuejs.org/
  • 框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效；

定义：

  • 新建HTML页面，引入Vue.js文件；
<script src="js/vue.js"></script>
  • 在JS代码区域，创建Vue核心对象，定义数据模型
<script>
	new Vue({
		el: "#app",	//vue接管区域;
  		data:{		//数据(属性/变量)的定义
            属性名: 属性值
        },
    	methods:{	//方法的定义
            方法名: function(){
                //方法体
            }
        }
	})
</script>
  • 编写视图;
<div>
	<input type="text" v-model="message" />
	{{message}}
</div>

插值表达式：

  • 形式：{{表达式}}；
  • 内容可以是：
    • 变量；
    • 三元运算符；
    • 函数调用；
    • 算术运算；

指令:

  • 指令：HTML标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。
  • 常用指令：
指令 作用
v-bind 为HTML标签绑定属性值，如设置 href，css样式等 :
v-model 在表单元素上创建双向数据绑定 =
v-on 为HTML标签绑定事件 :
v-if 条件性的渲染某元素，判定为true时渲染，否则不渲染 =
v-else-if 条件性的渲染某元素，判定为true时渲染，否则不渲染 =
v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染 =
v-show 根据条件展示某元素，区别在于切换的是display属性的值 =
v-for 列表渲染，遍历容器的元素或者对象的属性 =

生命周期：

  • 生命周期：指一个对象从创建到销毁的整个过程；
  • 一共有八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）；
  • 重点：mounted：挂载完成；