Vue.js - 双向数据绑定 v-model
一、步骤
- 引入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 创建Vue对象
el： 指定根element（选择器）
data：初始化数据 （model 部分） - 双向数据绑定： v-model
- 显示数据： {{xxx}}
- 举例：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
window.onload = function () {//window.onload 用于提前载入浏览器页面
const vm = new Vue({ //配置对象, 创建Vue实例
el: '#app', //选择器
data: { //数据域（model)
username: 'Hello Vue!' //数据域中的数据
}
})
}
</script>
<body>
<div id="app">
<input type="text" v-model="username" />//双向数据绑定的数据是 username中的内容
{{username}}//数据的显示
<p >Hello {{username}}</p>//显示数据
</div>
</body>
结果：
二、声明式显示 {{xxx}}
- 双大括号可以显示data数据域中的内容
- 声明式显示可以引用js的语法格式，如第16行，将其转化成大写字母
v-html
- < p v-html=“message”>< /p >
v-html 会把data数据域中的文本数据理解为一个标签
v-text
- < p v-text = “message”>< /p>
v-text 会把data数据域中的文本数据单纯理解为数据
:bind 强制数据绑定
- 将标签的属性值与data数据域中的数据做绑定
<img :src="imgUrl">
@click绑定事件监听
<script>
window.onload = function () {
const vm = new Vue({
el: '#app',
data:{
message:'Hello world!',
mes: '<a href="http:/www.baidu.com"> 我是一个超链接 </a>',
imgUrl: '../img/_510735865_mmexport1579333094865_1579333094000_xg.jpg'
},
methods:{
test(){
alert("你看我出不出来");
}
}
})
}
</script>
<body>
</body>
<div id="app">
<h2>1:双大括号的表达式</h2>
<p>{{message}}</p> //声明式显示，显示data数据域中的数据
<p> {{message.toUpperCase()}}</p>//用js语法将显示内容转换为大写
<p v-text="mes"></p> //显示文本内容 相当于 <p>{{mes}}</p>
<p v-html="mes"></p> //显示文本标签
<h2>2：指令一：强制数据绑定</h2>
<img :src="imgUrl">
<h2>3:指令二：绑定事件监听</h2>
<button @click="test">test1</button>
</div>
结果：（非bind、click的截图）
