2.前端框架(Vue)

前端框架(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- 前缀的特殊属性，不同指令具有不同含义。
• 常用指令：

生命周期：

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