The part of Vue's konwledge

  1. 必须创建 Vue 实例

  2. 建议div 为挂载点挂载的对象

  3. el:挂载点不能少 绑定的事件等在标签的内部,或者在标签中所包含的两个大括号里

  4. v-text 设置文本

  5. v-html 把数据中的html元素 结构解析为标签在页面中显示出来

  6. v-on 为元素绑定事件 例如

简写: @click、@monseenter、@dblclick......
绑定的方法定义在 method 属性中
  1. 在一个挂载区中,可以通过 this 来获取某一数据
var app = new Vue({
    el:"#app",
    data:{
      food:"sdfsf"
    },
    methods:{
      doIt:function(){
      alert("sdfs")
    },
      changeFood:function(){
          console.log(this.food);
      }
    }
  })
  1. 变量设置初始值: num:xx 没有用到 =等号

  2. 创建 Vue 示例时: el(挂载点)、data(数据)、method(方法)

  3. v-show : 根据表达值的真假,切换元素的显示隐藏,原理是修改元素的display属性。指令后面的内容都会解析为布尔值 为true则显示、为false则隐藏

  4. v-if :根据表达式的真假来控制元素的显示和隐藏,原理是将元素直接从 DOM 中移除,显示则是再添加上(对性能消耗比较大)

  5. v-bind:设置元素的属性比如 :(src 、title 、 class)

简写的话只保留 :属性名

动态的增删 class 建议使用对象的方式

  1. vue 代码实现初步理解有以下几个步骤 :
> 1.  先将vue代码引入需要的html中
 
> 2.  声明实例化vue方法

> 3.  在任意元素标签中挂载 el中的值

> 4.  data 值区域就写想添加的值,比如变量值、图片等;methods方法区域就添加想实现的方法

> 5.  在html 元素中添加各种事件

这种添加数组和事件的方式很新颖
  1. 列表数据可以用数组来储存

  2. v-for =“xx in 00" 其作用是:根据数据生成列表结构

数组经常和 v-for 结合使用,数组长度的更新会同步到页面上,是响应式的[图片上传失败...(image-7529b0-1628409019792)] 

这里的 it 必须和 {{ }}中的 it 相同

注意 index 变化的同时 什么变了?
item,index可以结合其他指令一起使用

  1. v-on 的补充:方法之中可以添加参数进行传递,同样的在事件添加的位置也要增加参数(这里的参数不仅包含形参也包括实参,多个参数)

  2. v-model,获得和设置表单元素的值(双向数据绑定)
    在表单中更改值时,会同步更新,绑定的数据会和表单元素的值相关联

  3. 在html标签中要添加值或者是事件,他们之间用空格隔开

  4. 搞清楚 v-for 中 两个参数的具体含义分别代表什么,不要糊里糊涂的用

 
 
    1. v-once指令可以使当前 mustache 中的值固定不变

    你可能感兴趣的:(The part of Vue's konwledge)