Vue.js 模板语法和数据绑定
更新时间：2022年05月27日 11:06:33 作者： 奔跑吧鸡翅
这篇文章主要介绍了Vue.js 模板语法和数据绑定，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
模板语法
Vue 模板语法有两大类
插值语法：
- 功能：用于解析标签体内容
- 写法：
{{xxx}}，xxx是js表达式，可以读取到 data 中属性
指令语法：
- 功能：用于解析标签（标签属性、标签体内容、绑定事件...）
- 写法：
v-bind:href="xxx"或简写为:href="xxx"，xxx是js表达式，可以读取到 data 中属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue初识</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
Hello {{name}}
<h1>语法指令</h1>
<a :href="url" rel="external nofollow" >百度</a>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:"world",
url:"https://www.baidu.com"
}
})
</script>
</body>
</html>
数据绑定
Vue中有2种数据绑定的方式
- 单向绑定(v-bind)：数据只能从 data 流向页面
- 双向绑定(v-model)：数据不仅能从 data 流向页面，还可以从页面流向data
备注
- 双向绑定一般都应用在表单类元素上（如: input、select等)
v-model:value可以简写为v-model，因为v-model默认收集的就是 value 值
<body>
<div id="root">
<!--普通写法-->
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name"><br/>
<!--简写-->
单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="name"><br/>
<!--如下代码是错误的，v-model只能用在表单类元素上(输入类,有)-->
<!--<h2 v-model:x="name"></h2>-->
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
name:"world",
}
})
</script>
el的两种写法
第一种写法
new Vue({
el:"#root",
data:{
name:"world",
}
})第二种写法
const x = new Vue({
data:{
name:"world",
}
})
console.log(x)
x.$mount('#root')其中 $mount可以在打印的 vue 实例中找到
data的两种写法
第一种写法：对象式
new Vue({
el: "#root",
data: {
name: "world",
}
})第一种写法：函数式
new Vue({
el: "#root",
data: function () {
//此处的this是vue实例对象
return {
name: 'world'
}
}
})或者：
new Vue({
el: "#root",
data(){
return {
name: 'world'
}
}
})目前学习两种写法都可以，但以后学到组件，必须函数式，否则会报错
另外：不能写成箭头函数，因为 this 就不是 vue 实例对象了，而是全局 window
new Vue({
el: "#root",
data: ()=> {
//此处的this是全局的window
return {
name: 'world'
}
}
})到此这篇关于Vue.js 模板语法和数据绑定的文章就介绍到这了,更多相关Vue 模板语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue 是一套用于构建用户界面的渐进式框架，和React，都自称自己只关注视图层，全家桶对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架，本文给大家分享Vue全家桶入门基础教程，感兴趣的朋友一起看看吧2021-05-05
这篇文章主要介绍了vue中字典的使用,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
下面小编就为大家分享一篇vue使用$emit时,父组件无法监听到子组件的事件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家介绍了关于Vue路由跳转的5种方式及扩展,在Vue中路由是一种用于导航和管理页面之间跳转的机制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue移动端下拉刷新和上拉加载的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了基于Vue和Element-Ui搭建项目的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue SPA 如何解决浏览器缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
随着人工智能的发展，图像识别和人脸识别技术已经被广泛应用于各种应用程序中，Vue为我们提供了许多实用工具和库，可以帮助我们在应用程序中进行图像识别和人脸识别，在本文中，我们将介绍如何使用Vue进行图像识别和人脸对比,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue+axios实现统一接口管理的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了如何获取vue单文件自身源码路径，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论