Vue01 vue基础、mvvm、ES6z知识点、计算属性、生命周期
Vue案例:
<body>
<div id="app">
<!--第一部分-->
<fieldset>
<legend>info submit</legend>
<div>
<span>姓名:</span>
<input type="text" placeholder="请输入姓名" v-model="newPerson.name">
</div>
<div>
<span>年龄:</span>
<input type="text" placeholder="请输入年龄" v-model="newPerson.age">
</div>
<div>
<span>性别:</span>
<select v-model="newPerson.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>手机:</span>
<input type="text" placeholder="请输入手机号码" v-model="newPerson.phone">
</div>
<button @click="createNewPerson()">创建新用户</button>
</fieldset>
<!--第二部分-->
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p, index) in persons">
<td v-text="p.name"></td>
<td v-text="p.age"></td>
<td v-text="p.sex"></td>
<td v-text="p.phone"></td>
<td>
<button @click="delPerson(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
mounted(){
// 请求数据
this.getPersonList();
},
data: {
persons: [],
newPerson: {name: '', age: 0, sex: '男', phone: ''}
},
methods:{
getPersonList(){
this.persons = JSON.parse(window.localStorage.getItem('persons') || '');
},
createNewPerson(){
if(this.newPerson.name === ''){
alert('name cant be null');
return;
}
if(this.newPerson.age < 0){
alert('please enten your right age');
return;
}
this.persons.unshift(this.newPerson);
window.localStorage.setItem('persons',JSON.stringify(this.persons));
// 清空数据
this.newPerson = {name: '', age: 0, sex: '男', phone: ''}
},
delPerson(index){
this.persons.splice(index,1);
window.localStorage.setItem('persons',JSON.stringify(this.persons));
}
}
})
</script>
</body>
localStorage:
- localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
- 存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
常用API：
- localStorage.setItem("key","value");
以“key”为名称存储一个值“value” - localStorage.getItem("key");
获取名称为“key”的值 - localStorage.removeItem("key");
删除名称为“key”的信息 - localStorage.clear();
清空localStorage中所有信息
一、MVC和MVVM的区别？
1. MVC
M是指业务模型，V是指用户界面，C则是控制器
- M即model模型, 数据层，负责数据的处理和获取的数据接口层。
- V即View视图, 视图层, 是指用户看到并与之交互的界面。比如由html元素组成的网页界面，或者软件的客户端界面。
- C即controller控制器, 控制器层，它是 Model 和 View 之间的胶水或者说是中间人。
- Model和View是完全隔离的，由C作为中间人来负责二者的交互
- 同时三者是完全独立分开的
- 这样可以保证M和V的可测试性和复用性，但是一般由于C都是为特别的应用场景下的M和V做中介者，所以很难复用。
**MVC的好处:**耦合性低、重用性高、部署快，生命周期成本低、可维护性高
**存在的问题：**不适合小型，中等规模的应用程序、视图与控制器间的过于紧密的连接并且降低了视图对模型数据的访问/
2.MVVM
Model --->每个页面的单独数据
View --->每个页面中的HTML结构
VM ---> 调度者[图片上传中...(image.png-ef8151-1548517314428-0)]
好处：
数据驱动：
VM提供数据的双向绑定
二、常见的修饰符
<body>
<div id="app">
<div class="big-box" @click="bigBoxClick()">
<div class="box" @click="boxClick()">
<button @click="btnClick()">按钮</button>
</div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{},
methods:{
bigBoxClick(){
console.log('点击了大盒子');
},
boxClick(){
console.log('点击了盒子');
},
btnClick(){
console.log('点击了按钮');
},
attack(){
console.log('fire in the hall');
}
}
})
</script>
</body>
这个时候点击 按钮,如下图，时间冒泡了
1.阻止冒泡：
<div id="app">
<div class="big-box" @click="bigBoxClick()">
<div class="box" @click="boxClick()">
<button @click.stop="btnClick()">按钮</button>
</div>
</div>
</div>
2.事件的捕获
<div id="app">
<div class="big-box" @click="bigBoxClick()">
<div class="box" @click.capture="boxClick()">
<button @click="btnClick()">按钮</button>
</div>
</div>
</div>
点击按钮后，先触发 红盒子的事件，然后触发 按钮 事件，最后触发大盒子。
3.self
<div id="app">
<div class="big-box" @click="bigBoxClick()">
<div class="box" @click.self="boxClick()">
<button @click="btnClick()">按钮</button>
</div>
</div>
</div>
点击 按钮，触发按钮事件 和 大盒子的事件，红盒子被跳过了
红盒子上的事件在点击了红盒子才会触发
4.阻止默认事件
<div id="app">
<a href="http://www.baidu.com" @click.prevent="attack()">点击我啊</a>
</div>
5.once 事件只触发一次
<div id="app">
<button @click.once="attack()">click me</button>
</div>
点击按钮，只会 触发一次，第二次点击不会再触发
6. .stop 和 .self 的区别
- .stop 是真正意义上的阻止冒泡；
- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为。
三、样式类
1. :class
<body>
<div id="app">
<p :class="['box1']">people change,things go wrong</p>
<p :class="['box1',isShow ? 'box2 box3':'']">shit happens,life gose on</p>
<p :class="[{'box1':isShow}]">不说再见</p>
<p :class="classObj">调整呼吸，下一句让人更加惊艳</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
isShow:true,
classObj:{'box1':false,'box2':false,'box3':true}
}
})
</script>
</body>
2. :style
<body>
<div id="app">
<p :style="style1">people change,things go wrong</p>
<p :style="[style1,style2]">shit happens,life gose on</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
style1:{color:'red',fontWeight:'bold'},
style2:{backgroundColor:'blue'}
}
});
</script>
</body>
四、ES6知识点
1. ForEach、some、every
ES6中 伪数组转真数组：
forEach
伪数组转成真数组才能遍历
Array.prototype.slice.call(伪数组).forEach(()=>{});
<body>
<div id="app">
<ul ref="ulParent">
<li style="height: 60px;">1</li>
<li style="height: 70px;">2</li>
<li style="height: 80px;">3</li>
<li style="height: 90px;">4</li>
<li style="height: 100px;">5</li>
</ul>
<button @click="getAllLiHeight()">获取高度</button>
<button @click="dealSome()">验证some</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
dataArr:['apple','book','blackboard']
},
methods:{
getAllLiHeight(){
let liHeightArr = [];
// 1. 获取 DOM 对象
let allLis = this.$refs.ulParent.getElementsByTagName('li');
// 2.把 伪数组转换为真数组
Array.prototype.slice.call(allLis).forEach((li)=>{
liHeightArr.push(li.clientHeight);
});
console.log(Array.prototype.slice.call(allLis));
console.log(liHeightArr);
},
dealSome(){
let result = this.dataArr.some(function (str) {
return str === 'apple';
});
console.log(result);
}
}
})
</script>
</body>
结果：
some 和 every: 判断数组的所有元素是否满足指定条件，区别在于，
every是一假即假，而some是一真即真。
<script>
var persons = [
{name:'Nurato',age:10},
{name:'LiMing',age:20},
{name:'Daney',age:30}
];
var every_result = persons.every(function (p) {
return p.age > 15
});
console.log(every_result); //false
var some_result = persons.some(function (p) {
return p.age > 21;
});
console.log(some_result); // true
</script>
2.filter
<body>
<div id="app">
<p>{{money}}</p>
<p>{{money | moneyFormat(money)}}</p>
</div>
<script src="js/vue.js"></script>
<script>
// 定义全局过滤器
Vue.filter('moneyFormat',(money)=>{
return '￥' + money.toFixed(2);
});
// 1. 创建 Vue 实例
new Vue({
el:'#app',
data:{
money:236481.12345
},
filters:{
// 局部过滤器
moneyFormat(money){
return '$' + money.toFixed(4); // 保留四位小数，四舍五入
}
}
})
</script>
</body>
优先使用局部过滤器，结果：
236481.12345
$236481.1235
3.ES6中的字符串方法
这个方法可以帮你判断一个字符串是否包含另外一个字符串。
str.includes(searchString[, position])
searchString 要在此字符串中搜索的字符串
position 可选。从当前字符串的哪个索引位置开始搜寻子字符串，默认值为0。
该方法区分大小写
'Blue Whale'.includes('blue'); // returns false
'Blue Whale'.includes('Blue'); // returns true
五、计算属性
<body>
<div id="app">
<p>初始值: {{name}}</p>
<p>翻转：{{name.split('').reverse().join('')}}</p>
<p>方法：{{reverseStr()}}</p>
<p>计算属性：{{reverse}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'hello'
},
methods:{
reverseStr(){
return this.name.split('').reverse().join('')
}
},
computed:{ //计算选项
reverse:{
get(){
return this.name.split('').reverse().join('');
}
}
}
})
</script>
</body>
结果：
初始值: hello
翻转：olleh
方法：olleh
计算属性：olleh
<body>
<div id="app">
<p>{{fullName}}</p>
<button @click="deal()">调用计算属性中的setter方法</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'san'
},
methods:{
deal(){
this.fullName = 'Jack chen';
}
},
computed:{
fullName:{
get(){
return this.firstName + this.lastName;
},
set(str){
let nameArr = str.split(' ');
this.firstName = nameArr[0];
this.lastName = nameArr[1];
}
}
}
});
</script>
</body>
结果： zhangsan , 点击按钮后变为 Jackchen
六、生命周期
<body>
<div id="app">
<p v-if="isShow">{{str1}}</p>
<p v-else>{{str2}}</p>
<button @click="dealDestroy()">销毁</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
beforeCreate(){
console.log('beforeCreate()');
},
data:{
isShow:true,
str1:'仰天大笑出门去',
str2:'我辈岂是蓬蒿人'
},
methods:{
dealDestroy(){
this.$destroy();
}
},
created(){
console.log('created()');
},
beforeMount(){
console.log('beforeMount()');
},
// 运行阶段
mounted(){
console.log('mounted()');
// 这里用箭头函数，用function(){} 有问题，应该是全局和局部变量的问题
this.intervalId = setInterval(()=>{
console.log('###########');
this.isShow = !this.isShow;
},1000)
},
beforeUpdate() {
console.log('beforeUpdate()');
},
updated() {
console.log('updated()');
},
// 销毁阶段
beforeDestroy() {
console.log('beforeDestroy()');
// 手动销毁定时器，定时器还是需要手动去销毁
clearInterval(this.intervalId);
},
destroyed(){
console.log('destroyed()');
// 手动销毁定时器
// clearInterval(this.intervalId);
}
})
</script>
</body>
结果：两句话重复出现，点击 销毁按钮后，打印出了 beforeDestory() ,destory() ，两句话不在切换，定时器被销毁
Vue01 vue基础、mvvm、ES6z知识点、计算属性、生命周期的更多相关文章
- Vue基础第三章 - 计算属性
1.计算属性介绍 在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算,但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护,比如第二章的示例{{ text.split(',') ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 你还不知道Vue的生命周期吗？带你从Vue源码了解Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- 基础总结篇之一：Activity生命周期[转]
from:http://blog.csdn.net/liuhe688/article/details/6733407 基础总结篇之一:Activity生命周期 子曰:溫故而知新,可以為師矣.< ...
- Servlet基础（二） Servlet的生命周期
Servlet基础(二) Servlet的生命周期 Servlet的生命周期可以分为三个阶段: 1.初始化阶段 2.响应客户请求阶段 3.终止阶段 Servlet的初始化阶段 在下列时刻Servlet ...
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
随机推荐
- Java List集合和哈希表
List集合和Set集合,先来看List集合. List集合存储元素的特点: 1.有序(List集合中的元素有下标):存进去是什么样,取出来还是什么样 2.可重复 可以结合以下的简单代码来看一看. i ...
- JS之捕获冒泡和事件委托
一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...
- ubuntu下root不能复制 abc用户下的软连接文件
使用root用户去复制,提示权限不足: 那么这个软连接是个什么东西??
- 两步让你的mobile traffic通过fiddler代理传送
mobile app运行时由于调试网络相关的内容非常不便,所以如果能够让iphone通过桌面主机来跑traffic,那么在pc上就能非常清楚地检查mobile app和后端之间有什么问题了. 幸运的是 ...
- Sql Server 如何去掉内容里面的Html标签
DECLARE @str NVARCHAR(MAX)= ' <!DOCTYPE html> <html> <head> </head> <body ...
- MySQL半同步复制的搭建和配置原理
半同步复制: 什么是半同步复制?我们知道在默认情况下,MySQL的复制是异步的,这意味着主服务器及其从服务器是独立的.异步复制可以提供最佳的性能,因为主服务器在将更新的数据写入它的二进制日志(Binl ...
- 30分钟学会JS AST，打造自己的编译器
这是一棵树嘛 直奔主题 抽象语法树是js代码另一种结构映射,可以将js拆解成AST,也可以把AST转成源代码.这中间的过程就是我们的用武之地. 利用 抽象语法树(AST) 可以对你的源代码进行修改.优 ...
- 设计模式：备忘录（Memento）模式
设计模式:备忘录(Memento)模式 一.前言 备忘录模式用于保存和恢复对象的状态,相信大家看过我前面的拙作就会想到原型模式也能保存一个对象在某一个时刻的状态,那么两者有何不同的呢?原型模式保存 ...
- antd Grid
import { Row, Col } from 'antd'; <Row type="flex" //内容布局(左靠齐,右靠齐,居中) justify="star ...
- ZT自贴吧 说说你是怎么和恋人确定恋爱关系的？
http://www.baidu.com/link?url=svJFMqibXXhJUiGDaDr1obOyrIb9o0TqO5JWFtMuM-l7ndaRlGMyuRQKCOHh-Pj0