Vue学习笔记

Vue模板语法

插值表达式： {{ }} 

1.只能输出单一表达式，和return差不多。

2.括号内数据会转为纯文本。插入html需要用v-html指令。

  如：<p v-html = "存放网址的数据"></p>

vue语法基础

1.数组：name :[....],

2.对象：{ .... },

3.普通变量：name: values

4.函数：name(){.......}

5.json变量："name" : values(数组，对象，字符串，数字)。

6.自定义对象：name:{key1:value1,key2:value2}

   用key.value调用。

事件

一、事件处理

1.v-on（简写为@）监听事件，在触发时执行js。

   v-on:click = "methodName"//@click = "handler".

2.方法事件处理：

   @click = "methodName"，与data平级写一个methods对象，里面写绑定的方法。

  注：读取data内的数据用this.

事件传参

1.在标签绑定的方法中，小括号传参。传的参数可以输出。在函数中获得对象后，可以调用对象的其他属性。

如："getdata(参数，$event)" 

如：log(event.target.......).  //好像不会提示，自己打

2.如果事件直接绑定函数名称，默认会传递事件对象作为事件函数的第一参数。

3.传字符串的时候，用‘’

4.将参数赋值给data中的参数：

数组变化侦测

1.变更方法，调用后UI发生变化

  如：this.数组.push('aaa');

2.替换一个数组，调用后UI不发生变化

this.数组 = this.数组.concat(['aaa']);   //这样可以改变ui

class绑定（类选择器）

1. <style lang="scss">     //super css

2. .class名{ css样式绑定；标签名{ .class名{ css }；css样式 }；}

注：有class就能用.class{ }

       嵌套使用

列表渲染

v-for:

1. items in item。

2. 通过 key 管理状态：v-for = "。。", :key = "与数据相关的唯一索引值，如id"。(v-bind 动态绑定)

3. 索引：v-for="(item, index) in  arr".

4. 遍历对象：v-for="(value, name,index) in obj".  value对应值，name对应键

        {{name}} ：{{value}}

动态绑定属性

1.将data中的文本动态绑定到标签的属性上，使用v-bind指令。

如：<div v-bind:id = "" v-bind:class = ""></div>

简写为：<div :id = "" :class = "">,加冒号。

2.布尔型属性依据true/false值决定是否绑定，如disabled属性

如：disabled = "记录真假值的数据”

3.

事件修饰符

Vue 为 v-on 提供了事件修饰符

1.阻止默认事件：

2.阻止事件冒泡：

完成当前事件后不再向父标签传递。

3.表单提交事件：

@submit = “”

计算属性 computed

1.将复杂的 {{ }}中的表达式写到 computed对象中，作为计算属性，computed对象和data，methods平齐。

2.计算属性写的时候和函数一样，但是调用函数需要加括号，这个不需要。但是需要return

3.当响应式属性更新的时候，计算属性才会重新计算。

4.函数的名字就是属性名，直接用。