前端框架基础——Vue.js

目录

一、第一个 Vue 项目

1. 创建 Vue

2. 详细解读

二、Vue 指令

1.v-text、v-html

2.v-on

3.v-model

4.v-show、v-if

5.v-bind

6.v-for

三、Vue 实例生命周期

---

         Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的 渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

        那什么是框架呢？

        他其实就是在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率。JavaScript 就属于前端的原生框架，而 Vue.js 也是一个 js 框架，并不是代替 js 的，只是对 js 的封装。

一、第一个 Vue 项目

这里我们可以参考 Vue 官网：https://v2.cn.vuejs.org/v2/guide/

1. 创建 Vue

        首先我们创建一个普通的 Vue 项目

        删除 js 文件夹里的 v3.2.8 文件夹

        点击 index.html 文件（新手推荐在 html 文件中通过如下方式引入 Vue），删除其

和标签中所有多余的内容，随后在 head 标签中添加一下

        随后我们进入上面提供的 Vue 官网，复制以下模版代码到

标签中

        {{message}}

        这样我们就完成了第一个 Vue 应用！

2. 详细解读

        Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

	
		
		
		
	
	
		
		

			
		  {{message}}
		
		
		
	

        注：data 中也可以写复杂的数据，如数组、对象等。

二、Vue 指令

1.v-text、v-html

        我们都知道在标签中通过 {{message}} 插入一个值，不会影响标签中其他内容。而

        v-html = "message",v-text = "message" 会覆盖标签中其他内容

        {{message}}，v-text = "message" 不能解析内容中 html 标签

        v-html = "message" 可以解析内容中 html 标签

	
		
		
		
	
	
		

		  
{{message}} aaa
		  
aaa
		  
aaa
		
		
		
	

        得到的效果如下：

2.v-on

        其作用是为元素绑定事件，有两种写法

（用 @符号简化）

         效果如下：

3.v-model

        作用是便捷的设置和获取表单元素的值 绑定的数据会和表单元素值相关联

具体效果是，取出绑定的元素的值

	
		
		
		
	
	
		

			
			
{{name}}
		
		
	

        效果如下：（取出输入框的值到网页页面中）

4.v-show、v-if

 v-show "布尔值"（效率高）true= 显示 false= 隐藏 隐藏时控制标签 dispaly 属性——隐藏显示标签的属性

 v-if "布尔值"（效率低，可搭配 v -else 使用）true= 显示 false= 隐藏 隐藏时直接删除标签，显示要重新创建

        这里我们演示一个通过布尔值变换实现图片切换的效果：

        通过“操作”按钮，改变对应控制标签 v -show 或 v -if 中的真值实现：

5.v-bind

作用是为元素绑定属性，标签的属性值可以动态修改

完整写法是 v-bind：属性名 ="变量名"(一旦为属性添加 v-bind 值就是一个在 data 中定义的变量了)

简写 省略 v-bind 直接：属性名

        改变图片的同时也改变了该标签的属性值：

6.v-for

作用是根据数据生成列表结构

数组经常和 v-for 结合

使用语法是（item，index）in 数据

item 和 index 可以结合其他指令一起使用

数组长度的更新会同步到页面上是响应式的

为循环绑定一个 key 值 :key=”值”尽可能唯一

	
		
		
		
	
	
		

			

				

					姓名:{{user.name}}
					年龄:{{user.age}}
					性别:{{user.gender}}
				
			
			{{student.name}}
			{{student.age}}
			
		
		
		
	

        实现效果如下：

三、Vue 实例生命周期

        每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译

模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生

命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。

beforeCreate: function () {

        console.log('beforeCreatea’);

},

created: function () {

        console.log('createda');

},

beforeMount:function(){

        console.log('beforeMounta’);

},

mounted:function(){

        console.log('mounteda’);

}

        以上就是 Vue 基础入门部分的知识了，下一篇我们将进一步深化，使用 Vue-cil 脚手架来实现更多功能！