一、Vue介绍
Vue 是一套用于构建用户界面的vue基于MVVM模式渐进式框架。
二、Vue入门
2.1、Vue实例对象详情
1、 Vue实例挂载(el)的标签:
每个Vue实例通过el配置挂载的标签,该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。
<div id="app">
<h1>{{message}}</h1>
</div>
<div class="vueClz">
<h1>{{message}}</h1>
</div>
/*
使用构造函数创建一个vue对象:
这个对象作用与哪一个html标签,是通过el属性来挂载的,常用的有id和class挂载方式:
id挂载:el:"#id"
class挂载:el:".class"
*/
//id挂载方式:
var app = new Vue({
el : "#app",
data : {
message : "我是id挂载方式"
}
});
//class挂载方式:
var app2 = new Vue({
el : ".vueClz",
data : {
message : "我是class挂载方式"
}
});
2、 Vue中的数据(data)详解
Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上.
<div id="app">
<h1>{{message}}</h1>
<h1>
{{user.name}},今年才:{{user.age}}岁.{{user.color}}<font color="pink">是一个很美丽的颜色</font></br>
</h1>
</div>
//vue的数据绑定在data属性上,data本身也是一个对象
var app = new Vue({
el : "#app",
data : {
message : "我是一个很单纯的app",
user : {
name : "隔壁老王",
age : 17,
color : "pink"
}
}
});
3、 Vue中的方法(methods)详解
Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体方法都是被Vue对象调用,所以方法中的this代表Vue对象
<div id="app">
{{message}}<br>
{{user.name}}<br>
{{user.age}}<br>
{{eat("肉")}}
</div>
<script>
/*
* new Vue({});创建一个vue对象
* el:挂载 根据一个id进行挂载 也可以根据class进行挂载
* data:数据
* message存在data里面数据,通过{{message}} 可以取值
* {{ message }}
*/
// 创建一个vue对象
var app = new Vue({
el:"#app",
data:{
message:"我是数据",
user:{
name:"张三",
age:12
}
},
methods:{
eat:function (food) {
console.log(this.user.name+"吃"+food);
}
}
});
//修改值
app.user.name="李四";
</script>
2.2、生命周期钩子
1、生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
2、钩子函数
例如:created代表在vue实例创建后;
我们可以在Vue中定义一个created函数,代表这个时期的构造函数
三、Vue架构认识
View不能直接与Model交互,而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互,通过v-model指令来实现View和ViewModel的同步。对于View而言,ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化,一旦发生变化,Model中的数据也会发生改变;
四、VueJS表达式
4.1、表达式语法
VueJS表达式写在双大括号内:{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量
4.2、简单表达式
<div id="app1">
<!--简单表达式 -->
<h1>{{5+5}}</h1>
<!-- 字符串连接 -->
<h1>{{5+"v5"}}</h1>
<h1>{{5+"5"}}</h1>
<!-- 减法-->
<h1>{{"5"-"5"}}</h1>
<h1>{{5*5}}</h1>
<h1>{{"a"-"b"}}</h1>
<!-- 乘 -->
<h1>{{"5"*"5"}}</h1>
<!-- 除 -->
<h1>{{5/5}}</h1>
<!-- 三目运算-->
{{show?"男":"女"}}
<!-- 字符串操作-->
{{"大家好我是xxx"}}
<br/>
{{"大家好我是xxx".length}}
<br/>
{{message.length}}
<br/>
{{message.substring(1,5)}}
<br/>
{{message.substring(2,6).toUpperCase()}}
</div>
<script>
var app1 = new Vue({
el:"#app1",
data:{
show:true,
message:"大家好我xxx"
}
});
</script>
4.3、对象操作
<div id="app1">
{{user}}<br/>
{{JSON.stringify(user)}}<br/>
{{user.name}}<br/>
{{user.age}}<br/>
{{user.eat()}}<br/>
<hr>
{{hobbys}}<br/><!--[ "唱", "跳", "rap", "篮球" ]-->
{{hobbys[0]}}<br/><!--唱-->
{{hobbys.length}}<br/><!--4-->
{{hobbys.toString()}}<br/><!--// 唱,跳,rap,篮球-->
{{hobbys.join("------")}}<--唱------跳------rap------篮球-->
</div>
<script>
var user = {
name:"张三",
age:12,
eat(){
console.log("吃食物")
}
}
var app1 = new Vue({
el:"#app1",
data:{
user:user,
hobbys:["唱","跳","rap","篮球"]
}
})
</script>
五、Vue指令
指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
5.1、v-text指令
<div id="app">
<span v-text="message"></span></br>
<span v-html="user.username"></span>
</div>
<script>
/**
* 指令: v-开头,设置标签的效果 相当于标签里面的特殊属性
* v-text :相当于innerText 不会解析,以字符串的形式展示
* v-html:相当于innerHTML 会解析标签
*/
var app = new Vue({
el:"#app",
data:{
message:"我是xxx",
user:{
username:"<a style='color: red'>我是a标签</a>"
}
}
})
</script>
5.2、v-for指令
<body>
<div id="app">
<ul>
<li v-for="hobby in hobbys">
{{hobby}}
</li>
</ul>
<ul>
<li v-for="value in user">
{{value}}
</li>
</ul>
<!--下标-->
<ul>
<li v-for="(hobby,index) in hobbys">
{{index}}----{{hobby}}
</li>
</ul>
<!--下标+key-->
<ul>
<li v-for="(value,key,index) in user">
{{index}}----{{key}}----{{value}}
</li>
</ul>
<!--表格-->
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr v-for="ter in teachers">
<th>{{ter.id}}</th>
<th>{{ter.name}}</th>
<th>{{ter.age}}</th>
<th>{{ter.sex}}</th>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"我是xxx",
user:{
name:"张三",
age:23,
gender:"男"
},
hobbys:["唱歌","跳舞","rap","篮球"],
teachers:[
{id:1,name: "李老师", age: 31, sex: "男"},
{id:2,name: "王老师", age: 23, sex: "女"},
{id:3,name: "张老师", age: 34, sex: "女"}
]
}
})
</script>
5.3、v-bind指令
<div id="app">
<img v-bind:src="images" v-bind:title="title"/>
<!--简写-->
<img :src="images" :title="title"/>
<input v-bind="proper">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
images:"./img/1.jpg",
title:"图片",
proper:{
type:"text",
name:"username"
}
}
})
</script>
5.4、v-model 指令
<div id="app1">
<input type="text" v-model="message" />
{{message}}
<h1>绑定到type=checkbox的input表单元素</h1>
打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
data中的值:{{checkboxValue}}
<h1>绑定到type=radio的input表单元素</h1>
打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
data中的值:{{radioValue}}
<h1>绑定textarea素</h1>
文本域:<textarea v-model="textAreaValue" value="yyyyy"></textarea><br/>
data中的值:{{textAreaValue}}
<h1>绑定到单选的select的元素</h1>
技能:<select v-model="skills">
<option value="java">java</option>
<option value="php">php</option>
<option value=".net">.net</option>
</select><br/>
data中的值:{{skills}}
</div>
<script>
var app1 = new Vue({
el: '#app1',
data: {
message:'xxxx',
checkboxValue:["xxx"],
radioValue:'xxx',
textAreaValue:'我是练习时长两年半的偶像练习生',
skills:'java'
}
});
</script>
5.5、v-show指令
根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。当v-show的值为假时, 会在标签的css中添加 display: none :
注意事项:
当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
标签的值会自动转换为boolean类型的值
<div id="app">
<div v-show="show">我是真的</div>
<div v-show="hidden">我是假的</div>
<div v-show="age>20">年龄40岁</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"show":true,
"hidden":false,
"age":40
}
})
</script>
5.6、v-if指令
<div id="app">
<div v-if="show">我是真的</div>
<div v-if="hidden">我是假的</div>
<div v-if="age>80">我大于80岁</div>
</div>
<script>
/**
* v-if 如果不存在 就不会在页面上显示出来,标签也是没有
* v-show 控制标签里面的display : 如果值为false display:none
*/
var app = new Vue({
el:"#app",
data:{
"show":true,
"hidden":false,
"age":40
}
})
</script>
5.7、v-else-if指令
<div id="app1">
<div v-if="age<20">小于20岁</div>
<div v-else-if="age>=20 && age<40">年龄在20-40岁</div>
<div v-else-if="age>=40 && age<60">年龄在40到60岁</div>
<div v-else="age>=60">年龄大于60岁</div>
</div>
<script>
/**
* v-if 如果不存在 就不会在页面上显示出来,标签也是没有
* v-show 控制标签里面的display : 如果值为false display:none
*/
var app1 = new Vue({
el:"#app1",
data:{
"age":40
}
})
</script>