vue mvvm 双向数据绑定 与 ref选中demo 节点
首先理解一下 什么是mvvmM（改变模型）->V(从而改变视图）->M(从而改变模型)
VUE的双向数据绑定，必须在表单中使用
使用 this.msg 获取 在data中的 msg值；
使用 ref 选定dome 节点 【ref的作用 和 id 类似】
<template>
<div id="app">
<hr>
<!-- 最简单的数据绑定 -->
{{msg2}}
<hr>
<!-- html输出。利用v-html -->
<span v-html="laomo"></span>
<hr>
<!-- 双向数据绑定1 -->
<div action="">
<input type="text" v-model="msg2">
<button @click="getmsg()">点击获取值</button>
<button @click="setmsg()">点击设置值</button>
</div>
<!-- 双向数据绑定2 -->
<div>
<input type="text" ref="userinfo">
<button @click="getinfo()">点击获取信息</button>
<button @click="setinfo()">点击设置信息</button>
</div>
<HelloWorld msg="Welcome to Your Vue.js App" laomo="事实上"/> -->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
function abc(){
alert(1)
}
export default {
data(){ //业务逻辑定义的数据
return {
msg2:'哈哈哈'
,laomo:'<h2>apppppp<h2>'
,arr:['one','two','three']
,lmtitle:'这是一个title的值'
,seen:false
,a:false
}
}
,methods:{ //存放VUE的方法
getmsg(){
alert(this.msg2)
}
,setmsg(){
this.msg2='设置的值 }
// ref的作用主要是获取dome节点
,getinfo(){
// 使用ref来获取表单数据 ref类似于 id
// this.$refs.userinfo 获取demo节点
console.log(this.$refs.userinfo)
alert(this.$refs.userinfo.value)
}
,setinfo(){
this.$refs.userinfo.value ='这又是一个ref设置的值'
}
}
,name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.red{
color:red;
}
.blue{
color:blue;
}
</style>
页:
[1]