目录
一、常用指令
事件绑定 预知：
1.1 条件渲染v-if
1.2 列表渲染v-for
1.3 计算属性 computed
1.3.1 计算属性与方法的区别
1.4侦听属性 watch
1.5 class与style绑定
1.6 事件处理
1.7 表单处理
二、组件基础
什么是“组件化”
这里是个VsCode的Vue模板
一、常用指令
事件绑定 预知：v-on 也可以简写，使用"@"替代。 v-bind 简写 “:” |
<html>
<head><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body><div id="app"><h2>插值</h2><input type="text" v-model="msg"><span v-once>Message: {{ msg }}</span><p>{{message}}</p><p><span v-html="message"></span></p><h2>数据绑定-- 双大括号语法不能作用在 html 的属性上面 遇到这种情况应该使用 v-bind 指令</h2><div class="c">div1</div><div v-bind:class="c">div2</div> <%--v-bind 把 vue 实例的 c 属性值 赋值给 这个div 标签的class 属性--%><div v-bind:id="dynamicId">1</div><div :class="c">1</div> <%--简写 v-bind: --%><button :disabled="isDisabled">Button</button><a v-bind:href="url">百度</a><a :href="url">百度2</a><h2>js表达式</h2><p>{{number+1}}</p><p>{{ ok ? 'YES' : 'NO' }}</p><p>{{ message2.split(' ').reverse().join(',') }}</p><p v-if="see">看得到吗？</p><h2>事件绑定</h2><button v-on:click="doSomething">按钮</button><button @click="doSomething">按钮2</button><h2>总结</h2><pre>指令： 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。指令：v-model="vuedata" 数据双向绑定v-bind:htmlattr="vuedata" 属性动态赋值v-bind的简写 :htmlattr="vuedata"v-on:htmlevent="vuemethods" 事件动态绑定v-on的简写 @htmlevent = "vuemethods"v-html : 可以解析 html 标签v-once : 一次性的插值v-if="vuedata" v-if 指令将根据表达式 vuedata 的值的真假来插入/移除 x 元素。</pre>
</div><script type="text/javascript">var app = new Vue({el: '#app', // 接管 app 这个 domdata: {msg: 'Hello Vue!',message:'<font color="red">hello</font>',c:'c',dynamicId:'5',isDisabled:false,url:"https://www.baidu.com",number:2,ok:true,message2:"ni hao ma",see:false},methods:{doSomething(){alert("点我干嘛");}}})//app.ok = false;
</script><style type="text/css">.c{border: 1px solid black;}.c2{border: 1px solid red;}
</style>
</body>
</html>
1.1 条件渲染v-if
<html>
<head><meta charset="UTF-8"><title>Title</title><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>--><script src="js/vue.js" type="text/javascript"></script>
</head>
<body><div id="app"><h2>v-if</h2><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no </h1><h2>v-if in template</h2><template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></template><h2>v-else</h2><div v-if="Math.random() > 0.5">Now you see me</div><div v-else>Now you don't</div><h2>v-else-if</h2><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><H2>用 key 管理可复用的元素</H2><template v-if="loginType === 'username'"><label>Username</label><input placeholder="Enter your username" key="username-input"></template><template v-else><label>Email</label><input placeholder="Enter your email address" key="email-input"></template><BUTTON @click="toggle">toggle</BUTTON><h2>v-show</h2><h1 v-show="ok">Hello! v-show</h1><h2>不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。</h2></div><h2>总结</h2><pre>v-if 用于条件性的渲染一块内容在template 上使用 v-if 条件渲染分组 最终的渲染结果是不包含templatev-else 表示 v-if 的else 块v-else-f 表示 v-if 的 else -if 可以连续使用 多分枝用key 管理 服用的元素v-show 只是简单的切换元素的 display</pre>
<script type="text/javascript">new Vue({el:"#app",data:{awesome:false,ok:false,type:'B',loginType:'username'},methods:{toggle(){this.loginType= this.loginType=='username'?'email':'username'}}});
</script>
</body>
</html>
1.2 列表渲染v-for
<html>
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body><div id="app"><h2>用 v-for 把一个数组对应为一组元素</h2><p>我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名</p><ul><!--<li>星期一</li><li>星期二</li><li>星期三</li>--><li v-for="item in items">{{item.date}}</li></ul><h2> 在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。 可以不看</h2><ul><li v-for="(item,index) in items" v-bind:key="index" v-bind:title="item.id">{{parentMessage}}--{{item.date}}--{{index}}</li></ul><ul><li v-for="(item,index) in myitems2.items2" v-bind:key="item.id" >{{parentMessage}}--{{item.date}}--{{index}}</li></ul><h2>在 v-for 里使用对象</h2><ul><li v-for="(value,name,index) in student">{{name}}--{{value}}--{{index}}</li></ul><pre>注意为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：<div v-for="item in items" v-bind:key="item.id"><!-- 内容 --></div>建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。</pre><hr><table style="border: 1px solid black"><tr><th>姓名</th><th>年龄</th><th>联系方式</th></tr><tr v-for="(stu,index) in students" v-bind:key="index"><td>{{stu.name}}</td><td>{{stu.age}}</td><td>{{stu.phone}}</td></tr></table></div>
<script type="text/javascript">var vue = new Vue({el:"#app",data:{parentMessage: 'Parent',items:[{date:"星期1",id:1},{date:"星期2",id:2},{date:"星期3",id:3}],myitems2:{parentMessage2:'Parent2',items2:[{date:"星期1111"},{date:"星期2222"},{date:"星期3333"}]},student:{name:'zs',age:18,phone:'136'},students:[{name:'zs',age:18,phone:'111'},{name:'ls',age:18,phone:'222'},{name:'ww',age:18,phone:'333'}]}});vue.students.push({name:'zl',age:19,phone:'444'})
</script>
</body>
</html>
1.3 计算属性 computed
<html>
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<div id="app"><h2>计算属性</h2><pre>模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example">{{ message.split('').reverse().join('') }}</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。vue computed 属性 用于计算复杂业务逻辑 把复杂业务逻辑抽取 实现维护方便</pre></div>
<hr>
<p>例子</p>
<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p><button @click="change()">change</button><h2>计算属性 setter</h2><p>Computed reversed info: "{{ reversedInfo }}"</p><button @click="change2()">change2</button><h2>计算属性缓存 vs 方法</h2><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p><p>Computed reversed message: "{{ reversedMessage2() }}"</p><p>Computed reversed message: "{{ reversedMessage2() }}"</p>
</div>
<script type="text/javascript">var count = 1;new Vue({el: '#example',data:{message:'Hello',info:'Hello2'},computed:{// 计算属性的 getterreversedMessage() {// `this` 指向 vm 实例count++;console.log('---调用了message get');console.log(count);return this.message.split('').reverse().join('')},reversedInfo:{get(){console.log('调用了info get')return this.info.split('').reverse().join('')},set(newValue){console.log('调用了info set');console.log(newValue);this.info = newValue;}}},methods:{change(){this.message="springcloud"},change2(){this.reversedInfo="springboot"},reversedMessage2 () {count++;console.log('---222');console.log(count);return this.message.split('').reverse().join('')}}});</script>
</body>
</html>
计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算 的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；
1.3.1 计算属性与方法的区别
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>布局篇 计算属性</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body><div id="vue"><p>调用当前时间的方法：{{currentTime1()}}</p><p>当前时间的计算属性：{{currentTime2}}</p>
</div><script type="text/javascript">var vm = new Vue({el: '#vue',data: {message: 'Hello Vue'},methods: {currentTime1: function () {return Date.now();}},computed: {currentTime2: function () {this.message;return Date.now();}}});
</script>
</body>
</html>| 说明：
注意：methods 和 computed 里不能重名 |
1.4侦听属性 watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调 |
<html>
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body><div id="app"><input type="text" v-model="n"> 的平方是：{{result}} {{result2()}}</div><div id="app2"><input type="text" v-model="n2"> 的平方是：{{result2}}</div>
<script type="text/javascript">new Vue({el:"#app",data:{n:1,// result:1},computed:{ // 计算属性result(){return this.n * this.n;}},methods:{result2(){return this.n*this.n;}}});let vm = new Vue({el:"#app2",data:{n2:1,result2:1},watch:{n2(newN,oldN){console.log(newN,oldN);this.result2= newN*newN;}}});//也会有下面的写法//vm.$watch('n2',function(newN,oldN){// console.log(newN,oldN);// this.result2= newN*newN;//})
</script>
</body>
</html>
1.5 class与style绑定
<html>
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body><pre>操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。</pre><h2>绑定 HTML Class</h2><div id="app"><h3>对象语法</h3><div :class="{ active: isActive }"></div><hr><div class="static":class="{ active: isActive, 'text-danger': hasError }">123</div><hr><div :class="classObject">123</div><hr><h2>数组语法</h2><div v-bind:class="[activeClass, errorClass]"></div><h2>绑定内联样式 v-bind:style</h2><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">123</div><div v-bind:style="styleObject">222</div></div>
<script type="text/javascript">new Vue({el:"#app",data:{isActive:true,hasError: true,classObject:{active: true,'text-danger': false},activeClass: 'active',errorClass: 'text-danger',activeColor: 'red',fontSize: 30,styleObject: {color: 'red',fontSize: '13px'}}});
</script><style type="text/css">.active{border: 1px solid black;width: 100px;height: 100px;}.static{background-color: aquamarine;}.text-danger{color: red;}</style>
</body>
</html>
1.6 事件处理
<html>
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body><h2>可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。</h2><div id="app"><button @click="counter+=1">Add 1</button><p>The button above has been clicked {{ counter }} times.</p></div><hr><h2>事件处理方法</h2><div id="example-2"><!-- `greet` 是在下面定义的方法名 --><button @click="greet">Greet</button></div><h2>内联处理器中的方法</h2><div id="example-3"><button @click="say('hi')">Say hi</button><p>有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：</p><a @click="warn('Form cannot be submitted yet.', $event)" href="https://www.baidu.com">Submit</a></div><h2>事件修饰符</h2><pre>在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。.stop.prevent.capture.self.once.passive</pre><div id="example-4"><a @click.prevent="doThis" href="https://www.baidu.com">百度</a><hr><div @click = "doDivClick" style="width: 100px;height: 100px;border: 1px solid black"><a @click.stop="doThis" href="https://www.baidu.com">百度</a></div></div><h2>按键修饰符</h2><div id="example-5"><input type="text" v-model="name" @keyup.enter="submit"></div>
<script type="text/javascript">new Vue({el:"#app",data:{counter:0}});var vue2 = new Vue({el:"#example-2",data:{name:'zs'},methods:{greet(event){// `event` 是原生 DOM 事件//alert(event.target.tagName);}}});new Vue({el:"#example-3",data:{name:'zs'},methods:{say(mess){alert(mess);// `event` 是原生 DOM 事件//alert(event.target.tagName);},warn(mess,event){// 现在我们可以访问原生事件对象if (event) {event.preventDefault()}alert(mess);}}});new Vue({el:"#example-4",methods:{doThis(){alert("执行到了a的click");},doDivClick(){alert("执行到了div的click");}}});new Vue({el:"#example-5",data:{name:'zs'},methods:{submit(){alert(this.name);}}});//alert(vue2.name);//vue2.greet();</script>
</body>
</html>
1.7 表单处理
<html>
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body><div id="app"><h2>文本</h2><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p><p style="white-space: pre-line;">{{ message }}</p><br><h2>文本域</h2><textarea v-model="message" placeholder="add multiple lines"></textarea><h2>复选框</h2><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label><h2>多个复选框，绑定到同一个数组：</h2><div ><input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames }}</span></div><h2>单选按钮</h2><div ><input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span></div><h2>选择框</h2><div ><select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span></div><H2>多选选择框</H2><div ><select v-model="selecteds" multiple style="width: 50px;"><option>A</option><option>B</option><option>C</option></select><br><span>Selected: {{ selecteds }}</span></div><h2>用 v-for 渲染的动态选项：</h2><select v-model="selected"><option v-for="option in options" :value="option.value">{{ option.text }}</option></select><span>Selected: {{ selected }}</span><h2>值绑定</h2><pre>对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：</pre><!-- 当选中时，`picked` 为字符串 "a" --><input type="radio" v-model="picked" value="a"> {{picked}}<!-- `toggle` 为 true 或 false --><input type="checkbox" v-model="toggle" true-value="yes"> {{toggle}}<!-- 当选中第一个选项时，`selected` 为字符串 "abc" --><select v-model="selected"><option value="abc">ABC</option></select>{{selected}}<h2>单选按钮</h2><input type="radio" v-model="pick" v-bind:value="a"> {{pick}}<h2>选择框的选项</h2><select v-model="selectedobj"><!-- 内联对象字面量 --><option v-bind:value="{ number: 123 }">123</option></select>{{selectedobj.number}}<h2>修饰符</h2><!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" > {{msg}}<!--如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：--><input v-model.number="age" type="number"><%--如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：--%><input v-model.trim="msg"></div><script type="text/javascript">new Vue({el:"#app",data:{message:"",checked:'',checkedNames: [],picked:'',selected: 'B',selecteds:[],options:[{ text: 'One', value: 'A' },{ text: 'Two', value: 'B' },{ text: 'Three', value: 'C' }],toggle:'',a:'xxx',pick:'ooo',selectedobj:{},msg:''}});</script>
</body>
</html>
二、组件基础
什么是“组件化”
Vue的组件化设计思想借鉴了Java的面向对象思想。Java认为万物皆对象，在Vue中，万物皆组件。
也就是说，在实际的vue项目中，以及使用了Vue框架的项目中，Vue的对象都会以组件的形式出现，能被反复使用。
要想实现组件化，需要在页面中注册组件：关于注册的方式有两种，分别是全局注册和本地注册。
| vue的全局注册，也就意味着在页面的任意一个被vue绑定过的div中，都可以使用全局注册了的vue组件。 但是，如果是对vue组件进行本地注册，那么在其他被vue绑定的div中，不能使用该组件。 |
<html>
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body><div id="app"><button-counter :title="msg" @event="fun1"><p>这是一个p</p></button-counter><button-counter :title2="msg2"></button-counter><button-counter></button-counter></div><script type="text/javascript">Vue.component('button-counter',{ // 创建一个全局组件 组件的名字是 button-counter//props:['title'], /*父组件向子组件传值*/props:{title:{type:String,default:'默认值'},title2:{type:String,default:''},},data:function () {return {count:0}},methods:{clickFun(){this.count++;this.$emit('event',this.count); // 触发 父组件的事件}},template:'<div><h1>h1...</h1><slot></slot><button @click="clickFun">{{title}}You clicked me {{ count }} times.{{title2}}</button><slot></slot></div>'});new Vue({el:"#app",data:{msg:'标题1',msg2:'标题2'},methods:{fun1(count){console.log('子组件向父组件传参'+count);}}});/** 组件的概念* 如何创建全局组件* 组件的模板只能有一个根元素* props 取值 赋值（父组件向子组件赋值）* */
</script>
</body>
</html>
<html>
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body><div id="blog-post-demo"><!--<blog-post title="My journey with Vue" content="content..."></blog-post><blog-post title="Blogging with Vue"></blog-post><blog-post title="Why Vue is so fun"></blog-post>--><hr><div :style="{ fontSize: postFontSize + 'em' }"><blog-post @enlarge-text="onEnlargeText"v-for="post in posts"v-bind:key="post.id"v-bind:title="post.title"v-bind:content="post.content"v-bind:post="post"></blog-post></div><hr><custom-inputv-bind:value="searchText"v-on:input="searchText = $event"v-model="searchText"></custom-input><hr><component-a title="这是局部组件"></component-a></div><script type="text/javascript">Vue.component('blog-post', {//props: ['title','content'],props: ['post'],template: '<div class="blog-post"><h3>{{ post.title }}</h3>' +'<button @click="clickFun">Enlarge text</button><div v-html="post.content"></div><div v-html="post.comments"></div></div>',methods:{clickFun(){this.$emit('enlarge-text',0.1);}}})Vue.component('custom-input', {props: ['value'],template: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)">`})new Vue({el: '#blog-post-demo',data: {posts: [{ id: 1, title: 'My journey with Vue' ,content:'content1',comments:'评论1'},{ id: 2, title: 'Blogging with Vue' ,content:'content2',comments:'评论2'},{ id: 3, title: 'Why Vue is so fun' ,content:'content3',comments:'评论3'}],postFontSize: 1,searchText:''},methods:{onEnlargeText(enlargeAmount) {this.postFontSize += enlargeAmount;}},components:{'component-a':{props: ['title'],template: '<div ><h2>{{title}}</h2></div>'}}})</script><style type="text/css">.blog-post{border: 1px solid black;}
</style>
</body>
</html>
一个完整的Vue组件。该组件包含了三个部分：template（html视图层内容）、script（Model层）、style（CSS样式）。这样封装好的组件可以被复用，也可以作为其他组件的组成部分而被封装——Java的面向对象再次体现。
-
特点1： template标签内，必须有且只能有一个根标签。
-
特点2： componet中注册的组件中的data，必须是函数的形式。
这里是个VsCode的Vue模板
{"生成vue模板": {"prefix": "vue","body": ["<template>","<div></div>","</template>","","<script>","//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）","//例如： import <<组件名称>> from '<<组件路径>>' ; ","","export default {","//import 引入的组件需要注入到对象中才能使用","components: {},","props: [],","data() {","//这里存放数据","return {","","};","},","//计算属性 类似于data概念","computed: {},","//监控data 中的数据变化","watch: {},","//方法集合","methods: {","","},","//生命周期 -创建完成 （可以访问当前this 实例）","created() {","","},","//生命周期-挂载完成（可以访问DOM 元素）","mounted() {","","},","beforeCreate() {}, //生命周期 -创建之前","beforeMount() {}, //生命周期 - 挂载之前","beforeUpdate() {}, // 生命周期 - 更新之前","updated() {}, // 生命周期 -更新之后","beforeDestroy() {}, //声明周期 - 销毁之前","destroyed() {}, // 生命周期 - 销毁完成","activated() {}, // 如果页面有keep-alive 缓存功能 这个函数会触发 ","}","</script>","<style scoped>","/* //@import url($3);引入公共css类 */","$4","</style>"],"description": "生成vue模板"}
}
