Vue js 学习

Vue js 简介

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。

Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。

Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。

Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。

Vue.js使用文档及下载Vue.js

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/
vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html

Vue js 基本概念

开发版本vue.js，上线版本vue.min.js

Vue实例

每个 Vue 应用都是通过实例化一个新的 Vue对象开始的：
其中，el属性对应一个标签，当vue对象创建后，这个标签内的区域就被vue对象接管，在这个区域内就可以使用vue对象中定义的属性和方法。

数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/vue.js"></script></head>
<body><div id="app">{{msg}}</div><script>// 一个应用是从一个vue对象开始的// 创建一个vue对象var vm = new Vue({el:"#app",data:{msg:"hello world!",}})</script>
</body>
</html>

Vue js 模板语法

模板语法指的是如何将数据放入html中，Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层 Vue 实例的数据。所有 Vue.js的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

插入值 双大括号{{message}}指令  本质上是将js封装好使用v-bind 链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><p>{{sTr}}</p><p>{{iNum + 15}}</p><P>{{bIsok? 'AMD YES' : 'NO'}}</P><P>{{sTr.split('').reverse().join('')}}</P><br><!-- 指令带有v-的前缀属性 本质上是js操作分装  --><!-- <a v-bind:href="sUrl">百度的链接</a><input type="button" v-on:click="fnReverse" name="" id="" value="数据反转"> --><!-- 指令简写 --><a :href="sUrl">百度的链接</a><input type="button" :click="fnReverse" name="" id="" value="数据反转"></div><script>var vm = new Vue({el:"#app",data:{sTr:"hello world",iNum:10,bIsok:true,sUrl:'http://www.baidu.com'},methods:{fnReverse:function(){this.sTr = this.sTr.split('').reverse().join('')}}})</script>
</body>
</html>

Class与style绑定

Class绑定
可以给v-bind:class传一个对象，以动态的切换class

style绑定
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 来命名

一般多使用class绑定切换class

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./js/vue.js"></script><style>.big{font-size: 100px;}.red{color: red;}</style>
</head>
<body><div id="app"><!-- 类的绑定 --><p :class="{big:isBig,red:isRed}">这是第一个段落</p><p :class="[isBig?'big':'', 'red']">这是第二个段落</p></div><script>var vm = new Vue({el:"#app",data:{isBig:true,isRed:true,}})</script>
</body>
</html>

条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)，常用的条件指令如下：
v-if v-else-if v-else 控制元素的创建或者销毁
v-show 控制元素的隐藏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./js/vue.js"></script></head>
<body><div id="app"><h1 v-if='bIsok'>这是使用v-if的标签h1</h1><h2 v-else>这是使用v-else的h2</h2><h3 v-show='bIsok'>这是使用v-show的h3</h3><div v-if="sCode=='A'">A</div><div v-else-if="sCode=='B'">B</div><div v-else-if="sCode=='C'">C</div><div v-else>not A/B/C</div></div><script>var vm = new Vue({el:"#app",data:{bIsok:true,sCode:'A'}})</script>
</body>
</html>

事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，事件的处理，简单的逻辑可以写在指令中，复杂的需要在vue对象的methods属性中指定处理函数。
事件修饰符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><p>{{iNum}}</p><input type="button" name="" id="" value="递增" @click="iNum+=1"><input type="button" value="弹框显示iNum02的值" @click="fnShow"></div><script>var vm = new Vue({el:"#app",data:{iNum:10,iNum02:15},methods:{fnShow:function(){alert("iNum02的值是:"+this.iNum02);}}})</script>
</body>
</html>

实际开发中，事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为，在vue.js可以加上事件修饰符

<!-- 阻止单击事件继续传播 -->
<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>

实例: 弹框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/main.css"><title>Document</title><script src="js/vue.js"></script></head>
<body><div id="app" @click="bIsshow=false"><input type="button" value="弹出弹框" id="btn01" @click.stop="bIsshow=true"><div class="pop_main" id="pop" v-show="bIsshow"><div class="pop_con" @click.stop><div class="pop_title"><h3>系统提示</h3><a href="#" id="shutoff" @click="bIsshow=false">×</a></div><div class="pop_detail"><p class="pop_text">亲！请关注近期的优惠活动！</p></div><div class="pop_footer"></div></div><div class="mask"></div></div></div><script type="text/javascript">var vm = new Vue({el:"#app",data:{bIsshow:false,}})</script>
</body>
</html>

小练习: 选项卡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.tab_con{width:500px;height:350px;margin:50px auto 0;}.tab_btns{height:50px;}.tab_btns input{width:100px;height:50px;background:#ddd;border:0px;outline:none;}.tab_btns .activve{background:gold;}.tab_cons{height:300px;background:gold;}.tab_cons div{height:300px;line-height:300px;text-align:center;display:none;font-size:30px;}.tab_cons .current{display:block;}</style><script src="js/vue.js"></script><script></script>
</head><body><div class="tab_con" id="app"><div class="tab_btns"><input type="button" value="按钮一" :class="[(iNow==0)?'active':'']" @click="iNow=0"><input type="button" value="按钮二" :class="[(iNow==1)?'active':'']" @click="iNow=1"><input type="button" value="按钮三" :class="[(iNow==2)?'active':'']" @click="iNow=2"></div><div class="tab_cons"><div :class="[(iNow==0)?'current':'']">按钮一对应的内容</div><div :class="[(iNow==1)?'current':'']">按钮二对应的内容</div><div :class="[(iNow==2)?'current':'']">按钮三对应的内容</div></div></div><script>var vm = new Vue({el:'#app',data:{iNow:0}})</script>
</body>
</html>

列表渲染

通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><!-- 将数组的数据放到页面 带索引值 --><ul><li v-for="item in aList">{{ item }}</li></ul><!-- 带索引值 --><ul><li v-for="(item,index) in aList">{{index+1}},{{ item }}</li></ul><!-- 将对象的数据放到页面 --><ul><li v-for="item in oPerson">{{ item }}</li></ul><!-- 将对象的数据放到页面 带建名 --><ul><li v-for="(item,key) in oPerson">{{key}},{{ item }}</li></ul></div><script>var vm = new Vue({el:"#app",data:{aList:['红海', '妇联3', '战狼2', '捉妖记2'],oPerson:{"name":"李思", "age":18, "gender":"女"}}})</script>
</body>
</html>

表单绑定输入输出 – 数据的双向绑定

可以用 v-model 指令在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

单行文本框<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>多行文本框<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>复选框单个复选框，绑定到布尔值：<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>多个复选框，绑定到同一个数组：<div id='example-3'><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>......new Vue({el: '#example-3',data: {checkedNames: []}
})单选框<div id="example-4"><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>......
new Vue({el: '#example-4',data: {picked: ''}
})下拉框<div id="example-5"><select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span>
</div>
......new Vue({el: '...',data: {selected:''}
})

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><form action=""><!-- 单行文本输入 --><p><label for="">用户名:</label>{{username}}<br><input type="text" v-model="username"><br><input type="button" value="改变值" @click="fnChange"></p></form><p><label for="">性别:</label>{{xingbie}}<br><input type="radio" value="0" name="gender" v-model="xingbie">男<input type="radio" value="1" name="gender" v-model="xingbie">女</p><p><!-- 多行文本输入 --><label for="">个人信息:</label>{{info}}<br><textarea v-model="info" name="" id="" cols="30" rows="10"></textarea></p><p><label for="">爱好:</label>{{}}<br><input type="checkbox" v-model="aihao" value="study" name="hobby" >学习<input type="checkbox" v-model="aihao"  value="practise" name="hobby">练习<input type="checkbox" v-model="aihao" value="basketball" name="hobby">打球</p> <p><label for="">{{site}}<br></label><select v-model="site" name="" id=""><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option></select></p></div><script>var vm = new Vue({el:"#app",data:{username:"",info:'',xingbie:0,aihao:[],site:3,},methods:{fnChange:function(){this.username += 'haha!'}}})</script>
</body>
</html>

计算属性和侦听属性

计算属性和侦听属性方法定义在侦听之前
computed 计算属性
watch 侦听属性

计算属性
模板内一般只能进行简单的运算使用计算属性可以使用较为复杂的运算

侦听属性
伴随某一属性的变化而进行相应的变化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><p>{{message}}<br></p><p>{{message.split("").reverse().join('')}}</p><!-- 上面的写法建议写成下面计算属性的形式 --><p>{{reversemsg}}</p><input type="button" value="改变属性" @click="fnXXX" name="" id=""></div><script>var vm = new Vue({el:"#app",data:{message:"hello"},methods:{fnXXX:function(){this.message += 'haha';}},// 计算属性computed:{reversemsg:function(){return this.message.split("").reverse().join('')}},watch:{ // 定义侦听属性message:function(newVal, oldVal){console.log(newVal + ' | ' + 'oldVal');},}})  </script>
</body>
</html>

过滤器

过滤器实质上是一个函数可以在一个组件的选项中定义组件内部过滤器
vue.js 允许你自定义过滤器
{{ prize | RMB }}
可以在一个组件的选项中定义组件内部过滤器

定义全局过滤器
将过滤器绑定到类上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><!-- 过滤器 可以用于双花括号 --><p>商品的价格是: {{price | RMB | Yuan}}</p></div><div id="app2"><!-- 过滤器 可以用于双花括号 --><p>商品的价格是: {{price | $ | Yuan}}</p></div></body>
<script>// 定义全局过滤器 绑定到Vue类上Vue.filter('Yuan', function (value) { if(value==''){return;}return value + ' 元'})var vm = new Vue({el:"#app",data:{price:99.99,},// 局部过滤器filters:{RMB:function(value){if(value==''){return;}return '￥ ' + value;}}})var vm2 = new Vue({el:"#app2",data:{price:88.88},filters:{$:function(value){if(value==0){return;}return '$ ' + value;}}})</script>
</html>

实例的生命周期

实例生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新 DOM 等。同时在这个过程中会自动运行一些叫做生命周期钩子的函数，我们可以使用这些函数，在实例的不同阶段加上我们需要的代码，实现特定的功能。
beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始
beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted

实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用，一般用它来做dom的初始化操作。
beforeUpdate

数据发生变化前调用
updated

数据发生变化后调用

一般来说使用vuejs 操作数据是在生命周期的mounted使用
这里写图片描述

es6

变量声明let和const

let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>alert(iNum01); // 弹出undefined 这个叫做变量预解析var iNum01 = 12;alert(iNum02);// es6 新增定义变量的关键字// let 定义的变量没有变量的预解析let iNum02 = 199;// const 也没有变量预解析alert(iNum03);const iNum03 = 36;iNum02 = 25;// const 定义的是一个常量 不可修改iNum03 = 37;</script>
</head>
<body></body>
</html>

箭头函数

可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this，解决了JavaScript中this指定混乱的问题。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>function fnRs(a,b) { var rs = a + b;alert(rs);};fnRs('cc', 'dd')//  上面定义函数的方式可以改写成赋值定义的方式var fnRs = function (a, b) { var rs = a + b;alert(rs);},// 改成箭头函数的形式var fnRs =  (a, b)=> { var rs = a + b;alert(rs);},var fnRs =  a => { alert(a);},</script>
</head>
<body></body>
</html>

数据交互

vue.js没有集成ajax功能，要使用ajax功能，可以使用vue官方推荐的axios.js库来做ajax的交互。 axios库的下载地址：https://github.com/axios/axios/releases

axios完整写法：

axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
});

axios请求的写法也写成get方式后post方式。
执行get请求

// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应

axios.get('/user?ID=12345')
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});

// 可选地，上面的请求可以这样做

axios.get('/user', {params: {ID: 12345}
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});

执行post请求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Vue学习Ⅵ（路由）
一、前端渲染与后端渲染在web开发的早期都是使用后端渲染，如jsp（java server page），php等等前端渲染流程：先由浏览器发送一个 url(api接口地址) 到服务端(API接口服务器)，服务端(API接口服务器) 再解析 …...
2024/4/26 9:13:18
vue简介、基本指令
1.vue简介目的:快速开发,简单官网地址:https://cn.vuejs.org/ 1-1.vue介绍作者:尤雨溪优点易用只要会HTML.css.JavaScript就可以直接使用灵活不断繁荣的生态系统(vue Router,vuex,服务端渲染)通过script连接一个vue.js库直接开发即可通过安装vue框架实现快速项目…...
2024/4/28 0:52:26
开眼角好还是割埋线双眼皮前后注意事项有哪些
...
2024/4/27 16:59:36
对vue的理解
一、从历史说起 Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网最早的网页是没有数据库…...
2024/4/27 23:05:38
vue简单运用
vue 文章目录vue**前端三要素****前后端分离演变历史****为什么要使用** Vue.jsVue.js **的两大核心要素**试水（入门代码）生命周期语法使用条件判断列表遍历计算属性监听属性双向数据绑定取值路由路由映射跳转页面携带值挑战页面或路由写在开头&#xff…...
2024/4/27 2:05:50
JavaScript实现选项卡
最近在学习JavaScript的过程中，做了一些小Demo，想在博客上记录一下。这是一个选项卡的例子，就是点击不同的按钮，显示不同的内容。思路是先隐藏所有内容，在根据点击的按钮显示出相应的内容。代码如下：<html> <head><title>选项卡</title><styl…...
2024/4/27 20:23:40
杭州哪家医院双眼皮手术好
...
2024/4/28 19:30:21
【ionic 3】怎么使用官网的demo实现页面分栏
要实现的功能： 实现过程很简单，去官网找demo，把相关代码复制到项目中即可。第一步：在官网找到对应页面。官网地址：https://ionicframework.com/docs/ 第二步：打开右上角的Demo Source，把…...
2024/4/29 1:34:27
js选项卡
网站常用效果之选项卡切换效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>js选项卡</title> <meta name=&…...
2024/4/28 13:07:39
基于 DevOps 实践的 .NET Core 给开发者带来了哪些好处？
关键要点\n \n\n无论你目前使用什么样的技术栈，DevOps都是值得一试的。\n\n\n闭源、专有软件和构建过程与DevOps实践不兼容。\n\n\n.NET Core是开源的，是基于DevOps构思和构建的。\n\n\n.NET Core CLI和Roslyn API让整个交付流程变得更加开放&#xff0c…...
2024/4/28 1:17:54
[转]Angular, Backbone, or Ember: Which is Best for your Build?
In order to choose which framework is right for your build, we’ve asked four important questions of each framework. AngularJS 1. What is AngularJS? AngularJS is a client-side JavaScript framework that allows you to organize large, client-heavy applicatio…...
2024/4/27 17:57:24
react hooks_使用React和Spring Boot构建一个简单的CRUD应用
react hooks“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。厌倦了一次又一次地建立相同的登录屏幕？ 尝试使用Okta API进行托管身份验证，授权和多因素身份验证。 React的设计使创建交互式UI变得轻松自如。它的状态管理非常有效&#xff…...
2024/4/27 17:21:40
android glsurfaceview renderer
MyArrow的专栏目录视图摘要视图订阅 Android系统--视图绘制 (View Render) 分类： Android Framework 2013-11-21 16:29 8208人阅读评论(4) 收藏举报目录(?)[] 1. 简介 Android系统--视图绘制主要由以下几部分组成： 1) Canvas(画布) 提供画图所需要…...
2024/4/27 7:38:19
埋线双眼皮全切双眼皮多久恢复自然
...
2024/4/27 4:51:03
洛阳隔埋线双眼皮会不会留疤痕吗
...
2024/4/28 16:23:54
交大九院南京双眼皮费用施尔美v
...
2024/4/27 13:55:05
南京双眼皮哪里做的好医院好
...
2024/4/28 5:15:41
angularJS 正则表达式验证
<!DOCTYPE html><html><head><meta charset"UTF-8"><title>anglar为核心验证</title><script src"js/angular.min.js"></script><style>input{display: block;}ul li{color: red;}</style>&l…...
2024/4/28 7:50:24
angular表达式{{}}先渲染问题
一般是这样解决的用angular的指令 ng-cloak指令。这个指令意思是先把这个指令的代码给隐藏，如果有值再显示。但是效果不理想。一般还得自己加一个class <style>[ng-cloak],.ng-cloak{display:none;} </style>...
2024/4/27 23:24:07
开双眼皮要拆线吗
...
2024/4/29 0:30:29

Vue JS 学习