04el与data的两种写法

最新推荐文章于 2024-07-08 10:04:44 发布

qq_26326471

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量40

点赞数

分类专栏：学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_26326471/article/details/127455432

版权

学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<template>
    <div>
      <h1>el与data的两种写法</h1>
    </div>
    <div id="root">
      <h2>{{ name }}</h2>
    </div>
  data与el的2种写法<hr/>
        1.el有两种写法<hr/>
          (1).new Vue时配置el属性<hr/>
          (2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值<hr/>
        2.data有两种写法<hr/>
          (1).对象式<hr/>
          (2).函数式<hr/>
          如何选择:目前哪种写法都可以, 组件时data必须使用函数式,否则会报错<hr/>
        3.一个重要的原则:<hr/>
          由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了<hr/>
  </template>
  <script>
  // import  01_初始Vue  from './components.';
  // el的两种写法
  // const v = new Vue({
  //     // el:'#root', //第一种
    // data的第一种写法对象式
  //     data: {
  //       name: ''
  //     }
  // })
  // console.log(v)
  // v.$mount('#root') // 第二种
  // 等一秒钟开始关联解析，然后拿到模板，解析到结构页面上。
  // setTimeout(()=>{
  //   v.$mount('#root')
  // },1000);
  
  export default {
  //data的第二种写法:函数式
    data() { 
      // console.log('@@@',this); //此处的this是Vue实例对象， 如果写成箭头函数，此处的this就是window
      return {
        name: '别怕,反正只能活一次',
  
      }
    },
    methods:{
    },
    computed: {
      },
    watch: {
  
    }
    
  }
  
  </script>
  <style scoped>
  </style>