开始学习Vue前,我们一起来认识一下什么是Vue吧🧐
Vue是一套用于构建用户界面的渐进式框架(框架是为了快速开发)
从js到vue,有什么区别呢?
(1)js:先获取元素才能操作元素的内容,样式等等
(2)vue:先有数据,绑定数据,操作数据
(1)官网
(2)安装vue.js资源文件,建议下载开发版本
(1)vue资源的引入
<script src="../vue.js"></script>
(2)基础模板
<div id="app"></div>
<script>
const app = new Vue({
el:'#app',//挂载
data:{},//数据
method:{},//方法
})
</script>
(3)运行检查会有生产环境的提示,可以到下载的vue.js资源文件进行手动关闭
(1)资源网站有各种各样的插件,小伙伴们可以根据自己的需求,下载各种插件
极简插件_Chrome扩展插件商店_优质crx应用下载 (zzzmh.cn)
(2)vue的资源文件,小伙伴们可以到这个资源网站搜索下载
(3)该资源,小伙伴们可以加到浏览器的扩展中,这样控制器就有vue调试的功能了
(1)用于绑定数据,且这些数据都是响应式,同时可以做一些简单的表达式
(2)写法:{{}}
<div id="app">
<h1>{{name}}</h1>
<h2>{{arr[1]+arr[2]}}</h2><!-- 运算数组结果 -->
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'申小兮',
arr:[1,2,3,4,5]
},
})
</script>
(1)元素和组件只渲染一次,不随数据变化而变化,即在开发者工具修改数值时,页面不会变化
(2)写法
<h1 v-once>{{name}}</h1>
(1)可以把字符串解析成标签,区别于使用mustache时显示原本的内容,即标签对也会直接显示在页面上
(2)写法
<div id="app">
<h1 v-html="name"></h1>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'<a href="https://blog.csdn.net/qq_51478745?type=blog">申小兮</a>',
},
})
</script>
(1)作用于mustache一致
(2)写法
<div id="app">
<h1>{{name}}</h1>
<h1 v-text="name"></h1>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'申小兮',
},
})
</script>
(1)跳过vue的语法解析,就是要页面显示{{}}括号
(2)写法
<h1 v-pre>{{name}}</h1>
(1)设置未渲染时的样式,注意vue渲染是需要时间的,在渲染过程中会显示很多尖括号,使用户体验感不好
(2)通过定时器凸显一下渲染时间问题
<div id="app">
<h1>{{name}}</h1>
</div>
<script>
setTimeout(() => {
const app = new Vue({
el: '#app',
data: {
name: '申小兮',
},
})
},2000)
</script>
(3)解决渲染问题的写法
<style>
[v-clock]{
display: none;
}
</style>
<h1 v-clock>{{name}}</h1>
(1)作用是动态绑定属性
(2)简写方法就是一个冒号:
(3)使用时属性等号右边是一个变量
<div id="app">
<img v-bind:src="url" alt="">
<img :src="url" alt="">
</div>
<script>
const app = new Vue({
el: '#app',
data: {
url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs1.51ctocdn.cn%2Fimages%2F201708%2F11%2F1425d6de826257c71f3b9168e52392b7.jpg&refer=http%3A%2F%2Fs1.51ctocdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668056193&t=00500010e17bdaa85cf4085c7a979c32'
},
})
</script>
(1)字符串:适用于样式类名不确定,需要动态绑定
(2)对象:绑定的个数确定,名字确定,动态决定用不用
(3)数组(不常用):绑定的个数不确定,名字也不确定
<style>
.default{
width: 200px;
height: 200px;
background-color: rgb(0, 200, 255);
box-sizing: border-box;
}
.happy{
background-color: red;
border-radius: 50%;
}
.sad{
background-color: gray;
border: 10px solid black;
}
.active{
border-radius: 50px;
border: 20px solid green;
}
.normal{
border: 5px solid yellow;
}
</style>
<div id="app">
<div class="default" :class="mood"></div>
<div class="default" :class="moodObj"></div>
<div :class="moodArr"></div>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
mood:'happy',//字符串法
moodObj:{//对象法
active:false,
normal:false,
},
moodArr:['default','active','sad']//数组法
},
})
</script>
(1)对象
(2)数组
<script>
const app = new Vue({
el:'#app',
data:{
styleObj:{//对象
backgroundColor:'red',
borderRadius:'50%'
},
styleArr:[//数组
{
backgroundColor:'red',
borderRadius:'50%'
},
{
border:'10px solid gray'
},
]
},
})
</script>
注意:复合属性在对象中要用驼峰的形式表示
<div id="app">
<div class="default" :class="mood"></div>
<div class="default" :class="moodObj"></div>
<div :class="moodArr"></div>
{{changeClass()}}
</div>
<script>
const app = new Vue({
el:'#app',
data:{
mood:'sad',
moodObj:{
active:false,
normal:false,
},
moodArr:['default','active','sad']
},
methods:{
changeClass(){
console.log(this);//指当前的Vue
this.mood='happy'//不要漏掉this
}
}
})
</script>
<div id="app">
<div class="default" :style="styleObj"></div>
<div class="default" :style="styleArr"></div>
{{changeStyle()}}
</div>
<script>
const app = new Vue({
el:'#app',
data:{
styleObj:{
backgroundColor:'yellow',
borderRadius:'50%',
},
styleArr:[
{
backgroundColor:'yellow',
borderRadius:'50%',
},
{
border:'10px solid green'
},
]
},
methods:{
changeStyle(){
this.styleObj.borderRadius = '50px'
}
}
})
</script>
(1)将数据转化后再显示
(2)方法名称不能和data,methods一样
(3)写法
<div id="app">
<h1>{{userInfo()}}</h1>
<h1>{{info}}</h1><!-- 注意computed调用方法不需要括号() -->
</div>
<script>
const app = new Vue({
el:'#app',
data:{
user:{
name:'申小兮',
age:18,
},
},
methods:{
userInfo(){
return `我叫${this.user.name},今年${this.user.age}`
}
},
computed:{
info(){
return `我叫${this.user.name},今年${this.user.age}`
}
}
})
</script>
<div id="app">
<h1>{{userInfo()}}</h1>
<h1>{{info}}</h1>
<h1>{{userInfo()}}</h1>
<h1>{{info}}</h1>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
user:{
name:'申小兮',
age:18,
},
},
methods:{
userInfo(){
console.log('methods');
return `我叫${this.user.name},今年${this.user.age}`
}
},
computed:{
info(){
console.log('computed');
return `我叫${this.user.name},今年${this.user.age}`
}
}
})
</script>
(1)v-on:事件类型="函数()"
(2)缩写
@事件类型="函数()"
<div id="app">
<button v-on:click="add()">+</button>
<button @click="sub()">-</button>
<div>{{num}}</div>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
num:0,
},
methods:{
add(){
this.num++;
},
sub(){
this.num--;
}
}
})
</script>
(1)没有参数:括号可以不写
<button v-on:click="add">+</button>
<button @click="sub">-</button>
(2)有参数
<div id="app">
<button v-on:click="add(5)">+</button>
<button @click="sub()">-</button>
<div>{{num}}</div>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
num:0,
},
methods:{
add(a){
this.num += a;
},
sub(){
this.num--;
}
}
})
</script>
(3)默认形参:$event
<div id="app">
<button v-on:click="add(5)">+</button>
<button @click="sub($event,2)">-</button>
<div>{{num}}</div>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
num:0,
},
methods:{
add(a){
this.num += a;
},
sub(e,b){
console.log(e);
this.num -= b;
}
}
})
</script>
(1)阻止冒泡事件
①什么是冒泡事件?举个例子,当用户仅想点击按钮时,按钮下的box也被点击了
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div id="app">
<div class="box" @click="boxClick">
<button @click="btnClick">点击</button>
</div>
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
boxClick(){
console.log('点击了box');
},
btnClick(){
console.log('点击了按钮');
}
}
})
</script>
②解决方法一:@事件类型.stop
<button @click.stop="btnClick">点击</button>
③解决方法二:.stopPropagation()
btnClick(){
console.log('点击了按钮');
event.stopPropagation()
}
(2)阻止默认事件,例子:点击登录form表单会自动跳转至action下的页面,即使没有action页面,当前页面也会在点击之后刷新,如果不想默认跳转呢?
①解决法一:@事件类型.prevent
<div id="app">
<form action="https://blog.csdn.net/qq_51478745?type=blog">
<button @click.prevent="login">登录</button>
</form>
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
login(){
console.log('登录成功');
}
}
})
</script>
②解决法二:event.preventDefault();
<div id="app">
<form action="https://blog.csdn.net/qq_51478745?type=blog">
<button @click="login">登录</button>
</form>
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
login(){
event.preventDefault();
console.log('登录成功');
}
}
})
</script>
(3)once一次事件:按钮仅一次有效,@click.once
<div id="app">
<button @click.once="onceClick">一次事件</button>
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
onceClick(){
console.log('执行');
}
}
})
</script>
(4)回车事件:@keyup.enter
<div id="app">
<input @keyup.enter="enterUp">
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
enterUp(){
console.log('回车');
}
}
})
</script>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。