vue入门

一.什么是VUE

渐进式的Javascript框架 MVVM(Model,View,ViewModel)模式

二.VUE基本语法

2.1 Vue的基本使用

引用vue.js
准备要挂载的标签
创建vue对象，进行挂载

Title

{{message}}

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

可以循环数组,对象，数字与字符串

直接拿到数组中的值

{{v}}

直接拿到数组中的值与索引

{{v}}

直接拿到对象的属性值

{{v}}

直接拿到对象的属性值，属性名,索引

{{v}}

new Vue({
el:"#app",
data:{
hobbys:[“空调”,“吃饭”,“睡觉”,“打豆豆”],
user:{
id:1,
username:“隔壁王哥”,
age:45,
sex:true
},
num:10,
name:“itsource”
}
})
v-bind: 绑定属性

可以让属性在vue对象中取值

标签形式 简写形式 直接绑定所有属性

new Vue({
el:"#app",
data:{
src:“1.jpg”,
attr:{
src:“1.jpg”,
width:40,
height:40
}
}
})
v-model: 数组双向绑定

只能作用于(input,select,textarea)

{{textVal}}

new Vue({
el:"#app",
data:{
textVal:“xxxx”
}
})
v-show:展示与隐藏

只是隐藏(display:none)

显示我吧

显示我吧

new Vue({
el:"#app",
data:{
show:true
}
})
v-if:判断

v-if,v-else-if,v-else(不显示dom元素就删除)

你很棒

你努力

你不行

new Vue({
el:"#app",
data:{
score:80
}
})
v-on:注册事件

标准写法 简写形式

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:“

我是一个局部的组件！

”
}
}
})