人间草木皆有情。
一、vue
为什么选择vue，js轻量级开发框架，三大框架（angular、react、vue）中，vue最容易上手。
vue，view的意思，可以通过简单的api，创建由数据驱动的ui组件，采取MVVM模式。
用户界面修改数据model，和model修改用户界面同步。
vue核心思想：减少dom操作，甚至不对dom进行任何直接操作。
angular：拥有许多特性，难上手，更新很快，mvc框架。
react：倾向处理js，向狗太语言发展。
二、体验一波。
1.引入框架。
<script src="./vue.js"></script>
2.js实例化vue对象。
一般来说，一个页面，只有一个vue对象。
new Vue({})
3.html挂载元素。
一个页面，只有一个基本元素。
<div id="app"> </div>
4.使用vue的双向数据绑定。
在js实例化的vue对象data属性中撰写数据，在html通过{{数据名}}使用数据。
<div id="app">
{{lly}}
</div>
<script>
new Vue({
el:'#app',
data:{//所有用得到的数据，全部写进data里面
lly:'莉莉娅'
}
})
</script>
此时页面上显示莉莉娅啦~~
三、vue指令。
1.v-model 双向数据绑定 （老拼错-.-） v-once一次生效。
vue的渲染。可以进行一系列的原生js操作。
在js中更改数据，html数据也会更改，在html中更改数据，js中也会更改。
<body>
<!-- hutm挂载元素 -->
<div id="app">
<!-- flag为true则内容为msg，否则为no -->
<p>{{flag ? msg : "no"}}</p>
<!-- v-once指令，初次渲染，后面再更改内容对其无效 -->
<!-- vue渲染，支持js所有原生操作 -->
<p v-once>{{msg.split(" ")}}</p>
<!-- 输入框的值为msg，同步操作 -->
<input type="text" v-model = "msg">
</div>
</body>
<script src="./vue.js"></script>
<script>
let a = new Vue({
el:"#app",
data:{
msg:"i am a data",
flag:true
}
})
</script>
GIF.gif
2.v-if、v-else、v-if-else 条件渲染指令
多条件判断一波，然后渲染不同数据。
条件渲染指令：根据条件表达式，判断是否添加或者删除元素。其结果为布尔值。
①：v-if值为1/true则显示msg数据，为0则显示msg2/false数据。
<body>
<div id="app">
<p v-if = "1">{{msg}}</p>
<p v-else>{{msg2}}</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
let a = new Vue({
el:"#app",
data:{
msg:"我是一条数据",
msg2:"我是第二条数据"
}
})
</script>
②：多判断条件。
input使用v-model双向数据绑定指令同步更改js和界面值。
判断条件为删除或者添加。（注意看控制台始终只有一个p标签）
<body>
<!-- 判断多个条件 -->
<!-- 是一个个判断的 ，不存在同时满足都显示 -->
<div id="app">
<p v-if='score > 90'>优秀</p> <!-- 分数大于90 -->
<p v-else-if='score >= 70'>良好</p>
<p v-else-if='score >= 60'>及格</p>
<p v-else>不及格</p>
<!-- 啥UN感谢爱那个数据绑定input -->
<input type="text" v-model='score'>
</div>
</body>
<script src="./vue.js"></script>
<script>
let a = new Vue({
el:"#app",
data:{
score:0
}
})
</script>
GIF.gif
③：v-show 指令
和v-if一样一样的。。返回结果也是布尔值
<div id="app">
<p v-show='show'>显示</p>
<p v-show='!show'>不显示</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
这个并没有删除元素，知识将元素display：none；
④：v-bind 动态绑定元素
语法：v-bind:属性='值'；
简写： ：属性 = “zhi”；
比如绑定class属性。立了个flag。放flag为true时，调用相应的属性
<style>
.yes{
color: green;
}
.no{
color: royalblue;
}
</style>
<body>
<div id="app">
<!-- flag为true是调用响应的class名 -->
<p :class = "classA"> 我是莉莉娅</p>
<p :class = "{yes:flag}">我是绿的</p>
<p :class ="{no:flag}">我是黄猪猪</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
let a = new Vue({
el:"#app",
data:{
classA:"yes",
classB:"no",
flag:true
}
})
</script>
⑤：v-for 循环指令
遍历数据并渲染。
<tbody>
<tr v-for='xxx in arr'>
<td>{{xxx.name}}</td>
<td>{{xxx.age}}</td>
<td>{{xxx.sex}}</td>
</tr>
</tbody>
<script>
let a = new Vue({
el: '#app',
data: {
arr:[
{name:'张三',age:'18',sex:'男'},
{ name: '张三', age: '18', sex: '男' },
{ name: '张三', age: '18', sex: '男' },
{ name: '张三', age: '18', sex: '男' },
{ name: '张三', age: '18', sex: '男' },
{ name: '张三', age: '18', sex: '男' },
{ name: '张三', age: '18', sex: '男' }
]
}
})
</script>
⑥：文本指令 v-text 识别文字 v-html识别文字和标签
<p v-text='tt'></p>
<p v-html='tt'></p>
<script>
let a = new Vue({
el: '#app',
data: {
tt:'<a>我是一个标签</a>'
}
})
</script>
⑦：methods
在vue中，对数据进行繁琐操作时，用到函数。
还是用function去声明的。所有函数都声明在methods中。
绑定事件，v-on即可。 简写@click = "函数（）";
<div id="app">
<!-- 点击触发事件emm -->
<button v-on:click = "hello()">点我点我！！</button>
<!-- 简写 -->
<button @click = "hello()">click me!!!!</button>
</div>
</body>
<script src="./vue.js"></script>
<script>
let a = new Vue({
el:"#app",
data:{
msg:"lly"
},
/* 所有函数，写在这里 */
methods:{
hello(){
alert(`${a.msg}是个小可爱！！！！`)
}
}
})
</script>
⑧：元素标识符 （获取dom） 尽量别操作
语法：this.$refs.标识名
html中标识ref
body>
<div id="app">
<div ref='dv'></div>
<div ref='qq'></div>
<button @click='int()'>按钮</button>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
/* 获取id叫app的元素 */
el: '#app',
/* 写个方法 */
methods:{
int(){
/* 早app中匹配叫dv的标识符 */
console.log(this.$refs.dv)
}
}
})
</script>
⑨：自定义指令。
分全局自定义指令和局部自定义指令。
局部指令：当前vue可用。
directives:{
"lower-text"(el,val){
el.textContent = val.value.toLowerCase();
},
"upp"(el,val){
el.textContent = val.value.toUpperCase();
}
}
全局指令：整个页面所有vue对象可用。
Vue.directive("tt",function(el,val){
console.log(el,val);
el.innerHTML = val.value.split(' ');
})
完整的位子看一下：
<script>
/* 全局指令 */
Vue.directive("tt",function(el,val){
console.log(el,val);
el.innerHTML = val.value.split(' ');
})
new Vue({
el:"#app",
data:{
msg:"happy new year",
mes:"LLY"
},
/* 注册局部指令 */
directives:{
"lower-text"(el,val){
el.textContent = val.value.toLowerCase();
},
"upp"(el,val){
el.textContent = val.value.toUpperCase();
}
}
})
</script>
⑩：计算属性
需要处理复杂数据的时候，会选择使用方法（methods），但是，methods用的过多，就会导致程序性能下降， 就失去了框架的高效性，为了解决这种问题:计算属性：computed。
每次调用methods里面的方法，都会重新执行该函数。 而如果调用computed，则不一定，当数据没发生改变时，会从缓存中获取数据。
computed，有set和get两种方法，但是通常没有人会去用set方法，因为用set，就意味着值发生了改变
值发生了改变，可用methods。
有点懵逼
<div id="app">
<input type="text" v-model='op1'>
<input type="text" v-model='op2'>
<input type="text" v-model='fun'>
<p>{{fun}}</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
mes:10,
op1:'a',
op2:'b'
},
methods:{
init(x){
this.mes = x;
}
},
computed:{
foo(){
console.log('你好666')
return 10*10;
},
fun:{
//每次获取fun函数的返回值的时候，都会自动调用get方法
get() {
console.log('get方法')
return this.op1 + '-' + this.op2;
},
//每当fun的属性值发生改变，都会自动调用，监视当前属性发生的变化，同步更新其他相关属性
set(val) {
const lop = val.split('-')
console.log('set方法' ,lop)
}
}
}
})
</script>
demo1升序降序排序
GIF.gif
注释都写在代码里面了啦！
<body>
<!-- vue挂载 -->
<div id="app">
<!-- 双向数据绑定输入框 -->
<input type="text" v-model = "search">
<ul>
<!-- 遍历数据 arr的index tui！ -->
<li v-for = "(dat,index) in person()" ref = "lis">{{index}}--{{dat.name}}--{{dat.age}}</li>
</ul>
<!-- 点击事件，根据序号排列 -->
<button @click='setOrderType(2)'>年龄升序</button>
<button @click='setOrderType(1)'>年龄降序</button>
<button @click='setOrderType(0)'>默认排序</button>
</div>
</body>
<script src="../vue.js"></script>
<script>
let a = new Vue({
el:"#app",
data:{
search: '',//搜索用
orderType: 0,//判断搜索方案，0位默认排序，1为降序，2为升序
arr:[
{name:"李大头",age:"20"},
{name:"李二狗",age:"23"},
{name:"王大傻",age:"18"},
{name:"张三丰",age:"26"},
{name:"徐凯丽",age:"22"}
]
},
methods:{
setOrderType(type){
/* 把传进来的参数赋值给定义的数据oederType */
this.orderType = type;
},
/* 定义方法 */
person(){
const {search,arr,orderType} = this;
/* 获取当前数组 */
let arr1 = [...arr];
/* 过滤掉那些乱七八糟的！ */
/* search 找到数组中的name匹配的字符，遍历一波数据 */
arr1 = arr.filter(item =>item.name.indexOf(search) !=-1)
/* 完成搜索啦。 */
/* 现在排序啦 后面的减前面的为降序。根据age排序*/
if(orderType == 1){
arr1.sort(function(p1,p2){
return p2.age-p1.age;
})
}else if (orderType == 2){
arr1.sort(function(p1,p2){
return p1.age - p2.age
})
}
/* 把排好序的数组返回出去 */
console.log(arr1)
return arr1;
}
}
})
</script>
demo2 信息录入
GIF.gif
注释都好好地写在代码里面啦！
<body>
<div id="app">
<fieldset>
<legend>信息录入</legend>
<!-- 双向数据绑定输入框 -->
<li>姓名<input type="text" placeholder="请输入姓名" v-model = "obj.name"></li>
<li>性别<input type="text" placeholder="请输入性别" v-model = "obj.sex"></li>
<li>年龄<input type="text" placeholder="请输入年龄" v-model = "obj.age"></li>
<li>电话<input type="text" placeholder="请输入电话" v-model = "obj.tel"></li>
</fieldset>
<button @click='foo()'>添加信息</button>
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>电话</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<!-- 遍历数据并渲染 -->
<tr v-for = "(v,i) in arr">
<td>{{v.name}}</td>
<td>{{v.sex}}</td>
<td>{{v.age}}</td>
<td>{{v.tel}}</td>
<td><button @click='cl(i)'>删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
/* 定义数据 */
obj:{
name:'',
sex:'',
age:'',
tel:''
},
arr:[]//存放数据
},
methods:{
/* 将存储的数据添加到obj中，再将obj清空，不影响后面的添加 */
foo(){
this.arr.push(this.obj)
this.obj = {
name: '',
sex: '',
age: '',
tel: ''
}
},
/* 删除数组的第i个删除一个 */
cl(i){
this.arr.splice(i,1)
}
}
})
</script>
demo3计算一波
GIF.gif
<!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>
<style>
td{
height: 50px;
padding-right: 60px;
}
</style>
<body>
<div id="app">
<table>
<thead>
<tr>
<td>产品编号</td>
<td>产品名字</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
</thead>
<tbody class="bd1">
<!-- 比那里数据并渲染 -->
<tr v-for = "(v,i) in add()">
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td><button @click = "down(i)">-</button> <input type="text" v-model="v.Num"> <button @click = "up(i)">+</button></td>
<td>{{v.price}}</td>
<td>{{v.Num*v.price}}</td>
<td><button @click = "cl(i)">移除</button></td>
</tr>
</tbody>
<tbody class="tb2">
<tr>
<td>购买总价</td>
<td>{{sum}}</td>
<td>购买总数量</td>
<td>{{gg}}</td>
<td><button @click = "cll(i)">清空购物车</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
/* 初始化数据 */
arr:[
{id:"1",name:"iphone",Num:"5",price:"8000"},
{id:"2",name:"HuaWei",Num:"5",price:"7000"},
{id:"3",name:"oppo",Num:"2",price:"6000"},
{id:"4",name:"vivo",Num:"5",price:"5000"}
],
sum:0,
gg:0
},
methods:{
down(i){
this.arr[i].Num--;
/* 当数量减少到1再点击减时，弹出确认框，是否删除 */
if(this.arr[i].Num<1){
confirm("是否删除");
this.arr.splice(i,1);
}
},
up(i){
this.arr[i].Num++;
},
add(){
let p =0 ,g=0;
/* 遍历数据并return一播渲染啦。 */
this.arr.forEach(i => {
p+=i.Num*i.price;
g+=parseInt(i.Num);
});
this.gg = g;
this.sum=p;
return this.arr;
},
/* 删除当前数组的第i个，删除一个 */
cl(i){
this.arr.splice(i,1);
},
/* 删除全部 */
cll(a){
this.arr.splice(a);
}
}
})
</script>
</html>
很难受。笨笨。
网友评论