Vue基础学习一

Posted 2021-03-25 hff-syt

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()的结果

以标签化呈现，?，称之为：<font?style?=?"color:?red;">??根实例组件?

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