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