1. Three modules:
<template>: template, content area
<style>:css
<script>： js
<script> export default{ data(){return} , components:{}, methods:{} , computed:{} } </script>
2. Embed components: 1. Define the component name in components, 2. Import in script: import component from 'url' 3. Put it in the template in the form of a tag
3. The attributes of the input tag: text , password , url , email , tel , time , number , date
4.input does not support click events, but supports change , input , return , blur , focus events
5. Three attributes of image: src resize="contain|| stretch || cover" class
6. flex layout:
7. Does not support percentages, pseudo elements, multi-element selection
8. Does not support comprehensive styles.
9.flex-direction component arrangement: row row row-reverse, column column default, column-reverse
19.justify-content main axis direction to deal with blank parts:
flex-start: default, left to right
flex-end: right to left
sqace-between: align at both ends
center: align at both ends
space-around: evenly arrange
10.align-items how to align on the cross axis.
flex-start: the starting point of the cross axis is aligned,
flex-end: the end point is aligned,
center: the middle point is aligned
baseline: the first line of text is aligned
11.align-content: the alignment of multiple axes
align-content: flex-start | flex -end | center | space-between | space-around | stretch;
24.list @loadmore
cell : v-for="num in lists" lists are an array that needs to be initialized
<div class="panel"> <text class="text"> {{num}}
25. <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></textarea>
input, change, focus, lose focus events
26.slider carousel label
auto-play=boolean whether to auto-rotate interval=rotation time
v-for="img in imageList" loop, here can realize array loop
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.通配符：
el:element, the element to be obtained must be the root container in html.
The attribute binding in the note is written: :href="webSite";
Bind the entire note to the data: v-html
dblclick double-click event
v-on: Bind mouse event
mousemove mouse scroll event event event object event.offsetX mouse x position
Event modifier: event.stopPropa
@click.once : only one click
@mousemove.stop prevents the mouse from listening to events.
@click.prevent A modifier that prevents the default event a tag from jumping to the corresponding path by default.
Keyboard events and key value modifiers -----weex cannot use
@keyup.enter to trigger the method when the enter key is clicked
@keyup.enter.alt alt+enter key triggers
the click event to realize the technical calculation function: <text @click=" num++">
{{pt()}} You can get the return value of the pt method, you can use the computed method (same level as data and methods) for optimization
Change the style method:
<div :class="isab ? ['wrapper', 'class-a'] : ['wrapper','class-b']">
data () {
return {
isab:true,
2. Use the computed method:
v-for= (name,index) in rows
The child component can get the data of the parent component through props
props:{ users:{type:Array, require:true},lists{}}