VUE基本语法
文章目录
- 一.什么是VUE
- 二.VUE基本语法
- 2.1 Vue的基本使用
- 2.2 el
- 2.3 data
- 2.4 methods
- 三.VUE表达式
- 四.VUE的指令
- v-text,v-html
- v-for
- v-bind: 绑定属性
- v-model: 数组双向绑定
- v-show:展示与隐藏
- v-if:判断
- v-on:注册事件
- 五.VUE组件
- 5.1 全局组件
- 5.2 局部组件
一.什么是VUE
渐进式的Javascript框架
MVVM(Model,View,ViewModel)模式
二.VUE基本语法
2.1 Vue的基本使用
- 引用vue.js
- 准备要挂载的标签
- 创建vue对象，进行挂载
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="js/vuejs/vue.min.js">script>
head>
<body>
<div id="app">
{{message}}
div>
<script>
new Vue({
el:"#app", //挂载
data:{
message:"hello,Vue!"
},
methods:{
}
});
script>
body>
2.2 el
- 指定相应的挂载对象
- 可以使用id,class,标签(建议使用id挂载)
- 挂载后代表这个标签被vue接管
2.3 data
- vue对象准备的数据
- 这个数据发生变化后,用到它的view部分值也改变
2.4 methods
- vue中对象的方法
- 在html中 {{方法()}}
- 在js vue对象.方法()
- 方法中的this就是指这个vue对象
三.VUE表达式
- 做四则运算(+,-,*,/)
- 三目运算符
- 可以调用字符串,对象,数组的方法(在{{}}直接写js代码的感觉)
注意:对象中也可以有方法,并且可以调用(如非必要不建议这样写)
四.VUE的指令
指令就是 v-属性
- v-text,v-html :展示相应的数据
- v-for ：循环
- v-bind: 绑定属性
- v-model: 数组双向绑定(input,select,textarea)
- v-show：显示也隐藏
- v-if: 判断
- v-on: 注册事件
v-text,v-html
- v-html会读到html标签(会显示标签的效果)
- v-text会把标签当做字符串显示
- 注意:标签中如果加了它们，里面的值就会被替换
v-for
- 可以循环数组,对象，数字与字符串
<div id="app">
直接拿到数组中的值
<div v-for="v in hobbys">{{v}}div>
直接拿到数组中的值与索引
<div v-for="(v,i) in hobbys">{{v}}div>
直接拿到对象的属性值
<div v-for="v in user">{{v}}div>
直接拿到对象的属性值，属性名,索引
<div v-for="(v,k,i) in user">{{v}}div>
div>
new Vue({
el:"#app",
data:{
hobbys:["空调","吃饭","睡觉","打豆豆"],
user:{
id:1,
username:"隔壁王哥",
age:45,
sex:true
},
num:10,
name:"itsource"
}
})
v-bind: 绑定属性
可以让属性在vue对象中取值
<div id="app">
标签形式
<img v-bind:src="src" />
简写形式
<img :src="src" />
直接绑定所有属性
<img v-bind="attr" />
div>
new Vue({
el:"#app",
data:{
src:"1.jpg",
attr:{
src:"1.jpg",
width:40,
height:40
}
}
})
v-model: 数组双向绑定
- 只能作用于(input,select,textarea)
<div id="app">
<input type="text" v-model="textVal">
{{textVal}}
div>
new Vue({
el:"#app",
data:{
textVal:"xxxx"
}
})
v-show:展示与隐藏
只是隐藏(display:none)
<div id="app">
<div v-show="true">显示我吧div>
<div v-show="show">显示我吧div>
div>
new Vue({
el:"#app",
data:{
show:true
}
})
v-if:判断
v-if,v-else-if,v-else(不显示dom元素就删除)
<div id="app">
<div v-if="score>=90">你很棒div>
<div v-else-if="score>=60 && score<90">你努力div>
<div v-else>你不行div>
div>
new Vue({
el:"#app",
data:{
score:80
}
})
v-on:注册事件
<div id="app">
标准写法
<button v-on:click="alert(0)">button>
简写形式
<button @click="alert(1)">button>
调用方法(加不加括号都可以实现)
<button @click="say">button>
<button @click="say()">button>
div>
new Vue({
el:"#app",
data:{
score:80
},
methods:{
say(){}
}
})
五.VUE组件
- 先创建组件后挂载
- template(模块)中，有且只有一个根
- 取名用小写(如果是驼峰 myTag -> my-tag)
5.1 全局组件
所有被挂载的位置都可以使用
Vue.component("mytag",{
template:"我有100句代码!"
});
5.2 局部组件
只能在当前被挂载的元素中使用
new Vue({
el:"#app",
//创建局部的组件
components:{
//组件的名称
"mytag":{
template:"我是一个局部的组件！"
}
}
})