Vue笔记

  • Vue笔记已关闭评论
  • 28 次浏览
  • A+
所属分类:Web前端
摘要

​ 英文官网​ 中文官网2.声明式编码,让编码人员无需之间操作DOM,提高开发效率


一、 Vue介绍

1、Vue 简介

(1)官网: 

英文官网

中文官网

2、介绍与描述

  • Vue 是一套用来动态构建用户界面的渐进式JavaScript框架
    • 构建用户界面:把数据通过某种办法变成用户界面
    • 渐进式: Vue 可以自底向上逐层的应用,简单应用只需要一个轻量小巧的核心库,复杂应用可以引入各式各样的 Vue 插件
    • 作者:尤雨溪

Vue笔记

3、特点

  1. 采用组件化模式,提高代码复用率、且让代码更好维护

Vue笔记

2.声明式编码,让编码人员无需之间操作DOM,提高开发效率

Vue笔记

3.使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点

Vue笔记

Vue笔记

4、与其他 JS 框架的关联

  • 借鉴 angular 的 模板 和 数据绑定 技术
  • 借鉴 react 的 组件化 和 虚拟DOM 技术

5、 Vue 周边库

  • vue-cli:vue 脚手架
  • vue-resource(axios):ajax 请求
  • vue-router:路由
  • vuex:状态管理(它是 vue 的插件但是没有用 vue-xxx 的命名规则)
  • vue-lazyload:图片懒加载
  • vue-scroller:页面滑动相关
  • mint-ui:基于 vue 的 UI 组件库(移动端)
  • element-ui:基于 vue 的 UI 组件库(PC 端)

6、初识 Vue

(1)前置工作

  1. 给浏览器安装[Vue Devtools](安装 — Vue.js (vuejs.org))
  2. 标签引入 Vue
  3. (可选)阻止 vue 在启动时生成生产提示Vue.config.productionTip = false;
  4. favicon 需要将页签图标放在项目根路径,重新打开就有了(shfit+F5 强制刷新)

(2)初识Vue:

  1. 想让 Vue 工作,就必须创建一个 Vue实例 ,且要传入一个配置对象
  2. root 容器里的代码依然符合 html规范 ,只不过混入了一些特殊的 Vue语法
  3. root 容器里的代码被称为 Vue模板
  4. Vue 实例与容器是一一对应的
  5. 真实开发中只有一个 Vue实例 ,并且会配合着组件一起使用
  6. {{xxx}} 中的 xxx 要写 js 表达式,且 xxx 可以自动读取到 data 中的所有属性

注意区分:js 表达式 和 js代码(语句)

​ a. 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方

​ ①a

​ ② a+b

​ ③demo(1)

​ ④x === y ? 'a' : 'b'

​ b. js代码(语句)

​ ①if(){}

​ ② for(){}

​ 7.. 一旦 data 中的数据发生变化,那么模板中用到该数据的地方也会自动更新

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>初始Vue</title>     <!-- 引入Vue.js -->     <script type="text/javascript" src="../js/vue.js"></script> </head> <body>   <!-- 初识Vue:     1. 想让 Vue 工作,就必须创建一个 Vue实例 ,且要传入一个配置对象     2. root 容器里的代码依然符合 html规范 ,只不过混入了一些特殊的 Vue语法      3. root 容器里的代码被称为 Vue模板 -->       <!-- 准备好一个容器 -->     <div id="root">       <h1>Hello,{{name.toUpperCase()}},{{address}}}</h1>     </div>       <script type="text/javascript">       Vue.config.productionTip = false; // 阻止启动vue在启动时生成生产提示        // 创建一个Vue实例        new Vue({         el:'#root' ,//el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串         data:{//data用于指储存数据,数据供el所指定的容器使用,值我们暂时先写成一个对象           name:'DFshmily',           address:'China'         }         })               </script> </body> </html> 

二、模板语法与数据绑定

1、模板语法

Vue 模板语法包括两大类

  1. 插值语法

    功能:用于解析标签体内容 写法: {{xxx}} ,xxx 是 js 表达式,可以直接读取到 data 中的所有区域

  2. 指令语法

    功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)

    举例: 或简写为 ,xxx 同样要写 js 表达式,可以直接读取到 data 中的所有属性

    备注: Vue 中有很多的指令,且形式都是 v-xxx ,此处只是拿 v-bind 举例