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)]
![MVVM](https://upload-images.jianshu.io/upload_images/5017428-3788364b336c811c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
好处:
数据驱动:
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); //falsevar 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() ,两句话不在切换,定时器被销毁
转载于:https://www.cnblogs.com/friday69/p/10353242.html
Vue01 vue基础、mvvm、ES6z知识点、计算属性、生命周期相关推荐
- 4.vue基础(三)计算属性-监视(侦听)属性
文章目录 1. 计算属性 1.1 插值语法实现姓名案例 1.2 methods实现 1.3 计算属性实现 2.监视(侦听)属性 2.1 天气案例 2.2 利用监听属性 2.3 深度监听 2.3.1 监 ...
- vue源码-对于「计算属性」的理解
vue源码-对于「计算属性」的理解 这是我最近学习vue源码的一个个人总结和理解,所以可能并不适合每一位读者 本文的整体脉络如下,首先尽可能去掉细节,对计算属性源码的大致实现有一个了解,然后举一例子, ...
- Vue学习(watch、computed、生命周期、filter)- 学习笔记
文章目录 Vue学习(watch.computed.生命周期)- 学习笔记 watch 监听 computed 计算属性 set---动态添加属性 delete---删除 生命周期 filter 过滤 ...
- android生命周期方法,Android零基础入门|Activity状态和生命周期方法
原标题:Android零基础入门|Activity状态和生命周期方法 前面两期我们学习了Activity的创建和注册.以及启动和关闭,也学会了重写onCraete方法,这些知识在实际开发中远远不够,还 ...
- Vue — 第三天(计算属性和json-server)
计算属性 使用场景 如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 例如:要对给定的字符串做翻转处理之后再来显示. <div id ...
- vue修改计算属性的值_「Vue学习记录五」计算属性和侦听器
1: 计算属性: (内置缓存机制) 当更改age的时候, fullName 函数不执行: 当更改fristName的时候, fullName 函数才执行 <div id = "app& ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- Vue.js第六课 计算属性
Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 1 <div id="app"& ...
- Vue第一部分(5):计算属性和过滤器
计算属性 在插值表达式中可以直接使用js表达式,这是非常方便的.但是如果表达式的内容很复杂,就会影响代码可读性,而且后期维护起来也不方便,例如下面的场景:需要统计多个商品的总价. 代码如下: < ...
最新文章
- jenkins+jmeter+ant+jmeter在Jenkins上报告
- C#中dynamic、ExpandoObject 的正确用法
- 招人啦!安卓/Java/数据库/测试等一大波岗位袭来
- vscode不能跳转_vscode-goto-node-modules 一个快速定位 node 模块的 vscode 插件
- db2字符串定位_DB2/Oracle/SQL server判断某个字符串或单个字符在源字符串中出现的位置...
- 【数字信号去噪】基于matlab同心兰姆波模式分解【含Matlab源码 679期】
- php 加密视频播放地址,如何在PHP中实现Clear-Key视频加密并以HTML格式播放
- 2019新闻自动挂机阅读脚本
- Junos 操作系统
- [学科总结] 《线性系统理论》
- 简约毕业论文答辩PPT模板
- 单电路板双W5500驱动代码,基于WIZnet官方驱动修改,STM32H743/H750
- 边缘计算是什么,对企业有什么影响?
- Hibernate实战——Enumerated注解
- 项目杂识-FOV(视场角)
- BlendMask 论文学习
- 德鲁克谈《自我管理》笔记摘要
- “新”在哪 | 解密新型云计算数据中心三大关键词
- NBA运动员球员数据分析
- mysql数据库服务器重启_重启mysql数据库服务器