Vue基础语法
现在的Vue局面是Vue2.0到Vue3.0之间的过度时期。
1. Vue概念
1.1 Vue是什么
- Vue是一套用于构建用户界面的渐进式的JavaScript框架。
- 我们只需要将一些数据传递给前端，而不需要关注前端界面的构成。
渐进式：
- Vue可以自底向上逐层的应用
- 简单应用：只需一个轻量小巧的核心库。
- 复杂应用：可以引入各式各样的Vue插件。
1.2 Vue的开发者
- 尤雨溪（中国程序员）
后起之秀，生态完整，已然成为国内前端工程师的必备技能。
1.3 Vue的特点
- 采用组件化模式，提高代码复用率、切让代码更好维护。
网络异常，图片无法展示
|
- 一个Vue文件就是一个组件。在Vue文件中存储的就是HTML、CSS以及JS文件。
- 我们将一个整体的网页分为多个Vue组件，这样修改一个Vue组件的时候不会影响另一个组件中的内容。这就提高了代码的维护性以及复用率。
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率。
- 使用Vue中的组件(v-for)来遍历这个数据并且写入到前端界面。
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
- 当新增数据的时候，新的数据会覆盖以前的数据。这样写非常浪费时间。我们想做的只是添加以前没有的数据，而已经存在的数据就不去处理它。提高效率
- 使用Vue构建一个虚拟DOM，当新增数据的时候，新的虚拟DOM和以前的DOM进行比较，(这个比较使用的Diff算法)当第二次多添加数据的时候，只会将多的数据从虚拟DOM传递俄给真实的DOM。这样就不会造成大量的数据传递以及覆盖。
1.4 HTML引入Vue
1.4.1 初识Vue
- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象.
- root容器里面的代码仍然符合HTML规范,只不过混入了一些特殊的Vue语法.
- root容器里的代码被称为 [Vue模板].
- Vue实列和容器是一一对应的关系.
- 真实开发中只有一个Vue实例,并且会配合着组件一起使用.
- {{xxx}}}中的xxx要写js表达式,且xxx可以直接读取到data中的所有属性值.
- 一旦data中的数据发生变化,那么页面中用到该数据的地方会自动更新.
1.4.2 区分JS表达式与JS代码(语句)
表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1) a (2) a+b (3) demo(1) (4) x === y ? 'a' : 'b' 复制代码 复制代码
js语句：就是简单的JS代码语句，不包含任何数据的计算
(1) if(){} (2) for(){} 复制代码 复制代码
1.4.3 第一个Vue实例以及其中的核心知识
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试第一个Vue程序</title> <!-- 引入Vue --> <script type="text/javascript" src="../../../../js/vue.js"></script> </head> <body> <!-- 初识Vue: 1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象. 2. root容器里面的代码仍然符合HTML规范,只不过混入了一些特殊的Vue语法. 3. root容器里的代码被称为 [Vue模板]. 4. Vue实列和容器是一一对应的关系. 5. 真实开发中只有一个Vue实例,并且会配合着组件一起使用. 6. {{xxx}}}中的xxx要写js表达式,且xxx可以直接读取到data中的所有属性值. 7. 一旦data中的数据发生变化,那么页面中用到该数据的地方会自动更新. 注意区分js表达式 与 js代码(语句) 1. 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方: (1) a (2) a+b (3) demo(1) (4) x === y ? 'a' : 'b' 2. js语句 (1) if(){} (2) for(){} --> <!-- 准备好一个容器 --> <div id="root"> <!-- Vue中提供了插值运算符 {{key}} 注意:这只是一个符号,与解构赋值和对象没有任何的关系--> <!-- 这里还可以进行相关方法的调用. 比如:字符串调用全部转化为大写的方法.--> <h1>Hello,{{name}},{{language.toUpperCase()}},{{Date.now()}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false; // 阻止 Vue 在启动时生成生产提示。 // 创建Vue实例。初始化Vue的时候，使用的是构造方法，里面传递了一个参数，并且这个参数是一个对象 new Vue({ /*这里的key值是固定的，value值要保持格式一致。*/ /* el是:element的简称。使用el把Vue与dom对象进行绑定。 可以使用id选择器、类选择器、标签选择器等方法。和CSS是一样的。 就是告诉Vue，一会要将处理完的成果交过div这个盒子处理。在盒子上进行 数据的显示。 还可以使用带代码的方式手动获取：(不常使用) document.getElementById("root") */ el:'#root', // el用于指定当前Vue实列为哪个容器服务，值通常为css选择器字符串。 /* * 实际开发中，我们需要处理的数据肯定有很多，所以此时就需要一种结构来存储这么多的数据 * 并且还要保持数据的唯一性。 * * 所以：我们的data数据对象的形式来存储数据(使用键值对的方式)，key是唯一的，保持了取出 * 数据时不会重复。 * * data中用于存储数据，数据供el所指定的容器使用。 * * 这个存储数据的解构:我们暂时写成一个对象 * 在以后的开发中,当我们使用组件的时候,会把存储数据的解构写成一个函数 * */ data:{ name:'清华大学', language:'English' } }) </script> </body> </html> 复制代码 复制代码
1.5 el与data的两种写法
1.5.1 el的两种写法
el：绑定展示该Vue组件的容器。
(1) new Vue时候配置el属性。 (2) 先创建Vue实例，随后在通过vm.$mount('#root')指定el的值。 复制代码 复制代码
- el的第一种写法：创建Vue的时候配el属性
const v = new Vue({ // el:'#root', // 关联Vue与data数据的第一种形式 data:{ name:'清华大学', language:'English' } }) 复制代码 复制代码
- el的第二种写法：使用Vue实例对象来指定el属性
const v = new Vue({ data:{ name:'清华大学', language:'English' } }) console.log(v); v.$mount("#root"); // 第二种绑定el的方式比较灵活。比如：可以给他设置打印这个数据的时间 setTimeout(function (){ v.$mount("#root"); },2000); 复制代码 复制代码
1.5.2 data的两种写法
(1) 对象式 (2) 函数式 复制代码 复制代码
- data的第一种写法：对象式
data:{ name:'清华大学', language:'English' } 复制代码 复制代码
- data的第二种写法：函数式
// 原始形式 data:function(){ console.log(this); // Vue对象。 /*函数需要有返回值，并且返回值是一个对象*/ return{ name:'清华大学' } } // 使用 es6 中的语法。对象的简化写法 （去掉 :function） data(){ console.log(this); // Vue对象。 /*函数需要有返回值，并且返回值是一个对象*/ return{ name:'清华大学' } } /* 当我们学习到组件的时候，data只能使用函数式的形式 记住这里只能使用这种普通函数的方式，不能使用箭头函数 因为箭头函数的this指向的是 windows，我们需要让this指向当前元素 也就是让this指向Vue这个对象。 在对象中创建函数我们使用简化对象的写法。去掉 :function */ 复制代码 复制代码
1.5.3 一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是Vue实例了。就变成了windows
