您现在的位置是:首页 > Javascript
当前栏目
vue模版语法
2023-02-25 18:16:27 时间
这是我参与8月更文挑战的第29天,活动详情查看:8月更文挑战
vue的模版语法有:插值语法 和 指令语法 两种
插值语法
{{}}
<div class="root">
<h1>Hello,{{name}}</h1>
</div>
<script>
// 创建vue实例
new Vue({
el: '.root',
//写成对象
data: {
name: '孙尚香'
}
})
</script>
指令语法
我们想要写动态的超链接,怎么实现那?
我们发现接着使用插值语法去为<a>
添加href属性是实现不了的。而且会报错
我们审查元素,可以看到,它将这个变量还是解析成了字符串。
而且发现报错了,他提示这种写法已被移除,使用v-bind
v-bind 单向绑定
使用v-bind
加完 v-bind 引号间的东西 就会被解析成 js表达式。就不是字符串了。
<a v-bind:href="href">跳转</a>
v-bind 简写 成 :
<a :href="href">跳转</a>
v-model 双向绑定
v-bind 其实是单向绑定的。如果我们想给输入框赋值,并且改变输入框的内容时,值也会发生变化。 这个时候就要使用v-model
<div class="root">
<h1>Hello,{{name}}</h1>
<a v-bind:href="href">跳转</a>
<input v-model="href">
</div>
<script>
// 创建vue实例
new Vue({
el: '.root',
//写成对象
data: {
name: '孙尚香',
href:'http://www.baidu.com'
}
})
</script>
当我们在输入框中输入内容后,href这个值也变化了,而v-bind是单向绑定的,这个时候href属性的跳转地址也改变了。
那我以后在每个地方都用双向绑定的 v-model 就好了。⚠️ 这是不对的。如在<h1>
标签中使用v-model,是会报错的。
<h1 v-model="name"></h1>
v-model只能应用在表单元素(输入类元素)上,因为表单元素是与用户交互的,而<h1>
是不会有交互的
使用场景
插值语法:
用在标签间的标签体中 <h1>{{name}}</h1>
指令语法:
用于标签中的属性<a :href="url"></a>
。 并且可以使用简写形式 :
用于标签体、绑定事件。
想将 href属性的内容变成大写<a :href="url.toUpperCase()"></a>
相关文章
- 使用 JavaScript 增强你的文档
- 对于“前端状态”相关问题,如何思考比较全面
- 一篇带你了解全新的的 CSS 选择器 :Has()
- 从源码理解 React Hook 是如何工作的
- 西瓜业务是如何从 0-1 建设 SEO 的
- 15 个有用的 JavaScript 技巧
- 说说 React 中 Fiber、DOM、ReactElement 实例对象之间的引用关系
- 现代 CSS 高阶技巧,不规则边框解决方案
- 我们深度解析@Bean注解,你学会了吗?
- 如何使用Vue测试库测试应用程序?
- 你可能不知道的字符串分割技巧
- 你知道什么是 @Component 注解的派生性吗?
- 八种CSS实现内容居中的方法
- 搭了一个RocketMQ高可用集群,同事直呼哇塞!
- 一篇带你理解 React 的 Commit 阶段
- 如何在 JavaScript 中将数字四舍五入到小数点后两位
- 30 个超级有用的 JavaScript 单行代码
- 理解 React 的调和器 Reconciler
- 一篇了解@ComponentScan注解
- 详解SpringBoot底层原理实现