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 id="app">
	<input type="text" v-model="message" />
	{{message}}
</div>

插值表达式：

Mustache”语法 (双大括号)：

• 形式：{{表达式}}；
• 内容可以是：
  • 变量；
  • 三元运算符；
  • 函数调用；
  • 算术运算；
• 缺点：无法识别字符串中的HTML标签；

v-html指令：

• 形式：<span v-html="表达式"></span>
• 内容可以是：
  • 不带HTML标签的字符串
  • 带HTML标签的字符串
• 可以识别字符串中的HTML标签

指令:

• 指令：HTML标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。
• 常用指令：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href，css样式等，使用style需要加{}，v-bind:style="{display:变量名}"	:
v-model	在表单元素上创建双向数据绑定	=
v-on	为HTML标签绑定事件	:
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染	=
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染	=
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染	=
v-show	根据条件展示某元素，区别在于切换的是display属性的值	=
v-for	列表渲染，遍历容器的元素或者对象的属性	=

生命周期：

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

<script>
	new Vue({
		el: "#app",	//vue接管区域;
  		data:{		//数据(属性/变量)的定义
            属性名: 属性值
        },
        mounted(){
         	console.log("Vue挂载完毕,发送请求获取数据")  
        },
    	methods:{	//方法的定义
            方法名: function(){
                //方法体
            }
        }
	})
</script>