vue mvvm 双向数据绑定 与 ref选中demo 节点

周大胖子

首先理解一下 什么是mvvm
M（改变模型）->V(从而改变视图）->M(从而改变模型)

VUE的双向数据绑定，必须在表单中使用  
使用 this.msg 获取 在data中的 msg值；
使用 ref 选定dome 节点 【ref的作用 和 id 类似】

1. <template>
2.   <div id="app">
3.     <hr>
4.       <!-- 最简单的数据绑定 -->
5.       {{msg2}}
6.     <hr>
7.       <!-- html输出。利用v-html -->
8.       <span v-html="laomo"></span>
9.     <hr>
10.     <!-- 双向数据绑定1 -->
11.     <div action="">
12.        <input type="text" v-model="msg2">
13.        <button @click="getmsg()">点击获取值</button>
14.        <button @click="setmsg()">点击设置值</button>
15.     </div>
16.     <!-- 双向数据绑定2 -->
17.     <div>
18.        <input type="text" ref="userinfo">
19.        <button @click="getinfo()">点击获取信息</button>
20.        <button @click="setinfo()">点击设置信息</button>
21.     </div>
25.     <HelloWorld msg="Welcome to Your Vue.js App" laomo="事实上"/> -->
26.   </div>
27. </template>
29. <script>
30. import HelloWorld from './components/HelloWorld.vue'
32. function abc(){
33.   alert(1)
34. }
35. export default {
36.   
37.   data(){     //业务逻辑定义的数据
38.     return {
39.        msg2:'哈哈哈'
40.        ,laomo:'<h2>apppppp<h2>'
41.        ,arr:['one','two','three']
42.        ,lmtitle:'这是一个title的值'
43.        ,seen:false
44.        ,a:false
45.     }
46.    
47.   }
48.   ,methods:{        //存放VUE的方法
49.     getmsg(){
50.       alert(this.msg2)
51.     }
52.     ,setmsg(){
53.       this.msg2='设置的值    }
55.     // ref的作用主要是获取dome节点
56.     ,getinfo(){
57.       // 使用ref来获取表单数据 ref类似于 id
58.       // this.$refs.userinfo 获取demo节点
59.       console.log(this.$refs.userinfo)
60.       alert(this.$refs.userinfo.value)
61.     }
62.     ,setinfo(){
63.       this.$refs.userinfo.value ='这又是一个ref设置的值'
64.     }
65.   }
66.   ,name: 'app',
67.   components: {
68.     HelloWorld
69.   }
70.   
71. }
72. </script>
74. <style>
75. #app {
76.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
77.   -webkit-font-smoothing: antialiased;
78.   -moz-osx-font-smoothing: grayscale;
79.   text-align: center;
80.   color: #2c3e50;
81.   margin-top: 60px;
82. }
83. .red{
84.   color:red;
85. }
86. .blue{
87.   color:blue;
88. }
89. </style>

复制代码