目录
初识Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue.js"> </script>
</head>
<body>
<div id="root">
<h1>hello，{{name}}</h1>
</div>
<script>
Vue.config.productionTip=false
const x=new Vue({
el:'#root',
data:{
name:'光崽'
}
})
</script>
</body>
</html>模板语法
<body>
<div id="root">
<h1>插值语法</h1>
<!-- 用于标签体 -->
<h3 >你好，{{name}}</h3>
<hr>
<h1>指令语法</h1>
<!-- 用于标签属性 -->
<a v-bind:href="url">百度</a>
<!-- v-bind可以简写为‘：’ -->
<a :href="url">百度</a>
</div>
</body>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'光崽',
url:'https://www.baidu.com/'
}
})
</script>
数据绑定
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name">
<!-- v-model:只能用于表单类标签（输入类） -->
双向数据绑定：<input type="text" v-model:value="name">
双向数据绑定：<input type="text" v-model="name">
</div>
</body>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'光崽'
}
})
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
