一套用于构建用户界面的渐进式JavaScript框架
ES6语法规范、ES6模块化、包管理器、原型和原型链、数组常用方法、axios、promise等等
Vue模板语法有2大类
插值语法
（1）功能：用于解析标签体内容。（标签体内容指的是在两个标签夹的中间的内容）
（2）写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
指令语法：
（1）功能：用于解析标签（包括标签属性、标签体内容、绑定事件…）
（2）写法：举例：v-bind:href=‘xxx’，'xxx’同样要写js表达式，且可以直接读取到data中的所有属性。
（3）备注：Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举例子
示例1：指令语法和普通标签属性的区别
√正确写法：
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<h3/>
<h1>指令语法</h1>
<a v-bind:href="url">点我去尚硅谷学习</a>
</div>
</body>
<script>
new Vue([
el:'#root',
data:{
name:'jack',
url:'http://www.atguigu.com'
}
})
</script>
×错误写法：
<a href="url">点我去尚硅谷学习</a>
=>分析：
错误写法中的href="url"中url是url，不传值；而正确写法中的v-bind:href="url"的url属于表达式，读取url的值。
=>补充：
区分 js表达式和js代码（语句）
表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
（1）a
（2）a+b
（3）demo(1)
（4）x === y ? ‘a’ : ‘b’
js代码（语句）
（1）if() { }
（2） for() { }
示例2：当data里有属性名重复时，插值语法里的值是什么
?提问：{{name}}里显示的是什么？
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<h3/>
<h1>指令语法</h1>
<a v-bind:href="url">点我去{{name}}学习</a>
</div>
</body>
<script>
new Vue([
el:'#root',
data:{
name:'jack',
name:'尚硅谷'
url:'http://www.atguigu.com'
}
})
</script>
√答案：{{name}}里是’尚硅谷’
Vue中有2种数据绑定的方式
示例1：单项数据绑定和双向数据绑定
√正确写法
<body>
<div id="root">
<!-- 普通写法 -->
单向数据绑定:<input type="text" v-bind:value="name"><br/>
双向数据绑定:<input type="text" v-model:value="name"><br/>
<!-- 简写 -->
单向数据绑定:<input type="text" :value="name"><br/>
双向数据绑定:<input type="text" v-model="name"><br/>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
×错误写法：
<h2 v-model:x="name">你好</h2>
=>分析：
错误原因是因为v-model只能应用在表单类元素上（输入类元素）
//el的两种写法
const v = new Vue({
el:'#root',//第一种写法
data:{
name:'尚硅谷'
}
})
v.$mount('#root')//第二种写法
//data的2种写法
new Vue({
el:'#root',
//data的第一种写法：对象式
/*data:{
name:'尚硅谷'
}*/
//data的第二种写法：函数式
data(){
//data:function(){
return {
name:'尚硅谷'
}
})
备注：
（1）data中所有的属性，最后都出现在了vm身上
（2）vm身上所有的属性 及 vue原型上所有的属性，在Vue模板中都可以直接使用
<div id="root">
<h1>{{$options}}</h1>
<h1>{{$emit}}</h1>
<script type="text/javascript">
let number = 18
let person = {
name: '张',
sex: '男'，
}
Object.defineProperty(person,'age',{
// value:18,
// enumerable: true,
// writable: true,
// configurable : true
//当有人读取person的age属性时，get函数(getter)后会被调用，且返回值就是age的值
get() {
console.log('get:age:number')
return number
},
//当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
set(value) {
console.log('set:age:number')
number = value
}
})
含义：
通过一个对象代理对另一个对象属性的操作（读/写）
代码示例：
<script>
let obj = {x:100}
let obj2 = {y:200}
Object.definieProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
<div id="root">
<button @click="showInfo1">点击提示信息</button>
<button @click="showInfo2($event,66)>点击提示信息2</button>
</div>
<script>
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷'
},
methods: {
showInfo(){
concole.log(event.target.innerText)
console.log(this) //此处的this指向vm
}
showInfo(event,number){
concole.log(event.target.innerText)
console.log(this) //此处的this指向vm
}
</script>
含义
代码示例
示例：click.prevent点击时不会跳转到网址
<div id="root">
<a href="http://xxx.com" @click.prevent="showInfo">点击提示信息</a>
</div>
含义
含义：
代码示例
示例1：插值语法里双大括号里是填函数名fun还是填函数名加括号fun()？
<div id="root">
<span>{{fullName()}}</span>
</div>
<script>
new Vue({
el:'#root',
methods:{
fullName(){
return '小猪佩奇'
}
}
})
</script>
√正确答案：应该写{{fullName()}}，会显示"小猪佩奇"，因为fullName()此时算是个表达式；如果写{{fullName}}，会显示函数的代码。
示例2： 姓名计算案例
<div id="root">
姓:<input type="text" v-model="firstName"><br/>
名:<input type="text" v-model="lastName"><br/>
全名:<span>{{fullName}}</span><br/>
</div>
<script>
new Vue({
el:'#root',
data(){
firstName:'飞天'
lastName:'小魔女'
},
computed:{
fullName:{
get(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
},
//set什么时候调用？当fullName被修改时
set(value){
console.log('set',value)
})
</script>
计算属性的简写形式
简写形式里不能有set()
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'一',
},
computed:{
//简写
fullName(){
console.log('get被调用了')
return this.firstName+ '-' + this.lastName
}
}
}
代码示例：
**示例1：**用computed实现天气转换
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot?:'炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
})
**示例2：**用watch实现天气监听的两种方法
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot?:'炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
//监听方法一
watch:{
isHot:{
immediate:true,//初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时，
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
},
})
//监听方法二
// vm.$watch('isHot',{
// immediate:true,//初始化时让handler调用一下
// //handler什么时候调用？isHot发生改变时
// handler(newValue,oldValue){
// console.log('isHot被修改了',newValue,oldValue)
// }
// })
示例3： 监听的两种方法的简写形式
watch:{
//正常写法
isHot:{
immediate:true,
deep:true,
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//简写
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
//正常写法
vm.$watch('isHot',{
immediate:true,//初始化时让handler调用
deep:true,
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
{
})
vm.$watch('isHot',function(){
console.log('isHot被修改了',newValue,oldValue)
})
深度监视：
（1）Vue中的watch默认不检测对象内部值的改变（一层）
（2）配置deep:true可以检测对象内部值改变（多层）
（3）Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以。使用watch时根据数据的具体结构，决定是否采用深度监视
代码示例：
示例1： 深度监视depp:true
<div id='root'>
<h3>a的值是:{{numbers.a}}</h3>
<button @click="number.a++">点击让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="number.b++">点击让b+1</button>
</div>
<script>
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
watch:{
//监视多级结构中某个属性的变化
'numbers.a':{
handler(){
console.log('a被改变了')
}
}
//监视多级结构中所有属性的变化
numbers:{
deep:true,
hander(){
console.log('number被改变了')
}
}
}
})
computed和watch的区别：
（1）computed能完成的功能，watch都可以完成
（2）watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
注意：
（1）被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
（2）所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象
写法
:class=“xxx” xxx可以是字符串、对象、数组。
代码示例
<!--:class 绑定 字符串写法 适用于样式的类名不确定需要动态琢磨的状况-->
<div class="basic" :class="mood" @click="changeMood">{{ name }}</div><hr/>
<!--:class 数组写法 适用于要绑定的样式个数不确定，名字也不确定的状况-->
<div class="basic" :class="classArr">{{ name }}</div><hr/>
<!--:class 对象写法 适用于要绑定的样式个数确定，名字确定，但动态决定要不要用的状况-->
<div class="basic" :class="classObj" >{{ name }}</div><hr/>
</div>
<script>
new Vue({
el:'#root',
data: {
name:'test',
mood:null,
classArr:['atguigu1', 'atguigu2', 'atguigu3'],
classObj:{
atguigu1: false,
atguigu2: false
},
},
methods:{
changeMood(){
//vue绑定事件
//不要亲手操作dom
//随机切换mood
const moodsArr = ['normal', 'happy', 'sad'];
const random = Math.floor(Math.random() * moodsArr.length);
this.mood = moodsArr[random];
}
}
});
</script>
写法：
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。
代码示例：
<!--绑定style样式 对象写法-->
<div class="basic" :style="styleObj">{{ name }}</div><hr/>
<!--绑定style样式 数组写法-->
<div class="basic" :style="[styleObj, styleObj2]">{{ name }}</div><hr/>
<div class="basic" :style="styleArr">{{ name }}</div>
<script>
new Vue({
el:'#root',
data: {
name:'test',
styleObj:{
fontSize: '40px',
color: 'red',
},
styleObj2:{
background: 'green'
},
styleArr:[
{ color: 'orange' },
{ background: 'grey' }
]
},
methods:{
changeMood(){
//vue绑定事件
//不要亲手操作dom
//随机切换心情
const moodsArr = ['normal', 'happy', 'sad'];
const random = Math.floor(Math.random() * moodsArr.length);
this.mood = moodsArr[random];
}
}
});
代码示例：
示例： template不占DOM里的结构。
<!--v-if与template的配合使用-->
<template v-if="n === 1">
<h2>你好</h2>
<h2>shanghai</h2>
</template>
v-for指令
<div>
<!-- 遍历数组 -->
<h2>人员列表</h2>
<ul>
<li v-for ="(p,index) of persons" :key="index">
{{p.name}}--{{p.age}}
</li>
</ul>
<!-- 遍历对象-->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{key}}--{{value}}
</li>
</ul>
<!-- 遍历字符串-->
<ul>
<li v-for="(char,index) of str" :key="index">
{{a}}-{{b}}
</li>
</ul>
<!-- 遍历指定次数-->
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</div>
<script>
new Vue({
el:'#root',
data:{
persons:[
{name:AA,age:19},
{name:BB,age:20},
{name:CC,age:21}
],
car:{
name:'五菱宏光',
price:'10万',
color:'黑色'
},
str:'hello'
}
})
面试题：react、vue中的key有什么作用？（key的内部原理）
虚拟DOM中key的作用：
key是虚拟DOM对象的表示，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
对比规则
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
a.若虚拟DOM中内容没变，直接使用之前的真实DOM
b.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到页面
用index作为key可能会引发的问题：
（1）若对数据进行：逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新=>界面效果没问题，但效率低
（2）如果结构中还包含输入类的DOM
会产生错误DOM更新=>界面有问题
开发中如何选择key？
（1）最好使用每条数据的唯一表示作为key，比如id、手机号、身份证号码、学号等唯一值
（2）如果不存在对数据的逆序添加，逆序删除等破坏顺内需操作，仅用于渲染列表用于展示，使用index作为key是没有问题的
代码示例
背景：
在input框输入字，筛选出包含此字符的相应名字
示例1：错误写法1
错误之处： 在数组persons基础上过滤，会越过滤越少
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<button @click="updateMei">更新马冬梅的信息</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
},
watch:{
keyWord(val){
//筛选出包含input字的名字
this.Persons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
示例2：错误写法2
错误之处： 当搜索过一个字（例如“冬”），然后再删去“冬”字即此时input框内是空字符串，但原列表不显示。因为数据的name中不包含空字符串
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<button @click="updateMei">更新马冬梅的信息</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
},
watch:{
keyWord(val){
//筛选出包含input字的名字
this.Persons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
示例3：正确写法
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPersons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
//filter
filPersons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
//筛选出包含input字符的名字
this.filPersons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
示例4：用computed实现
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPersons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
]
},
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
}
}
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) of filPersons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:39,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:42,sex:'男'}
]
},
computed:{
filPersons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//判断是否需要排序
if(this.sortType){
arr.sort((p1,p2)=>{
return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
})
}
return arr
}
}
})
</script>
Vue.set()的使用
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
用法
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (例如vm.myObject.newProperty = ‘hi’)
Vue监视数据的原理：
vue会监视data中所有层次的数据
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
在Vue修改数组中的某个元素一定要用如下方法：
注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性。
收集表单数据：
备注：v-model的三个修饰符：
（1）lazy：失去焦点再收集数据
（2）number：输入字符串转为有效的数字
（3）trim：输入首尾空格过滤
代码示例：
一个表单
<div id="root">
<form>
账号<input type="text" v-model="userInfo.account"><br/><br/>
密码<input type="password" v-model="userInfo.password"><br/><br/>
性别:
男<input type="radio" v-model="userInfo" value="male">
女<input type="radio" v-model="userInfo" value="female">
爱好:
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择小区</option>
<option value="beijing">北京</option>
<option value="beijing">上海</option>
<option value="beijing">武汉</option>
</select><br/><br/>
其他信息:
<textarea v-model="userInfo.other"></textarea><br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="www.xxx.com">
<button>提交</button>
</form>
</div>
<script>
new Vue({
el:'#root',
data:{
account:'',
password:'',
sex:'female',
hobby:[],
}
})
</script>
</html>
过滤器
代码示例
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是: {{fmtTime}}</h3>
<!-- method实现 -->
<h3>现在是:{{getFmtTime}}</h3>
<!-- 过滤器实现 -->
<h3>现在是:{{time | timeFormater}}</h3>
<!-- 过滤器实现（传参）-->
<h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg |mySlice">尚硅谷</h3>
</div>
<script>
new Vue({
el:'#root',
data:{
time:1621561377603//时间戳
},
computed:{
fntTime(){
return dayjs(this.time).format('YYY年MM月DD日 HH:mm:ss')
}
},
methods:{
},
//局部过滤器
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm：ss'){
return dayjs(value).format(str)
},
mySlice(value){
return value.slice(0,4)
}
}
})
v-bind 单向绑定解析表达式，可简写为 :xxx
v-model 双向数据绑定
v-for 遍历数组/对象/字符串
v-on 绑定事件监听，可简写为@
v-if 条件渲染（动态控制节点是否存在）
v-else 条件渲染（动态控制节点是否存在）
v-show 条件渲染（动态控制节点是否展示）
自定义指令
定义语法
（1）局部指令
new Vue({
directives:{指令名：配置对象}
})
或
new Vue({
directives{指令名：回调函数}
})
（2）全局指令：
Vue.directive(指令名,配置对象)或
Vue.directive(指令名,回调函数)
配置对象中常用的3个回调
（1）bind 指令与元素成功绑定时调用
（2）inserted 指令所在元素被插入页面时调用
（3）update 指令所在模板结构被重新解析时调用
备注
（1）指令定义时不加v-，但使用时要加v-；
（2）指令名如果是多个单词，要使用kebab-case命名方式，不要camelCase命名
代码示例
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
语法：
a.局部指令：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
b.全局指令：
<script>
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
</script>
实际代码
定义全局指令
<!-- 准备好一个容器-->
<div id="root">
<input type="text" v-fbind:value="n">
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//定义全局指令
Vue.directive('fbind', {
// 指令与元素成功绑定时（一上来）
bind(element, binding){
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element, binding){
element.focus()
},
// 指令所在的模板被重新解析时
update(element, binding){
element.value = binding.value
}
})
new Vue({
el:'#root',
data:{
name: '尚硅谷',
n: 1
}
})
</script>
局部指令：
new Vue({
el: '#root',
data: {
name:'尚硅谷',
n:1
},
directives: {
// big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
big (element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind: {
//指令与元素成功绑定时（一上来）
bind (element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted (element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update (element,binding){
element.value = binding.value
}
}
}
})
因篇幅问题不能全部显示，请点此查看更多更全内容
Copyright © 2019- azee.cn 版权所有 赣ICP备2024042794号-5
违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务