Vue 的准备

Posted 2020-11-15 mieba88

## 1.es6的基本语法

?	let---是局部作用于，不会存在变量提升,变量不能重复声明
?	const--局部作用域，不会存在变量提升 不能重复声明，只声明常亮，不可变的量
?	

```javascript
-模板字符串
	tab键上面的反引号 $(变量名)
-箭头函数
	function(){}===()=>{} this的指向发生了改变
-对象的使用
	var person={
		name:‘alex‘,
		fav2:function(){
			//this指向了person
			},
		fav:()=>{
			//this指向了定义person对象的父类（上下文）
			},
		showName(){
			//this指向了person
			}
		}
-es6的类
	原型 prototype 	当前类的父类（继承性)
		class Person{
			constructor(name){
				this.name = name;
				}
				fav(){
				}
			}
```
## 2.Vue的基本用法

```vue
-vue的介绍
	前端有三大框架：
		Vue  




```

#### Vue的模板语法

~~~vue
<!--模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ ‘hhaha‘ }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {‘name‘:‘alex‘} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2?‘真的‘:‘假的‘ }}</h2>
<p>{{ msg2.split(‘‘).reverse().join(‘‘) }}</p>
~~~



#### Vue的指令系统之v-text和v-html**

~~~vue
v-text相当于InnerText
v-html相当于InnerHTML
~~~

#### vue的指令系统之v-if和v-show

~~~vue
v-show 相当于 style.display
new Vue({
	el:‘#app‘,
	data(){
         return{
             msg:"<h2> alex</h2>",
             num:1,
             isShow:true,
	}
}
})


~~~

#### v-if 和v-show的区别

~~~js
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
~~~

#### v-bind 和 V-on

~~~
v-bind 可以绑定标签
v-on 可以监听事件
~~~



-vue的思想 = 数据驱动视图
-vue的基本指令

·