2020-10-18 v-常见指令

写在前面：

利用脚手架搭建一个Vue项目，然后开始学习。过程省略

正式内容：

	现代开发模式	传统开发模式
代表	Vue/react	jQuery
特点	20%表现层	80%表现层

现代开发模式的代表就是Vue/react,与传统开发模式的大部分精力在Class和样式中，Vue只有20%的表现层、核心在数据层

---

视图层 <——> 数据层

Vue可以视图层和数据层交换数据

---

前端渲染 vs 后端渲染

前端渲染	后端渲染
降低服务器负担	SEO
带宽压力小	兼容性好
用户体验好	安全性高

---

Vue的核心一定是数据

创建一个Vue对象

let vm = new Vue({
  el:'#id',  // 根组件
  data:{     // 数据
    color:'bule',
    age:18
  }
})

在HTML中引用

 <div id="id">
   颜色：{{color}}
   年龄：{{age}}
 </div>

{{data}}是指令、V-bind在标签的属性使用值，不需要双括号

<strong title = "{{age}}岁">{{color}}</strong>	// 错误写法
<strong v-bind:title = "age+'岁‘">{{color}}</strong> // 正确写法
<strong :title = "age+'岁‘">{{color}}</strong> // 简写

---

V-bind

可以用于任何属性，有两个属性有另外的写法
class、style

V-model

用来做数据** 双向**绑定
主要用于输入组件

<input type='text' v-model='name'>
<p>{{name}}</p>

修改输入框内的内容，p标签也跟着变
实际就是数据（data）和input之间的双向绑定
注意：v-model进来的都是字符串

V-text

覆盖里面的所有内容 不常用

V-html

可以直接输出innerHTML

Vue事件

V-on

<input type="button" value="" v-on:click="fn()">
简称是@

v-show/v-if

v-show=“true” 显示、false隐藏
v-if 也可以

v-show	v-if
display	删除元素

v-for

作用就是循环
在想要的元素上使用v-for
<li v-for="user in users">用户名：{{user.name}} </li>
<li v-for="user,index in users">{{index}}.用户名：{{user.name}} </li>

数组	json	字符串	数字
v-for="item\index in array	v-for=“val,key in json”	v-for=“char,index in str”	v-for=“i in num”

---

虚拟DOM——json

{
	tag:'ul',
	child:[
		{tag:'li',child:[
		 ···
		 ]}
	]
}	

:key 属性

1. 不能变
2. 不能重复