vue基础
VUE
vue安装完后 进入项目目录
模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
就是绑定new Vue里面的 data{ }里面内容
文本 v-text
Html v-html 用于输出html代码
<p v-html="msg"></p>
vue实例里面 data : {
msg : "<h1>这是一个h1元素内容</h1>"
}
会自动解析标签属性，而v-text不会
属性 v-bind ：属性名 绑定这个属性，对应的值去vue数据里面找
我们可以给v-bind:class 一个对象，以动态地切换class。注意：v-bind:class指令可以与普通的class特性共存
比如 <div class="abc" v-bind:class="{'class1': use}"> vue data里面内容 { ues:true ; //如果为false 就是不给div添加class class1，true就是给div加上class1 }
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
<div v-bind:id="'list-' + id">菜鸟教程</div>
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p v-if="seen">现在你看到我了</p>
//这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术，更是梦想！</p> <p>哈哈哈，打字辛苦啊！！！</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script> </body> </html>
参数在指令后以冒号指明 例如， v-bind 指令被用来响应地更新 HTML 属性
用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定，v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<div id="app"> <p>{{ message }}</p> <input v-model="message">//表单上的值，会自动更新绑定的元素值 </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('')//先把每个字符切割，再反转，再把每个字符拼接 } } }) </script>
过滤器
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
vue.filter 全局过滤器
局部就是写在 new Vue{ }里面
过滤器使用的地方
<!-- 在双花括号中 --> <div>{{数据属性名称 | 过滤器名称}}</div> <div>{{数据属性名称 | 过滤器名称(参数值)}}</div> <!-- 在 `v-bind` 中 --> <div v-bind:id="数据属性名称 | 过滤器名称"></div> <div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>
实例
<div id="app"> <span>{{msg|capitalize}}</span>//data中声明msg:'hello' </div> //全局过滤器，将信息转成大写 Vue.filter('capitalize', function (value) { //value是|管道符左边那个属性值 return value.toUpperCase() //返回大写字母 })
传递多个参数
<div id="app"> <!--过滤器接收多个参数--> <span>{{value1|multiple(value2,value3)}}</span> </div> <script> var vm = new Vue( { el: '#app', data: { msg: 'hello', value1:10, value2:20, value3:30 }, //局部过滤器 filters: { 'multiple': function (a, b, c)//这里的a,b,c是指的|那传的值。 {
return a*b*c } } } ) </script>
缩写
vue为两个最常用命令提供了缩写
v-bind =》： 比如
<a v-bind:href="url"></a> ==> <a :href="url"></a>
v-on =>@
<a v-on:click="doSomething"></a> => <a @click="doSomething"></a>
条件与循环
条件判断 v-if v-else v-else-if
跟js的判断差不多，差别是="false"的时候会隐藏元素，=true的时候会展示元素 ，值可以从new Vue的data里面找
<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>
v-show
根据指令来展示元素
<h1 v-show="ok">Hello!</h1>
循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
循环语句
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
for 在标签内的话 循环几次 标签内容就会输出几次
比如 <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> for 循环3次的话 就会有6个li，因为template里面两个li，循环三次。6个
v-for 可以绑定数据到数组来渲染一个列表：
<div id="app"> <ol> <li v-for="sitea in sites"> //源数据数组的第一个参数是键值，第二个参数是键名，第三个是索引 只有一个参数就是键值 {{ sitea.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { names: 'Google' }, { name: 'Taobao' } ] } }) </script> //1.Runoob 2. 3.TaoBao
v-for site in sites 参数
site源数据数组的第一个参数是键值，第二个参数是键名 第三个参数是索引 是可以随便取名的
sites是new Vue里面data，里面的数据名
<body>
<div id="app"> <ul> <li v-for="(aaa, bbb,ccc) in object"> {{ bbb }} : {{ aaa }}:{{ccc}} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }) </script> //输出
name : 菜鸟教程:0 url : http://www.runoob.com:1 slogan : 学的不仅是技术，更是梦想！:2
循环整数
<li v-for="n in 10"> {{ n }} </li> 输出10个li 内容从1到10
计算属性
-
getter 和 setter 方法
每一个计算属性都包含一个getter方法和一个setter方法。 - getter 将对象属性绑定到查询该属性时将被调用的函数
- 当尝试设置属性时，
set语法将对象属性绑定到要调用的函数。
- 如果计算属性后面直接跟一个 function，使用的就是计算属性的默认方法
getter来读取。例 展示两个购物车的物品总价：
computed: { prices: function(){ var prices = 0 for(let i=0; i<this.package.length; i++){ prices += this.package[i].price * this.package[i].count } //this 指向vm实例 return prices } }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ site }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
//get 就是计算属性的getter set就是计算属性的sitter 名称不能更改
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com'; //当修改计算属性的值时，setter函数会被调用
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>
</body> </html>
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
计算属性拿不到ref的值
定义一个变量，在mountd时变成true
监听属性
watch 我们可以通过 watch 来响应数据的变化。
<div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters">
测试watch :<input type ="text" v-model="abc"> </div> <p id="info"></p> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0,
}, //这里的watch 是监听 watch里面的所有属性的。 watch : { kilometers:function(val) { this.kilometers = val; this.meters = this.kilometers * 1000 }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val;
},
abc:function(val){
console.log(val)
//在abc的input里面输入123，val参数就是改变后的值 这里监听到了abc改变，就会调用后面的 ：function 输出123
} } }); // $watch 是一个实例方法 vm.$watch('kilometers', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; }) </script>
$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。
样式绑定
就是用 v-bind绑定class 选择样式 在new vue里面是true 就是添加class值 是false就是不添加
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .base { width: 100px; height: 100px; } .active { background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div v-bind:class="classObject"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true, error: { value: true, type: 'fatal' } }, computed: { classObject: function () { //这里的return 就是用来返回计算过的值得出 base:true,active:false,text-danger:true
：为true的就会应用相应.class样式
return { base: true, active: this.isActive && !this.error.value, 'text-danger': this.error.value && this.error.type === 'fatal', } } } }) </script> </body> </html>
Vue.js style(内联样式)
<div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> </div>
：后面去 new vue 的data里面找值
也可以直接绑定到一个样式对象，让模板更清晰：
<div id="app"> <div v-bind:style="styleObject">菜鸟教程</div> </div> <script> new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px' } } })
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div> </div>
事件处理器
事件监听可以使用 v-on指令
直接写命令
<div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script>
直接绑定到一个方法
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
</script>
事件修饰符
.stop 阻止事件冒泡
.capture 使用事件捕获
.self 只当事件在该元素本身触发时，触发回调
.prevent 分事件情况
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
键盘按键修饰符 .keyup
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit"
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
Vue.js表单
v-model双向绑定
v-model指令的本质是： 它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。同时，v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。 然后当输入事件发生时，实时更新vue实例中的数据。
<div id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked">
//checkbox勾上了，就为true v-model就会把true传给data里面 checked <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="runoob" value="Runoob111" v-model="checkedNames">
//这里的复选框勾上后 就把value的值 传给data里面数组checkedNames <label for="runoob">Runoob</label> <input type="checkbox" id="google" value="Google222" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao333" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>
select列表
<body>
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
//选中哪个列表 就会把列表的value传给v-model绑定
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
v-model修饰符
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number自动转为number类型 如果转换结果为NaN,则返回原值。
.trim 自动过滤 用户输入首尾空格
Vue.js混入
混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
<body> <div id = "databinding"></div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); // 定义一个混入对象 var myMixin = { created: function () { this.startmixin() },//created: html加载完成之前，执行。执行顺序父组件-子组件 methods: { startmixin: function () { document.write("欢迎来到混入实例"); } } }; var Component = Vue.extend({ mixins: [myMixin] //就是相当于合并了myMixin里面内容 }) //vue.extend用vue构造器，创建一个子类。参数是一个包含组件选项的对象 var component = new Component(); </script> </div> </body> </html>
选项合并
var mixin = { created: function () { document.write('混入调用' + '<br>') } } new Vue({ mixins: [mixin], created: function () { document.write('组件调用' + '<br>') } });
混入调用
组件调用
如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高。如下实例，Vue 实例与混入对象的 methods 选项都包含了相同的函数：
var mixin = { methods: { hellworld: function () { document.write('HelloWorld 方法' + '<br>'); }, samemethod: function () { document.write('Mixin：相同方法名' + '<br>'); } } }; var vm = new Vue({ mixins: [mixin], methods: { start: function () { document.write('start 方法' + '<br>'); }, samemethod: function () { document.write('Main：相同方法名' + '<br>'); } } }); vm.hellworld(); vm.start(); vm.samemethod(); //HelloWorld 方法 start 方法 Main：相同方法名
全局混入
也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。
谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
响应接口
Vue 可以添加数据动态响应接口。
例如以下实例，我们通过使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外才能实现正确的响应。
实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
// nval新值 oval旧值
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
setTimeout(
function(){
vm.counter += 20;
},10000
);
</script>
</body>
</html>
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。
Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。
如果我们需要在运行过程中实现属性的添加或删除，则可以使用全局 Vue，Vue.set 和 Vue.delete 方法。
Vue.set
Vue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制，语法格式如下：
Vue.set( target, key, value )
参数说明：
- target: 可以是对象或数组
- key : 可以是字符串或数字
- value: 可以是任何类型
<div id = "app">
<p style = "font-size:25px;">计数器: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
在以上实例中，使用以下代码在开始时创建了一个变量 myproduct：
var myproduct = {"id":1, name:"book", "price":"20.00"};
该变量在赋值给了 Vue 实例的 data 对象：
var vm = new Vue({ el: '#app', data: { products: myproduct } });
如果我们想给 myproduct 数组添加一个或多个属性，我们可以在 Vue 实例创建后使用以下代码：
vm.products.qty = "1";
查看控制台输出：
如上图看到的，在产品中添加了数量属性 qty，但是 get/set 方法只可用于 id，name 和 price 属性，却不能在 qty 属性中使用。
我们不能通过添加 Vue 对象来实现响应。 Vue 主要在开始时创建所有属性。 如果我们要实现这个功能，可以通过 Vue.set 来实现：
<div id = "app">
<p style = "font-size:25px;">计数器: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
从控制台输出的结果可以看出 get/set 方法可用于qty 属性。
Vue.delete
Vue.delete 用于删除动态添加的属性 语法格式：
Vue.delete( target, key )
参数说明：
- target: 可以是对象或数组
- key : 可以是字符串或数字
<div id = "app">
<p style = "font-size:25px;">计数器: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
以上实例中我们使用 Vue.delete 来删除 price 属性。以下是控制台输出结果：
从上图输出结果中，我们可以看到 price 属性已删除，只剩下了 id 和 name 属性，price 属性的 get/set 方法也已删除。
VUE中的this指向问题
在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例，即（new Vue）。
箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。如果没有特殊指向，setInterval和setTimeout的回调函数中this的指向都是window。这是因为JS的定时器方法是定义在window下的，可以用箭头函数改变定时器的this指向
如果箭头函数被非箭头函数包含，则this绑定的是最近一层非箭头函数的this;否则，this的值会被设置为全局对象。
个人总结重点
var <varname>=new Vue（{}） 创建vue构造器 构造器里面 el:<idname> data:用于定义属性，methods:用于定义函数 return返回 {{}}用于返回对象属性和函数返回值 比如 {{details()}}返回methods的datails函数的return
数据绑定 文本： v-text html： v-html 属性： v-bind:class="{'class1':use}" vue 实例data里面可以用true和false来动态切换
v:bind
绑定表达式：也是用bind: 例 <div v-bind:id="'list-' + id">菜鸟</div>
绑定style <div v-bind:style="styleObject"></div>
条件判断 v-if v-else v-else-if v-show根据表达式值来决定是否插入绑定元素
v-on监听事件名
双向绑定 在表单控件上创建双向绑定，根据表单值，自动更新绑定元素值
过滤器 vue.filter 不改变原来数据，只产生新数据 管道符 | 左右传值，右边过滤器名称
缩写 v-bind 变成： v-on变成@
循环 v-for site in sites语法 sites 是源数据数组并且 site 是数组元素迭代的别名，在标签内的话，循环几次，标签输出几次，也可以整数循环 <li v-for="n in 10"> {{ n }} </li> 输出10个li，内容从1到10
计算属性 computed 两个方法 getter setter 。getter查询时调用的函数 setter绑定尝试改变设置属性调用的函数，只有一个函数，默认getter
监听属性 watch 监听watch所有属性，如果有改变，调用与其绑定的函数
响应式接口 vm.$watch('data', function (newValue, oldValue){ ...} 得添加在vue实例外才能正常响应
修饰符 .stop阻止冒泡 .capture捕获 .self本身触发，触发回调 .prevent（分很多情况） .keyup 键盘输入
混入 先定义一个重复使用的对象，对象里写好语句。然后在vue内 mixins:[定义的对象名]，就相当于把对象里面的语句，并入了vue内部
添加Vue.set( target, key, value ) 删除属性 Vue.delete( target, key )
浙公网安备 33010602011771号