. Vue基础语法

. Vue基础语法
1. Vue使用

  • 1. 生成Vue实例和DOM中元素绑定
  • 2. app.$el --> 取出该vue实例绑定的DOM标签
  • 3. app.$data --> 取出该vue实例绑定的data属性

2. 模板语法

  • 1. {{name}} --> 在标签中间引用data属性中的变量
  • 2. v-html='msg' --> 在页面上显示我定义的标签元素
  • 3. v-if='ok' --> 控制标签在不在DOM中
  • 4. v-show='!ok' --> 控制标签的display属性的值(是否显示)
  • 5. v-bind:href='url' --> 将标签的属性和vue实例的data属性绑定起来
  • 6. v-on:click='dianwo'--> 给标签绑定一个点击事件,方法需要在vue实例的methods中定义
  • 7. v-model='article' --> 用在input标签和textarea标签中,将用户输入和vue实例中的数据属性建立双向绑定


3. 计算属性和侦听器
1. 计算属性
(字符串翻转的例子)

  • 1. 计算属性需要定义在vue实例的 computed 中
  • 2. 多用于对变量做一些自定义的操作
  • 3. 我们在页面上像使用普通data属性一样使用计算属性

2. 侦听器

  • 多用于一些复杂的运算或者异步操作
  • 侦听器需要放在 vue实例的 watch 中

4. class和style属性

  • 1. 基于对象的绑定
  • 2. 基于数组的绑定

5. 条件渲染

  • v-if
  • 如果想控制多个标签的显示与否,可以使用 template 标签把它们包起来
  • v-if/v-else
  • v-if/v-else if /v-else


6. 列表渲染

  • v-for循环

7. 事件处理

  • 详见2.模板语法

8. 表单绑定

  • 详见2.模板语法



猜你喜欢

转载自www.cnblogs.com/qunxiadexiaoxiangjiao/p/9367292.html