Vue基础-本地应用

1. 内容绑定，事件绑定

• v-text：设置标签的文本值（textContent）

  默认写法会替换全部内容，使用差值表达式{{}} 可以替换指定内容
  内部支持写表达式

• v-html：设置标签的innerHTML

  内容中有HTML会被解析成标签 （存在安全问题）

• v-pre :填充原始信息

  显示原始信息 跳过编译过程

• v-on基础：为元素绑定事件

  v-on:click="doit"   ||  @dblclick="doit"
  

  绑定的方法定义在methods属性中
  方法内部通过this关键字可以访问定义在data中数据

2. 显示切换，属性绑定

• v-show: 根据表达式的真假，切换元素的显示与隐藏

  操作样式

• v-if: 根据表达式的真假 切换元素的显示和隐藏

  操纵dom元素

• v-bind：设置元素的属性

  v-bind：属性名=表达式 （简写 :属性名）

3. 列表循环，表单元素绑定

• v-for：根据数据生成列表结构

  v-for="(item,index) in 数据"
  key的作用：帮助Vue区分不同的元素，提高性能

  <li :key="item.id" v-for="(item,index) in list">{{item}} + "---" + {{index}}</li>
  

• v-on补充：传递自定义参数，事件修饰符

  可以自定义参数
  事件后跟.修饰符 可以对事件限制 .enter:是回车 .stop 阻止冒泡 .prevent 阻止默认行为
  事件修饰符地址：事件修饰符地址
  自定义按键修饰符：Vue.config.keyCodes.f1 = 122

• v-model：获取和设置表单元素的值（双向绑定）

  绑定的数据和表单元素的值双向绑定
  底层实现原理：<input :value="msg" @input="msg=$event.target.value">

补充

• v-clock：解决差值表达式闪动的问题

  1.提供样式[v-cloak]{display:none;}
  2.在差值表达式所在的标签中加 v-cloak

• v-once：只编译一次

  显示内容之后不再具有响应式功能
  若需要显示之后不再改变的内容，可以用，提高性能

• MVVM设计思想

  1.M(model) 模型(数据)
  2.V(view) 视图(DOM)
  3.VM(View-Model) 实现控制逻辑

• Vue数组相关API

  1.变异方法（修改原有数据）
  push() pop() shift() unshift() splice() sort() reverse()
  2.替换数组（生成新的数组）
  filter() concat() slice()
  3.修改响应式数据

  Vue.set(vm.items,indexOfltem,newValue)
  vm.$set(vm.items,indexOfltem,newValue)
  

  1.参数一表示要处理的数组名称
  2.参数二表示要处理的数组的索引或者对象的属性名
  3.参数三表示要处理的数组的值