vue基础内容

Vue 基本语法知识

ES6

---

javascript的第六个版本

var / let / const 作用域之间的区别
var 本身是没有作用域这一说的
let 只作用在当前的代码块
	{
	 var str = "str";
	 let str1 = "str1";
	}
	console.log(str);// str
	console.log(str1);//undefined
ES6 中的let 不存在作用域的提升 
	
	{
	  console.log(str);//undefined
	  let str = "str1";
	}

ES6 中也不会存在覆盖的现象

	{
      let str1 = " str1";
	  let str1= "str1";
	//运行直接产生错误
	}

const:只在当前的代码块中才有用
	  作用域无法被提升
	  在当前的作用域中声明常量
	  声明的常量必须被赋值，并且赋值之后是无法被修改的

但是对于对象：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-An1d6AIg-1572265813605)(./6.png)]

解构赋值

---

let [name,age,sex]=["jion",23,"女"];
相当于是使用下面这种形式：
let name = "jion", age = 23, sex = "女"；

对象的解构赋值：
let [name, age, sex] = [name:"张三"，age: 23, sex:"女"]；
//对对象进行赋值的时候需要对应key 

###ES6 新特性

---

set / map
let set = new set(["zhangsan", "lisi", "zhansan"]);
//对于重复的元素会自己默认去除
set.size——————不会产生重复的元素的数量
常用方法：
add(); / delete(); /has()

前端的分层开发思想

分层 M V VM 分层结构，VM是三层结构之间的调度者
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PdnIat7F-1572265813606)(./vue.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CtnGmk1K-1572265813606)(./vue1.png)]

*属性 v-cloak: 防止在加载的时候出现数据未加载的时候直接显示模板的情况

使用方式  
<p v-cloak>{{msg}}</p>

<style>
	[v-cloak]{
		display:none;
	}
</style> 

*属性 v-text 默认的情况下是不会存在闪烁问题的

使用
<p v-text ="msg"></p>

** 注意** {{…}} 和 v-text 使用上面的区别是： v-text 是直接更改标签的元素内容，{{…}}只是占位

插值操作

---

####part1 》 mustache 语法

<div id = "app">
	<h1>{{ message}}</h1>
</div>

语法格式： {{...}}内部可以可以直接使用简单的表达式的形式：例如字符串的拼接和数值计算的形式
####part2 》 v-once

<div ip ='app'>
	<h1 v-once>{{message}}</h1>
</div>
//对于该指令存在的位置将会只更新一次，即使之后内容更新也不会更新

####part3 》 v-html

const app = new Vue({
	el: "app",
	data:{
		message: "信息",
		a: "<a href ='http://www.baodu.com'>"
	}
});

//上面的a 表示是一段html 代码 v-html 可以直接进行解析
<div v-html>{{{a}}</div>

####part4 》 v-text

<div v-text ="message"></div>
灵活度较小，使用较少

####part5 》 v-pre
该指令表示该条语句不需要解析
将直接显示[[message}}
####part6 》 v-cloak

表示预渲染的时候将不会直接显示{{message}} 这种格式的文本，防止渲染较稳缓慢的时候出现不友好的画面
使用<div v-cloak>{{message}}</div>

###属性的动态绑定

---

####part1 》 v-bind 动态绑定属性

mustache 语法不会在元素属性的位置进行绑定，只能在元素的context 位置进行绑定
v-bind : 指令的使用方式
<img v-bind：src='imgUrl' alt=''>//imgUrl 是app 中定义的数据名称

语法糖： 指令的简写:,直接在相关属性前面使用：+ 属性名称

v-bind 动态绑定class 属性

：class 形式
多个class 的另外一个写法
<div :class="{active:true,class2:false}"></div>
存在的类使用 true 表示含有该class ，此外还可以直接使用class 的形式继续添加class ，渲染的时候会直接将固定的class 和 动态的class 进行合并

{}表示对象语法

v-bind 绑定class 也可以直接使用函数的形式，将{…} 绑定methods

<div ：class="getClss()"></div>

另外还可以直接使用数组的形式

:class= appclass

####part2 》 v-for

<div v-for="m in movices"></div>
//循环生成 v-for="(m,index) in movices" 可以获取下标

组件化——将页面的一些元素按照模块进行封装,之后可以直接进行复用

动态绑定 style 值

：style = "{key:value}"
<div ：style = "{color:'red'}"></div>

style 的数字语法：

<div style = "[变量名称]" 使用场景较少

---

####计算属性

一个点： 在元素的context 中使用方法的时候使用方式{{method（）}}

计算属性：computed
const app = new Vue({
	el:"#app",
	data
	···
	computed:{
		fullName: function(){
			return lastName+ fristName;
		}
	}
});
使用方式： <div>{{fullName}}</div>
直接当作是属性进行使用就可，相比于method 只会计算一次，性能更加的高

计算属性的另外一个使用方式》 set 和 get 方式上面的计算属性的声明方式下面计算属性是不可修改的但是可以使用 get 和 set

fullName : {
	set:function(name){
	...
	},
	get: function(){
		return ...
	}
}

对于函数和计算属性之间的，函数每一次调用都会重新计算，但是计算属性是直接计算一次，但是当内部使用的变量更改的时候会直接发生更改的。

补充内容 ES6 的一些语法

---

let / var:

---

part3 》 v-on

语法糖：@
几个参数
stop

@click.stop阻止事件冒泡的出现

prevent 阻止默认事件

@click.prevent 对于存在默认事件的组件阻止默认事件

native 监听组件的事件
once 事件只会被触发一次

part4 》 v-if

条件判断：v-if = “false”; 后面使用 true 或者是 false 来确定，可以使用 变量进行使用。

part5 》 v-if和 v-else , v-else-if

<div v-if =""></div>
<div v-else =""></div>
div v-else-if=""></div>

使用方式，

####part6 》 v-show
也是可以确定是不是显示元素，但是和 v-if 是否显示存在区别：
v-if 是直接确定dom 元素是不是会在页面进行渲染
但是v-show 则是确定的是 display 属性，元素是存在的
在开发的过程中切换的频率比较高的时候使用 v-show
当只存在一次性的切换的时候可以使用 v-if

####prt7 》 v-for

遍历数组

v-for = "m in list"

对于对象数组也是可以使用的
info{
	name:"why"
	age: 12,
	height:188
}
v-for = "n in info" //这样的遍历方式只会遍历 key 值
v-for "(value, key) in info";//对应方式似乎是前面的一个是value 值，可以自己测试一下
v-for "(value,key,index) in info"; 也是可以使用 index 获取下标的

补充一个 js 的知识点：

splice() 函数可以直接在数组的指定位置上面插入元素
a.splice(2,0,"insert");//插入元素
a.splice(2,2);从第二个位置开始删除两个元素
所以Vue 建议对于循环的时候绑定一个 key 这样做数组的插入之后渲染的效率会更加的高

v-for = "(index , item) in list"

---

###实验

问题对于函数和计算属性都依赖其他的数据的时候，相关的计算方式： 1.当依赖的属性值发生变化的时候两者都会发生变化，重新渲染页面元素内容。2.但是对于数组的更改方式上面，使用的更改方式 list[index]= …;的方式的时候是无法触动计算属性的修改方式的，计算属性将不会发生重新的渲染操作；对于数组的操作官方建议的方式为：

push()//可以一次性的添加多个元素
pop() //删除数组最后的一个元素
shift()//删除数组的第一个元素
unshift()//在数组的最前面添加元素，可以一次性添加多个元素
splice()// 删除 插入 替换 
	参数： start 
删除元素： 第二个元素 删除元素的个数，删除的位置从 start 开始进行删除
替换元素： 第二个参数 需要从start 开始进行替换的个数，后面加上对应的替换元素 splice(start,lenght,letter1,letter2...)
插入元素：start ,第二个参数 0， 后面第三个元素加上插入的元素，可以多个同时插入	

sort()
reverse()//反转数组

//	使用索引的方式直接进行修改的时候并不是响应式的。需要特别注意这一点

实现的替换方式：

无法进行触发相应的一种形式：
this.list[1] = 2 ;
//替换形式
this.set(this.list,1,2);
this.list.splice(1,1,2);
//拓宽数组的长度
this.list.splice(newlength);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RcAj8XsT-1572265813607)(./vue2.png)]

补充知识点 javascript 高级函数

循环的书写方式：

for 的形式
for(let i = 0;i <= list.length;i++)...
for-in
for(let i in list)
//最简单的方式
for (let i of list){
//此时得到的将会是 数组总的元素
}
//高级方式 reduce ; 数组的高级函数操作 函数式编程filter map reduce

var num = [1,4,6,7];
num.filer(function(n){
	//第一个参数为一个回掉函数，数组的每一个元素传入
	//回掉函数的要求，必须返回一个 boolean ，当为true 的时候此次的n 将会加入到新的数组中，false 将不会加入到新数组中
	return true/false;//可以在内部进行直接的过滤
})

###高阶函数使用

let num = [1,2,3];
//filter 函数的使用 需要过滤掉一些数据的时候进行使用
let num2 = num.filter(function(n){
    n = n*2; //在内部做出的更改是可以直接传输到新数组中的，
            //用途主要是需要进行过滤但是同时也需要进行其他的操作的时候进行使用
    return n>2;
});
//map 一般是对数据进行一些计算的时候进行使用,对数组进行全局的遍历
let num3 = num.map(function(n){
    return n*3;
})
//reduce 比较难： 使用—— 数组调用 对数组的值进行汇总
//对数组中所有的内容进行汇总操作：参数 preValue->表示上次返回的值
//从最终返回类型上面可以直接是一个计算完成的值，不一定是一个数组类型
let num4 = num.reduce(function(preValue,n){
    return preValue+n;//数组的求和
},0);//reduce 的第二个参数表示第一个 preValue

vue里面测试使用：

sum = this.list.reduce(function(prevalur,n){
	return prevalue + n.count * n.price;
},0);

//一个需求 数组中大于 100 的元素的两倍的和

num.filter(function(n){
	return n>100;
}).reduce(function(prevalue,n){
	return prevalue + n*2;
},0);

---

重点内容 ###vue 中的组件化

组件化：将页面上面的所有的内容进行拆分成为功能块的形式，将页面进行分割成为一个一个的组件。

vue中组件的思想，将页面上面的不同的部分进行拆分然后进行开发，最后对形成的组件进行合并成为最初想要合成的页面。最后将会形成一个组件树。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JW00xeZ9-1572265813607)(vue3.png)]

组件的使用步骤：

创建组件构造器 Vue.extend();
注册组件 vue.component();
使用组件 调用组件

####part1 Vue 的组件化开发

使用场景还是在 Vue 管理的内容内进行使用

<div id = "app"></div>

经常进行服用的代码进行复用：

//步骤1
const component1 = Vue.extend({
	template: `<div><h2></h2></div>`;//es6的新特性 定义字符串的时候可以进行换行操作
})；
//步骤2
Vue.component('my-comp',component1);
参数： 第一个为组件的名称
	  第二个为定义的组件名称
//步骤3 使用
<my-comp></my-comp>

上面的注册方式注册的为全局组件，全局范围内都是可以直接进行使用的，具备组件的注册方式：

const app = new Vue({
	el:"#app",
	data:{
	...
	},
	components:{

	}
})

语法糖：简单的创建方式