初识vue
vue入门
- 一.什么是vue
- 二.Vue的基本语法
- 2.1 第一个Vue程序：hello word
- 2.2 el
- 2.3 data
- 2.4 methods
- 三.VUE表达式
- 四.VUE的指令
- 五.VUE组件
- 5.1 全局组件
- 5.2 局部组件
一.什么是vue
渐进式的Javascript框架 MVVM(Model,View,ViewModel)模式
MVVM模式：
- M: Model(模型，数据)
- V:View(视图)
- VM:视图模型
二.Vue的基本语法
2.1 第一个Vue程序：hello word
- 引用vue.js
- 准备要挂载的标签
- 创建vue对象，进行挂载
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vuejs/vue.min.js">script>
head>
<body>
<div id="app">
{{message}}
div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"hello word"
}
})
script>
body>
html>
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-html会读到html标签(会显示标签的效果)
- v-text会把标签当做字符串显示
- 注意:标签中如果加了它们，里面的值就会被替换
v-for ：循环
- 可以循环数组,对象，数字与字符串
div id="app">
<ul>
<li v-for="(v,i) in hobby">{{v}}--{{i}}li>
ul>
<ul>
<li v-for="(v,k,i) in employee">{{v}}----{{k}}----{{i}}li>
ul>
<ul>
<li v-for="v in num1">{{v}}li>
ul>
<ul>
<li v-for="v in str">{{v}}li>
ul>
div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
hobby:["逛街","购物","打游戏","睡觉"],
employee: {
name:"张无忌",
age:25,
sex:true
},
num1:20,
str:"I love you"
}
})
script>
v-bind: 绑定属性
- 可以让属性在vue对象中取值
<div id="app">
<img v-bind:src="src" v-bind:alt="alt" v-bind:width="width">
<img :src="src" :alt="alt" :width="width">
<img v-bind="img">
div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
src :"img/h4.jpg",
alt:"没有tup",
width:200,
img:{
src :"img/h4.jpg",
alt:"没有tup",
width:200
}
}
})
script>
v-model: 数组双向绑定(input,select,textarea)
- 只能作用于(input,select,textarea)
<div id="app">
<input type="text" v-model="inputVal"> {{inputVal}}
<hr/>
<input name="sex" v-model="sexVal" type="radio" value="true" > 男
<input name="sex" v-model="sexVal" type="radio" value="false" > 女
{{sexVal}}
<hr/>
<select v-model="selectVal">
<option value="lol">英雄联盟option>
<option value="wow">魔兽世界option>
<option value="pubg">绝地求生option>
select>
{{selectVal}}
<hr/>
<input name="hobby" type="checkbox" value="1" v-model="hobbyVal"> 打游戏
<input name="hobby" type="checkbox" value="2" v-model="hobbyVal"> 吃饭
<input name="hobby" type="checkbox" value="3" v-model="hobbyVal"> 睡觉
<input name="hobby" type="checkbox" value="4" v-model="hobbyVal"> 散步
{{hobbyVal}}
div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
inputVal:"打飞机",
sexVal:false,
selectVal:"lol",
hobbyVal:[1]
}
})
script>
v-show：显示也隐藏
- 只是隐藏(display:none)
<div id="app">
<span v-show="myshow" >show一下span>
div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
myshow:true // true:显示元素 false:隐藏元素
}
})
script>
v-if: 判断
- v-if,v-else-if,v-else(不显示dom元素就删除)
<div id="app">
<div v-if="age<20">
小伙子，还年轻
div>
<div v-else-if="age>20 && age<60 ">
努力赚钱
div>
<div v-else>
天伦之乐
div>
div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
age:80
}
})
script>
v-on: 注册事件
<div id="app">
<input type="submit" value="提交" @click="say">
<input type="submit" value="提交" @click="hello('哒哒哒')">
div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"hello word"
},
methods:{
say(){
alert(0)
},
hello(name){
alert(0+name)
}
}
})
script>
五.VUE组件
- 先创建组件后挂载
- template(模块)中，有且只有一个根
- 取名用小写(如果是驼峰 myTag -> my-tag)
5.1 全局组件
所有被挂载的位置都可以使用
<div id="app">
<mydiv>mydiv>
div>
<div id="app2">
<mydiv>mydiv>
div>
<script>
Vue.component("mydiv",{
template:"今晚打老虎
"
})
new Vue({
el:"#app"
})
new Vue({
el:"#app2"
})
script>
5.2 局部组件
只能在当前被挂载的元素中使用
<div id="app">
<mydiv>mydiv>
div>
<div id="app2">
<mydiv>mydiv> //无效
div>
<script>
new Vue({
el:"#app",
components:{
mydiv:{
template:"今晚打老虎
"
}
}
})
new Vue({
el:"#app2"
})
script>