Vue的基础语法
原创
开始学习Vue前，我们一起来认识一下什么是Vue吧🧐
Vue
1、概念
Vue是一套用于构建用户界面的渐进式框架（框架是为了快速开发）
2、思路转变
从js到vue，有什么区别呢？
（1）js：先获取元素才能操作元素的内容，样式等等
（2）vue：先有数据，绑定数据，操作数据
3、vue资源及下载
（1）官网
（2）安装vue.js资源文件，建议下载开发版本
4、使用
（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资源文件进行手动关闭
5、关于插件
（1）资源网站有各种各样的插件，小伙伴们可以根据自己的需求，下载各种插件
极简插件_Chrome扩展插件商店_优质crx应用下载 (zzzmh.cn)
（2）vue的资源文件，小伙伴们可以到这个资源网站搜索下载
（3）该资源，小伙伴们可以加到浏览器的扩展中，这样控制器就有vue调试的功能了
基础语法
一、插值操作
1、Mustache
（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>
2、v-once指令
（1）元素和组件只渲染一次，不随数据变化而变化，即在开发者工具修改数值时，页面不会变化
（2）写法
<h1 v-once>{{name}}</h1>
3、v-html指令
（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>4、v-text指令
（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>5、v-pre指令
（1）跳过vue的语法解析，就是要页面显示{{}}括号
（2）写法
<h1 v-pre>{{name}}</h1>6、v-clock
（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、v-bind指令
（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>2、绑定class
（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>3、绑定style
（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>注意：复合属性在对象中要用驼峰的形式表示
三、methods属性
1、改变class
<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>2、改变style
<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、computed
（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>2、computed缓存效果
<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、使用方法
（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>2、参数问题
（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>3、事件修饰符
（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 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
