标签：Vue return methods 绑定 基础 语法 修饰符 data red

常用模板语法

指令

• v-once:只渲染一次，后续不会因为数据的改变重现渲染
• v-if/v-else-if/v-else(是否在dom树上存在)
• v-show（display控制，dom树上是存在的）
• v-bind/:(属性绑定)
• v-on/@(事件绑定)
• v-html、v-text、{{}}
• v-model
• v-for

事件绑定

1. 基础语法

// 绑定单个事件
<button @click="handle">点击</button>
// 绑定多个事件
<button @click="handle1(), handle2()">点击</button>

2. 传递参数

// 传递一般参数
<button @click="handle(2)">点击</button> // methods中对应方法为 handle(num) {...}
// 传递事件参数
<button @click="handle">点击</button> // methods中对应方法为 handle(e) {...} 只需要在参数接收列表接收
// 一般参数 + 事件参数:使用$event代表传递的event，接收时一一对应
<button @click="handle(2, $event)">点击</button> //  methods中对应方法为 handle(num,e) {...}

3. 修饰符

语法为@事件名称.事件修饰符="事件绑定的函数名称"

// 一般用法
<a @click.prevent="handleClick" href="xxxx">连接</a>
// 常见的事修饰符： stop阻止冒泡 once只执行一次 prevent阻止默认事件的触发
// 键盘修饰符 enter tab
// 鼠标修饰符 left middle right
// 精确修饰符

列表渲染v-for

v-for优先级高于v-if所以二者不要使用在同一标签上，否则会导致v-if无效

// key无变化，原有项复用，提升性能
// key是必须的，且是唯一的，不要使用index
<div v-for="(item, index) in list" :key="唯一值">
// 也是可以循环对象的{key: value}
<div v-for="(value,key, index) in list" :key="唯一值">

双向绑定v-model

常见的双向绑定出现在input的type:text, checkbox, radio、texteara和select

1. 基础语法

data () {
  return {
    bindVals: ''
  }
}
// 输入框的数据变化，会导致data中的数据变化，同理data中的数据变化也会导致输入框中的数据变化
<input type="text" v-model="bindVals" />

2. 复杂的双向绑定

// checkbox data中存在一个数组 message: [],选中的value会加入数组
<input type="checkbox" v-model="message" value="1"/>
<input type="checkbox" v-model="message" value="2"/>
<input type="checkbox" v-model="message" value="3"/>
// radio  data中存在 message:""选中的会让message等于其值
// select 类似于checkbox

3. 常见修饰符：.lazy、.number、.trim

动态属性

采用[]动态计算属性名称,一般用于v-bind/v-on中

<div :[name]="message">{{text}}</div>
<button @[eventName]="handle">按钮</button>

data & methods & watcher & computed

methods

methods: {
  handle () {
    ...
  }
}

1. methods中的所有方法函数中的this都指向vue实例，定义函数不要使用箭头函数，否则会有this指向问题

computed

data () {
  return {
    count: 2,
    price: 10
  }
},
computed:{
  total() {
    return this.count * this.price;
  }
}
template: `<div>{{total}}</div>`
// 修改count或price中的任意一个都会导致total的改变

1. computed中的函数只有依赖的数据发生变化时才会重新执行计算，methods中的函数只要页面重新渲染就会被执行

watch

1. 数据变化后执行异步操作

watch: {
  price () {
    // current当前修改的值， pre初始的值
    setTimeout((curent, pre) =>{
      console.log('price changend');
    },3000);
  }
}

样式绑定

1. 字符串控制 | 数组控制 | 对象控制

<style>
.red {
  color: "red"
}
</style>
data () {
  return {
    styleStr: 'red', // 字符串控制
    styleObj: {'red': true, green: true}, // 对象控制，true表示显示，false表示不显示 :class="styleObj"
    styleArr: ['red'] // 在数组中表示显示，不在表示不显示 :class="styleArr"
  }
},
template: `<div :class="styleStr">这是一个盒子</div>`

2. 行内样式

 data () {
  return {
    lineStyle: {
    color: 'red'
    }
  }
   },
// template: `<div style="color: green">这是一个盒子</div>`
template: `<div :style="lineStyle">这是一个盒子</div>`

3. 子组件接受父组件的样式$attr.class

标签：Vue,return,methods,绑定,基础,语法,修饰符,data,red
来源： https://www.cnblogs.com/liyangfeigis/p/16340121.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。