一.什么是VUE
渐进式的Javascript框架
MVVM(Model,View,ViewModel)模式
二.VUE基本语法
2.1 Vue的基本使用
- 引用vue.js
- 准备要挂载的标签
- 创建vue对象,进行挂载
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入vue.js-->
<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:"<div>我有100句代码!</div>"
});
5.2 局部组件
只能在当前被挂载的元素中使用
new Vue({
el:"#app",
//创建局部的组件
components:{
//组件的名称
"mytag":{
template:"<div>我是一个局部的组件!</div>"
}
}
})