Vue基础学习一

Vue基础一

---

1.0 前端开发规范

  前端开发规范

1.1 vue版本更迭

vue版本
   - vue 1.0   2014年
   - vue 2.0   2016年
   - vue 3.0【 试用版 】 2019年国庆

1.2匿名函数

javascript
(function (形参1，形参2) {
/* 你的代码 */
 })(实参1，实参2)

- 好处
     - 1. 防止全局作用域
     - 2. 防止命名冲突
     - 3. 防止一些脚本的攻击
     - 4. 封装js库基本上都是用它来完成

1.3 数据驱动视图
    - 意义： 当数据发生改变时，视图也会随之改变
    - 我们从现在开始，不在关注v的变化了，我们关注data

1.4双向绑定

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

1.5一个迷你Vue

(function(global, factory) {
    global.MinVue = factory()
})(this, function() {
    'use strict';
    function MinVue(options) {
        if (!(this instanceof MinVue)) {
            warn('MiniVue is a constructor and should be called with the `new` keyword');
        }
        this._init(options);
    }
    MinVue.prototype._init = function(options) {
        console.log(options);
        document.querySelector(options.el).innerHTML = options.data.msg;
    }
    return MinVue;
})

1.6 new Vue()的结果

以标签化呈现， ，称之为：  根实例组件 

学习vue遇见的问题

1.怎么在服务器上运行html?
- open with live server 右键选择
2.怎么改变运行的默认浏览器？
-文件->首选项->设置 输入open-in