浅入Vue
Posted wszxdzd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅入Vue相关的知识，希望对你有一定的参考价值。
一. ES6的常用语法
1.变量提升 :let定义取消变量提升
2.模板字符串 :`` 及${}引用变量
3.数据解构:注意解构的数据类型要一致
4.类: class定义类,extends继承,constractor方法相当于py中的init方法
5.函数:注意this和普通函数的区别
6.函数的单体模式是极为常用的:foo(){return 1}
二.Vue常用指令
1.v-text :innertext
2.v-html :innerhtml
3.v-for
4.v-if v-else-if v-else
5.v-show :display
6.v-on :@xxx=‘处理方法‘
7.v-bind :属性名称=属性值
8.v-model -- input -- textarea -- select
指令修饰符:.lazy .number .trim
计算属性:computed 放入缓存 只有数据改变的时候才会重新计算
数据的监听: watch 注意可变数据类型跟不可变数据类型的区别
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> {{ name }} {{ hobby }} <button @click="changedata">点我改变数据</button> </div> <script> let app =new Vue({ el:‘#app‘, data:{ name:‘alex‘, hobby:[‘抽烟‘,‘喝酒‘] }, methods:{ changedata:function () { // 数组类型的数据只能通过这种方式更改才能体现在前端页面 app.$set(this.hobby,0,‘抽二手烟‘) } }, watch:{ hobby: { handler: function (val, oldVal) { console.log(val); console.log(oldVal); } } } }) </script> </body> </html>
获取Dom: 给标签绑定ref属性 ref = "属性值" this.$refs.属性值
自定义指令:Vue.directive("指令名称", function(el, binding){
el 绑定指令的标签元素
binding 指令的所有信息
<div id="app01"> <div v-text="vue" v-pos="position" :class="{box:show} "> </div> </div> <script src="static/vue.min.js"></script> <script> Vue.directive(‘pos‘,function (el,bindding) { if (bindding.value){ el.style[‘position‘]=‘fixed‘; el.style[‘right‘]=0; el.style[‘bottom‘]=0 } }) let vm =new Vue({ el:‘#app01‘, data:{ vue:‘hello vue‘, show:true, position:true } })
以上是关于浅入Vue的主要内容，如果未能解决你的问题，请参考以下文章