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 }}
九.表单指令