weex 随笔

标签：list   http   排列   nts   事件对象   ber   ret   轮播   ima   

1.三大模块：

　　<template>:样板，内容区

　　<style>:css

　　<script>： js

　　　　<script> export default{ data(){return} , components:{}, methods:{} , computed:{} }  </script> 

2.嵌入组件 ：1.在components 中定义组件名，2. 在script中导入：import component from ‘url‘ 3.以标签的形式放入template中

3.input 标签具有的属性： text ，password ， url ， email , tel ,time , number , date

4.input 不支持click事件，支持 change , input , return , blur ,focus 事件

5. image 的三个属性： src  resize="contain|| stretch || cover"  class

6.flex 布局：
7.不支持百分比，伪元素，多元素选择
8.不支持综合样式。
9.flex-direction组件排列: row行row-reverse，column列 默认，column-reverse
19.justify-content主轴方向处理空白部分:
flex-start:默认，从左到右
flex-end:从右到左
sqace-between:两端对齐
center:两端对齐
space-around:均匀排列
10.align-items 交叉轴上如何对齐。
flex-start:交叉轴的起点对齐，
flex-end：终点对齐，
center：中点对齐
baseline：第一行文字对齐
11.align-content：多根轴线的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

24.list @loadmore
cell : v-for="num in lists" lists是一个数组需要初始化
<div class="panel"> <text class="text"> {{num}}

25.<textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>
输入、改变、获得焦点，失去焦点 的事件

26.slider 轮播标签
auto-play=boolean 是否自动轮播 interval=轮播时间
v-for="img in imageList" 循环，这里可以实现数组循环
export default {
data () {
return {

imageList: [
{ src: ‘https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg‘},

{ src: ‘https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg‘},

{ src: ‘https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg‘}
]
}
}
}

27.<video class="video" :src="src" autoplay controls
@start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
28.通配符： &#xe606;&#xe605;&#xe604;&#xe603;&#xe602;&#xe601;&#xe600;

el:element,需要获取的元素，一定是html中的根容器
便签里面的属性绑定写法： :href="webSite";
将整个便签绑定到data里面：v-html
dblclick 双击事件
v-on: 绑定鼠标事件
mousemove 鼠标滚动事件 event事件对象 event.offsetX 鼠标的x位置
事件修饰符：event.stopPropa
@click.once :只能点击一次
@mousemove.stop 阻止鼠标监听事件。
@click.prevent 阻止默认事件a标签默认跳到对应路径的修饰符。

键盘事件及键值修饰符-----weex无法使用
@keyup.enter 点击了enter键才触发方法
@keyup.enter.alt alt+enter 键触发


点击事件实现技算功能：<text @click="num++">
{{pt()}} 可以拿到pt方法的返回值，可以使用computed方法（同data和methods一级）进行优化
更改样式方法：
<div :class="isab ? [‘wrapper‘,‘class-a‘] : [‘wrapper‘,‘class-b‘]">
data () {
return {
isab:true,
}

2.使用computed方法：
v-for= (name,index) in rows
子组件可以通过props 拿到父组件的数据
props:{ users:{type:Array, require:true},lists{}}

weex 随笔

标签：list   http   排列   nts   事件对象   ber   ret   轮播   ima   

原文地址：https://www.cnblogs.com/zhangzonghua/p/8972172.html