官网:介绍 — Vue.js
引入vue
链接:https://download.csdn.net/download/qq_41486847/85292264
引入
<script src="/vuehtml/js/vue.js"></script>
插值语法:功能: 用于解析标签体内容
语法: {{xxx}} ,xxxx 会作为 js 表达式解析
![](https://i-blog.csdnimg.cn/blog_migrate/6de0edc2d01f501c53dca06f91d90c4a.png)
指令语法
1. 功能: 解析标签属性、解析标签体内容、绑定事件
2. 举例:v-bind:href = 'xxxx' ,xxxx 会作为 js 表达式被解析
3. 说明:Vue 中有有很多的指令,此处只是用 v-bind 举个例子
vue入门案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="/vuehtml/js/vue.js"></script>
</head>
<body>
<div id="root">
<a v-bind:href="url"><h1>{{name}}</h1></a>
<a :href="url"><h1>{{name}}</h1></a>
</div>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'点击',
url:'https://www.baidu.com'
}
})
</script>
</body>
</html>
单向数据绑定和双向数据绑定
<body>
<div id="root">
单向数据绑定
<input type="text" v-bind:value="name">
双向数据绑定
<input type="text" v-model:value="name">
</div>
<script>
new Vue({
el:'#root',
data:{
name:'12'
}
})
</script>
</body>