vue小结

学习第一天

1.MVVM模式
2.一般一个页面只有一个根元素,实例化一个Vue对象——new Vue()
3.写法: 
        插值表达式 {{msg}}
        指令:v-html="msg" —— 可以识别标签  |  v-text="msg" —— 纯文本,不能识别标签,可用插值表达式代替{{msg}}
        事件结构:v-on:click="fn()"
4.v-clock指令:以属性的形式保持在元素身上,直到数据渲染结束。解决:用户看到{{}}问题。
5.阻止冒泡:v-on:click.stop="fn1()"         阻止默认行为:v-on:click.prevent="fn()"
6.修饰符:v-on:事件类型.修饰符(prevent  stop   键盘对应的keyCode/直接键盘编码)
7.v-if="true",v-if="1==1"  控制标签的增加或删除 —— 不能找到标签
8.v-show="表达式/变量/常量" —— 控制标签的隐藏和显示(display:none)
9.v-bind:class —— 可以操作类class
10.v-once:只渲染一次,即使数据更新也不变化;  v-pre:不渲染
11.v-for  —— v-for="v in arr" | v-for="(v,i) in arr" | v-for="(v,k) in json.content"
12.v-model —— 数据双向绑定


学习第二天

1.自定义属性指定 —— Vue.directive('指令名字',{bind(){},inserted(){},update(){},unbind()})
    bind(el,obj)——el代表当前使用该属性的元素,可以操作原生的dom。obj里面的的arg参数代表用户传入的参数。
2.自定义属性简写——简单了解,简写只能识别undate和bind这两个钩子函数。
3.局部过滤器filters:{}和全局过滤器Vue.filter()  ——注意局部过滤器filters是有s的
4.监控属性watch:{}  检测数据是否有变化
5.计算属性computed:{}  当一个变量变化的时候,另外一个变量也跟着变化时使用
6.transition一般结合v-if和v-show添加动画效果,要把显示动画的标签放在transition标签里面,如果是多个动画,就使用transition-group标签
7.animation——自定义动画。但一般结合animation.css一起使用动画效果更佳。
(get和post都要引入vue-resource.js文件)
8.get方法:this.$http.get('请求地址',{params:{放置传递参数}}).then(成功之后的回调函数,失败之后的回调函数)
9.post用法和get一样。多了一个数据校验——emulateJSON:true。
    this.$http.get('请求地址',{放置传递参数(json)},{emulateJSON:true}).then(成功之后的回调函数,失败之后的回调函数)
10.jsonp:跨域请求...这个待续
11.组件(template)——先创建一个组件,再注册组件。有三种方法,最常用的是第三种。组件可以嵌套。
        1.创建:var compo=Vue.extend({模板,数据,方法...});  |  var compo={(模板,数据,方法...)}
          注册:components:{'组件标签名':创建的组件名}
        2.创建和注册放在一起:components:{'组件标签名':{template:模板,data(){return{}},methods:{}}}
        3.创建模板:<template id="com"><aaa>模板</aaa></template> 
          注册:components:{'aaa':{template:'#com',data({})},methods:{}...}
12.动态组件(component)
      <component :is="msg"></component>——:is="msg",msg的值决定了渲染出来的组件

猜你喜欢

转载自blog.csdn.net/weixin_40135101/article/details/81491005