vueJS学习手记（一）

最近看了vue的官方文档，学习写了一些demo。记一些笔记，方便以后查阅：

Vue常用指令：

　　v-model：与表单元素双向绑定（input textarea等），表单中的内容变化了，v-model绑定的变量会做出同步的变化

　　　　<input id="model"  v-model="message">

　　　　new Vue({

　　　　　　el:"model",

　　　　　　data:{

　　　　　　　　message:"hello word!"

　　　　　　}

　　v-for

　　v-for="name in arr"   {{$index}}   name是第$index个数组元素的值

　　v-for="name in json" {{$index}}{{$key}}  $index是对象属性值的顺序值。{{$key}} 是属性值name的属性名

　　遍历对象还可以v-for="(k,v) in json"  这样可以通过使用k，v获得对象中的属性名和属性值

　　v-if：根据条件展示元素的选项。还可以配合使用v-else、v-else-if。

　　因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

　　惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　　v-show：根据条件展示元素的选项。v-show元素始终会被渲染并保存在Dom中，只是元素的css 属性的display值的不同

　　##v-show不支持<template>语法，也不支持v-else

　　v-show=“true/false”

　　v-on:

　　用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

　　事件监听指令，可以有v-on:click/dblclick/mouseout/mouseover/mousedown/mouseup...(更多可以查api：https://cn.vuejs.org/v2/api/#v-on )

　　可以简写为@

·　　在js语言里事件默认是冒泡当不需要元素把时间冒泡到父元素的时候vue提供了建议属性

　　阻止冒泡:
　　JS) ev.cancelBubble=true;
　　vuejs). @click.stop 推荐

　　还提供了组织默认行为的方法
　　JS). ev.preventDefault();
　　Vuejs). @contextmenu.prevent [右键事件并组织默认事件 ] [因为vue修饰符也提供了.right属性监听右键事件，那当同时使用两个修饰符是被允许的吗？待我做完验证再来填写]
　　键盘事件
　　@keydown $event ev.keyCode
　　@keyup

　　常用键:
　　回车
　　a). @keyup.13//当 @keyup. 对应的不同的keycode时，就能省略判断步骤，直接监听到输入对应的按键
　　b). @keyup.enter
　　上@keyup/keydown.up

　　下@keyup/keydown.down

　　左@keyup/keydown.left

　　右@keyup/keydown.right
　　v-bind:设置标签上的相关属性。

　　v-bind:src=""简写      :src=""

　　<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误

class和style:

:class="[red]" red是数据,Vue实例data里的，数据是样式表里样式的名字
:class="[red,b,c,d]"多个样式

:class="{red:a, blue:false}"样式文件里的样式，作为对象的属性名，根据属性值是true/false来决定是否显示这个类

上面等同于data:{
　　　　json:{red:a, blue:false}
　　　　}

　　　　:class="json"

style:
:style="[c]" 数据值必须是CSS的样式表达式，包含样式值和名字
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
:style="json"

模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次

{{{msg}}} HTML转意输出

过滤器:-> 过滤模板数据
系统提供一些过滤器:

{{msg| filterA}}
{{msg| filterA | filterB}}

uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize 首字母大写
{{msg|lowercase|capitalLize}}
currency 钱

{{12|currency '￥'}} 传参 直接写在后面

{{msg| filterA 参数}}

ajax交互:get、post、jsonp

引入: vue-resouce

get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){promise的写法
alert(res.data);成功了的回调方法
},function(res){
alert(res.status);失败的处理回调
});
给服务发送数据:在路径后添加请求需要的数据参数对象
this.$http.get('get.php',请求路径
{请求数据需要的传参
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post('post.php',
{
a:1,
b:20
},{
emulateJSON:true 类似json的格式，传参时需要告诉对方是模仿json的格式的数据，需要添加这一句
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:走get的方式，默认方式？

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //指定链接中callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});

　　

转载于:https://www.cnblogs.com/mlFronter/p/7301384.html