weex 随笔

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{}}

猜你喜欢

转载自www.cnblogs.com/zhangzonghua/p/8972172.html