Vue
一个javascript库，框架，是渐进式的（需要什么加什么，React也是渐进式）
作用：构建前端页面（主要强调页面View），可以引入插件
三大框架时间：angular---React（大型公司）---Vue（中小型）
MVVM模式
model:模型，数据对象（data）
view：视图，模板页面
viewModel：视图模型（Vue实例）：DOM监听+数据绑定
Vue扩展插件
vue-cli：脚手架；vue-resource（axios）：ajax：请求；vue-router：路由；vuex：状态管理；vue-lazyload：图片懒加载；vue-scroller：页面滑动相关；mint-ui：基于vue的UI组件库（移动端）；element-ui：基于vue的UI组件库（PC端）
安装Vue-devTools
入门的HelloWorld
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
<p>输入的内容是：{{username}}</p>
</div>
<script src="../vue.js"></script>
<script>
//创建实例
const vm = new Vue({
el: '#app',
data: {
username: 'HelloWorld'
}
})
</script>
</body>
</html>
计算属性（缓存）和监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
姓：<input type="text" placeholder="firstName" v-model="firstName">
<br>
名：<input type="text" placeholder="lastName" v-model="lastName">
<br>
姓名：<input type="text" placeholder="fullName单向" v-model="fullName">
<br>
姓名：<input type="text" placeholder="fullName双向" v-model="fullName1">
</div>
<script src="../vue.js"></script>
<script>
//创建实例
const vm = new Vue({
el: '#app',
data: {
firstName: 'wu',
lastName: 'yongmei',
// fullName:'wuyongmei',
},
// 计算属性
computed: {
fullName() {
return this.firstName + " " + this.lastName;
},
fullName1: {
get() {
return this.firstName + " " + this.lastName;
},
set(value) {
const temp = value.split(' ');
this.firstName = temp[0];
this.lastName = temp[1];
}
}
},
// 监视
watch: {
firstName: function (value) {
this.fullName = value + " " + this.lastName;
}
}
})
</script>
</body>
</html>
class与style绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.aClass{
color: blueviolet;
}
.bClass{
color: blue;
}
.cClass{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<p :class="a" class="cClass">字体</p>
<p :class="{aClass:true,cClass:false}">字体</p>
<p :class="{bClass:isA,cClass:isB}">字体</p>
<p :class="['aClass','cClass']">字体</p>
<button @click="update">update</button>
<p :style="{color:actionColor}">wym</p>
</div>
<script src="../vue.js"></script>
<script>
//创建实例
const vm = new Vue({
el: '#app',
data: {
username: 'HelloWorld',
a:'aClass',
isA:true,
isB:false,
actionColor:'red',
},
methods:{
update(){
this.a='bClass'
}
}
})
</script>
</body>
</html>
条件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 清除元素 -->
<p v-if="ok">success</p>
<p v-else>false</p>
<button @click="ok=!ok">click</button>
<!-- 隐藏元素 -->
<p v-show="ok">成功</p>
<p v-show="!ok">失败</p>
<button @click="ok=!ok">click</button>
</div>
<script src="../vue.js"></script>
<script>
//创建实例
const vm = new Vue({
el: '#app',
data: {
username: 'HelloWorld',
ok: false,
}
})
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(p,index) in persons" :key="index">{{index}}---{{p.name}}---{{p.age}}
---<button @click="deletP(index)">删除</button>
---<button @click="update(index)">更新</button>
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
//创建实例
const vm = new Vue({
el: '#app',
data: {
username: 'HelloWorld',
persons:[
{name:'wu',age:18},
{name:'lin',age:19}
]
},
methods:{
deletP(index){
this.persons.splice(index,1)
},
update(index){
this.persons[index].name="shi"
}
}
})
</script>
</body>
</html>
