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

我是一个局部的组件!

}
}
})

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读