|
首先理解一下 什么是mvvm
M(改变模型)->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>
复制代码
|
|