04_el和data的两种写法

总结：

data与el的两种写法

1.el的两种写法

（1）new Vue时需要配置el属性；

（2）先创建Vue实例，然后再通过vm.$mount('#root')指定el的值

2.data的两种写法

(1)对象式

(2)函数式

注意：在运用组件时，data必须使用函数式，否则会报错。

3.一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

实例：

1.el的两种写法

（1）new Vue时需要配置el属性

1 new Vue({
2     el:"#root",   //第一种写法
3     data:{
4         name:'尚硅谷'
5     }
6 })

（2）先创建Vue实例，然后再通过vm.$mount('#root')指定el的值

1  const vm =new Vue({
2     data:{
3         name:'尚硅谷'
4     }
5 })
6   console.log(v) 
7   vm.$mount('#root')  //第二种写法

2.data的两种写法

（1）对象式

1  new Vue({
2     el:"#root",  
3      //data的第一种写法：对象式
4     data:{
5         name:'尚硅谷'
6     }

（2）函数式

 1 new Vue({
 2     el:"#root",  
 3     //data的第二种写法：函数式
 4     data(){
 5         console.log(this)  //此处的this是Vue的实例对象
 6         return{
 7             name:'尚硅谷' 
 8         }
 9     }
10 })

整个过程的实例代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>el和data的两种写法</title>
 8     <script type="text/javascript" src="../js/vue.js"></script>
 9 </head>
10 <body>
11      <!-- 准备好一个容器 -->
12     <div id="root">
13         <h1>你好, {{name}}</h1>
14     </div>   
15 </body>
16 <script type="text/javascript">
17   Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
18   //el的两种写法
19   /* const vm =new Vue({
20     //el:"#root",   //第一种写法
21     data:{
22         name:'尚硅谷'
23     }
24 })
25   console.log(v) 
26   vm.$mount('#root')  //第二种写法 */
27   //data的两种写法
28   new Vue({
29     el:"#root",  
30      //data的第一种写法：对象式
31    /*  data:{
32         name:'尚硅谷'
33     } */
34     //data的第二种写法：函数式
35     data(){
36         console.log(this)  //此处的this是Vue的实例对象
37         return{
38             name:'尚硅谷' 
39         }
40     }
41 })
42 </script>
43 </html>

posted on 2021-10-26 13:32 我不想一直当菜鸟阅读(79) 评论(0) 编辑收藏举报

04_el和data的两种写法

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜