发表于: 2020-05-10 21:33:20

1 1755


今日完成

v-cloak、v-text、v-html的基本使用(在页面中)
再次观看页面,会发现有个瞬间的闪烁,即:
当vue请求出来之后,才把前者渲染(加载)成后者,这个过程(闪烁),
需要解决,让用户看不到插值表达式(没有闪烁,直接加载渲染的结果123)
方法一:
方法二:
不用设置样式,表达效果和前者一致
两者区别
1.默认v-text是没有闪烁问题的,前者有,需要添加样式解决
2.渲染完成后
且v-text直接填写的========会显现出来,知道加载到v-text=”msg“123替换掉========,出现闪烁
所以要根据实际情况来选择,
如果解决闪烁,两个都可以用,如果需要在元素前面或后面添加东西,只能用前者
v-html
插值表达式和v-text都把标签<h1>识别成字符串,当成内容显示
想要输出成HTML格式
ps:这些就是指令(应用)
v-bind
描述:
1.直接在tilie(t)中添加mytitle(mt),就把mytitle直接当成字符串来写了
2.mytitle其实是date的一个属性,它往title上放,不能直接放,需要用指令v-bind告诉t,mt是一个变量,在前面加上v-bind绑定,t就绑定变量mt,解析时就会解析变量mt的值,替换
描述:
v-bind会把引号里的东西当做js去解析执行,认为成一个表达式,变量+字符串是正确的表达式,当vue解析到这一行会当成表达式解析
ps:v-bind: 指令可以简写为: 要绑定的属性
使用v-on指令定义Vue中的事件
ex:实现点击事件
不用vue的话:
Vue中提供了v-on:事件绑定机制
点击报错
原因:
正确做法:
描述:在methods中设置show方法,v-on:click绑定点击事件,="show",事件触发执行show方法(去methods中找);
总结:浏览器端常见的事件都可以这样(在这里)去定义



返回列表 返回列表
评论

    分享到