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
原文地址:https://www.cnblogs.com/hff-syt/p/11695128.html
时间: 2024-10-12 07:18:23