目录模板语法数据绑定el的两种写法data的两种写法模板语法 Vue 模板语法有两大类 插值语法： 功能：用于解析标签体内容写法：{{xxx}}，xxx是js表达式，可以读取到 da
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-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>
第一种写法
new Vue({
el:"#root",
data:{
name:"world",
}
})第二种写法
const x = new Vue({
data:{
name:"world",
}
})
console.log(x)
x.$mount('#root')其中 $mount可以在打印的 vue 实例中找到
第一种写法：对象式
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 模板语法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: Vue.js 模板语法和数据绑定
本文链接: https://www.lsjlt.com/news/149941.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0