初识vue

最新推荐文章于 2024-03-07 15:51:05 发布

拙慕JULY

最新推荐文章于 2024-03-07 15:51:05 发布

阅读量101

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42357865/article/details/102632030

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

初识vue

1.vue版本
- vue 1.0 2014年
- vue 2.0 2016年
- vue 3.0【试用版】 2019年10月
2.vue简介–hello vue


<body>
    <div id="app">
        {{ this.msg }}
        <p>
            {{ msg }}
        </p>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    /**
     * 当我们通过script引入vue.js后，就会全局注册一个Vue变量，它是一个构造函数
    */
    // new Vue( Options )  //options-选项
    var vm = new Vue({
        el: '#app',//挂载：将一个已有的DOM元素的选择器挂载在构造函数的选项上，也确定了vue实例的作用范围
        data: {
            msg: 'hello vue'
        }
    });
    console.log('vue' , vm);
</script>

3.vue源码案例【思维】
- 匿名函数
- `

    (function(形参1，形参2){
        //demo
    })(实参1，实参2)

匿名函数好处：
- 隔离作用域，避免全局作用域污染；
- 防止命名冲突；
- 防止一些脚本的攻击
- 封装js基本上都是用它来完成；
- 匿名函数，仅在调用时临时创建，临时创建的作用域链对象，在匿名函数调用结束后直接销毁；
- 节省内存空间
  ……
4.数据驱动视图
- 意义：当数据发生改变时，视图也会随之改变
- 学习vue思想转换：关注data变化，不再关注v的变化
5.双向绑定

</head>
    <body>
      <div id="app">
        <input type="text" v-model = "msg">
        <p> {{ msg }} </p>
      </div>
    </body>
    <script src="../../../lib/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue'
        }
      })
    </script>