vue快速入门级学习笔记（来自黑马程序员教程）

vue快速入门笔记

该笔记总结于黑马程序员视频《前端基础必会教程-4个小时带你快速入门vue》前17P
完整视频链接：https://www.bilibili.com/video/BV12J411m7MG/?p=1

使用步骤

1、导入开发版本的vue.js，详细方法见官网介绍，最简单的是用script引入
2、创建vue实例对象，设置el属性挂载到对应的div上
3、使用简洁的模板语法渲染页面

el：挂载点

通过CSS选择器设置vue实例管理的元素，设置完毕之后，el命中的元素的内部，使用两个花括号修饰的部分就会被data中同名的地方给替换

不要把vue挂载到HTML和body上面，建议把el挂载到div上面

data数据对象

1、vue中用到的数据定义在data中
2、data可以写复杂类型的数据
3、渲染复杂类型数据时，遵守js语法规则即可，比如数组根据下标取值，对象用点方法取值

vue指令

内容绑定，事件绑定：

v-text

设置标签的文本值

但是这么写有个缺点，无论h2里面有什么内容都会被替换掉不想被替换掉还是要使用插值表达式

v-text的值还支持写表达式做复杂设计，例如拼接，无论内容是什么，只会解析成文本（和v-html的区别）

v-text写在行内就是v-text=“message” ， 如果写在标签里面只需要用插值表达式的格式：{ {message}}就可以渲染

v-html

v-html可以解析成标签，相当于jQuery的 $().html()，类似于JavaScript里面的innerHTML

v-on

为元素绑定事件，例如鼠标点击，鼠标移入等
语法规则：v-on：事件名称=“方法”
方法写在vue实例里面的methods里面（与el data平级）v-on可以简写成@

vue是虚拟DOM，基于虚拟dom,一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。

也就是说：vue是不用操作DOM元素了，更改页面显示通过改变数据来实现，数据改变，页面跟着改变，so代码在下一次刷新进来还是会回到刚开始的模样。

举个栗子：

	
 {
    { food }} 


...
var app = new Vue({
	el: "#app",
	data: {
		food: "土豆"
	},
	methods:{
		changeFood: function(){
			this.food += "是马铃薯！"
		}
	}

})

重点记住this关键字，内部方法通过this关键字可以访问定义在data中的数据

---

显示切换，属性绑定：

v-show

根据后面表达式的真假，让元素显示或者隐藏
语法规则：v-show = “true / false / 定义在vue实例中data中的数据 / 表达式”

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display值
指令后面的内容最终都会被解析成布尔值，true显示，false隐藏，数据与元素同步更新

v-if

根据表达式的真假切换元素显示状态，但是他操作的不是样式，而是直接操作DOM元素（与v-show的区别）因此频繁切换的元素用v-show，因为对DOM树进行操作性能消耗比较大

v-bind

专门用来操作属性的指令
语法规则： v-bind：属性名 = 表达式
v-bind可以直接省略

对象形式的意思就是，我active这个样式是否生效，取决于isActive的真假值

---

图像切换案例

 
  
  
 
 
 
  

   
   <
   >
  
  
  
  
 

---

列表循环，表单元素绑定

v-for

根据数据生成列表结构，并且是响应式

列表的生成依赖数据，结合的类型有数组、对象、数字、字符串等，最常用的是数组

语法规则： v-for=“item in arr” arr是我们要循环的数据名，和data里面的arr相对应， in不能修改， item是对应的每一项，可以改名，但要符合规则

v-for可以理解成，把作为模板的那个标签还有内部的所有内容，根据数据的个数，拷贝若干份

数组的索引值也可以利用起来，效果图如下

除了数组的形式，还有对象的形式，下面贴图，展示：

v-on（补充）

v-on可以自定义参数，事件修饰符

语法例子：@click = “doIt(p1,p2)”

@keyup.enter = “sayHi()” 键盘抬起事件，直接用事件修饰符即可，此句表示只有在回车键的时候才会触发这个逻辑

v-model（双向数据绑定）

获取和设置表单元素的值，十分便捷的把表单元素的值和实例中的数据关联起来

语法规则：v-model需要和表单元素一起使用 在表单元素（例如input）中写上v-model=“名称”

双向绑定：data中设置的message的值会在运行时传入到input表单里面，表单里面进行修改后，值会影响data里面的数据

代码写法如图：