微信扫一扫打赏支持

VUE课程参考---2、VUE基本使用

VUE课程参考---2、VUE基本使用

一、总结

一句话总结：

1、引入Vue.js：<script src="vue.js"></script>
2、创建Vue对象：var app = new Vue({});
3、在模板中使用数据：{{ message }}
1、引入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、创建Vue对象
    el : 指定根element(选择器)
    data : 初始化数据(页面可以访问)

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

3、在模板中使用数据
    模板语法：双大括号：{{ message }}

    <div id="app">
      {{ message }}
    </div>

 

 

1、双向绑定实例？

v-model指令：<input type="text" v-model="msg">

 

2、vue的mvvm原理？

第一个m是Model，数据模型，就是从后台拿数据
第二个v是View，也就是视图，数据肯定是要在视图里面展示的
第三个vm是ViewModel，也就是视图模型，也就是vue实例的部分，也就是做dom监听和数据绑定

 

3、mvvm中的vm层的意义？

a、vm层分割了m（model）层和v（view）层，每当view层需要获取或者保存数据的时候，都需要vm做中间的处理
b、这样做的意义是vm层（ViewModel）（vue实例）帮我们做了数据的双向绑定（具体dom监听和数据绑定）

 

 

4、chrome上调试vue的插件？

Vue Devtools：可以在开发模式下很方便的知道vue的数据状态和数据变化过程

 

 

二、VUE基本使用

博客对应课程的视频位置：

 

1、vue基本使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>2、VUE基本使用</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 VUE基本使用
11 1、引入Vue.js
12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
13 
14 2、创建Vue对象
15     el : 指定根element(选择器)
16     data : 初始化数据(页面可以访问)
17 
18     var app = new Vue({
19       el: '#app',
20       data: {
21         message: 'Hello Vue!'
22       }
23     })
24 
25 3、在模板中使用数据
26     模板语法：双大括号：{{ message }}
27 
28     <div id="app">
29       {{ message }}
30     </div>
31 
32 
33 双向绑定实例
34 v-model指令：<input type="text" v-model="msg">
35 
36 
37 mvvm原理
38 第一个m是Model，就是从后台拿数据
39 第二个v是View，也就是视图，数据肯定是要在视图里面展示的
40 第三个vm是ViewModel，也就是视图模型，也就是vue实例的部分，也就是做dom监听和数据绑定
41 
42 
43 vue调试的chrome插件
44 Vue Devtools：可以在开发模式下很方便的知道数据状态和数据变化过程
45 
46 
47 -->
48 
49 <!--1、vue基础使用-->
50 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
51 <div id="test">
52     <p>{{msg}}</p>
53 </div>
54 <script>
55     let vm=new Vue({
56         el:'#test',
57         data:{
58             msg: '范仁义'
59         }
60     });
61 </script>
62 
63 <!--2、vue双向绑定-->
64 <!--<script src="vue.js"></script>-->
65 <!--<div id="test1">-->
66 <!--    <input type="text" v-model="msg">-->
67 <!--    <p>{{msg}}</p>-->
68 <!--</div>-->
69 <!--<script>-->
70 <!--    let vm=new Vue({-->
71 <!--        el:'#test1',-->
72 <!--        data:{-->
73 <!--            msg: '范仁义'-->
74 <!--        }-->
75 <!--    });-->
76 <!--</script>-->
77 </body>
78 </html>

 

 

2、vue的mvvm原理

 

 

 
posted @ 2020-05-05 10:40  范仁义  阅读(244)  评论(0)    收藏  举报