vue模版语法
Vue 语法 模版
2023-06-13 09:16:41 时间
这是我参与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>
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- vue浏览器缓存问题_vue兼容浏览器能兼容到几
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- vue遍历数组对象foreach_js遍历对象数组
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- Vue之Promise
- Vue Element入门教程
- vue-cli构建项目
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- VUE中的模板语法以及过滤器和双向数据绑定
- 前端vue面试题2021及答案_redux面试题
- vue源码分析-从new Vue开始
- Vue入门(三)——网络/综合应用
- 3-Vue网络应用
- 记录第二天-Vue起步
- vue关于页面刷新的几个方式[通俗易懂]
- VUE组件封装_vue使用组件
- 美团前端常见vue面试题(必备)_2023-02-28
- 今天讲vue讲解专栏里的VUE组件
- Vue学习笔记(一)
- 校招前端一面必会vue面试题指南3
- vue页面中使用浏览器自带的前进后退功能
- Vue Router
- 【Vue】实现出生日期计算年龄
- 初识vue.js模板语法
- 在VUE项目中添加使用SkeyeWebPlayer.js直播点播H5免费播放器
- vue:将px转化为rem,适配移动端vant-UI等框架(postcss-pxtorem)
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue接入Redis拓展应用的可能性(vue调redis)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- Vue如何连接Redis数据库(vue怎么连接Redis)
- 构建基于Vue与Redis的高性能缓存系统(VUE redis缓存)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)