Vue的使用

08.27自我总结

Vue的使用

一.挂载点




这样设置好了后这个vue中的内容会与对应的css选择器进行关联

注意点:

  • 挂载点只遍历第一个匹配的结果
  • html与body标签不可以作为挂载点
  • 挂载点的只一般就采用id选择器(唯一性)

二.插值表达式

html差值部分页面

{{msg}}

Vue部分代码

注意点:Vue中的msg变量发生变化的再没其他约数条件下msg也会发送变化

里面值进行函数过滤

{{msg|函数名}}

h2标签内值为msg进过函数处理后的返回值

三.约束变量渲染一次渲染

还是基于上述的html页面


{{msg}}

{{msg}}

{{msg+msg2}}

改变值我们可以通过input框,输入值改变msg变量的值 注意我们不能使用 这个只能显示msg,input输入的值不会使得msg的值发送变化

四.文本指令

1.v-text

h2内的标签中test就是由vue中传的msg变量的值,但是其中html标签不会被解析

里面传的值还能进行四则运算字符串等等的相关操作

2.v-html

<--假设html变量为ss-->

h2标签会显示ss

html标签可被解析

五.属性指令

重点

属性指令:v-bind:属性名="属性值" => v-bind: 可以简写为 :

关于style的不同写法

写法一:


写法二:


关于class的写法



六.事件指令

事件指令 v-on:事件名="函数" => v-on: 可以简写为 @

七.函数的创建

方法一

方法二

方法三

注意点:这种写法,内部拿不到this(这里的this是指window)

八.事件指令传参和不传参的区别


{{ msg }}
{{ msg }}
{{ msg }}

九.表单指令

{{ info | infoFilter }}

是否同意

你可能感兴趣的:(Vue的使用)