03el与data的两种写法

终是痴情负了空

已于 2022-08-19 17:27:39 修改

阅读量98

点赞数

分类专栏： vue基础文章标签： vue.js javascript 前端

于 2022-08-17 15:33:41 首次发布

本文链接：https://blog.csdn.net/m0_51092575/article/details/126387154

版权

vue基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

data与e1的2种写法

1.e1有2种写法
(1) .new Vuel时候配置e1属性
(2).先创建Vue实例，随后再通过vm. $mount( ’ #root”)指定e1的值。

2.data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.个重要的原则:
由Vue管理的函数，一定不要写箭头函数， .一旦写了箭头函数，this就不再是Vue实例了。
例如：data（）{}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--容器-->
<div id="root">
  {{name}}
</div>
<script type="text/javascript">
  Vue.config.productionTip = false
  //创建vue实例
  /*const v =new Vue({
    //el的第一种写法：
    // el:'#root',//用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
    data:{
      name:'尚硅谷1'
    }
  })
  //el的第二种写法：
  v.$mount('#root')//更灵活
  */

  //data的两种写法
new Vue ({
  el:'#root',
  //第一种
  // data:{
  //   name:'尚硅谷1'
  // },
  //函数式写法
  data:function () {
    //不可以写成箭头行数，因为这时候this指的是window实例
    return{
      name:'尚硅谷2'
    }
  }
  //简写data（）{}
})
</script>
</body>
</html>