Vue从入门到精通

Vue基础

  • 1. Vue简介
    • 1.1 Vue是什么?
    • 1.2 Vue的作者以及迭代版本
    • 1.3 Vue的特点
  • 2. 搭建Vue开发环境
    • 2.1 安装Vue的方式
      • 2.1.1 第一种安装方式:直接使用script标签引入
      • 2.1.2 第二种安装方式:使用NPM
    • 2.2 Vue小案例
    • 2.3 总结

1. Vue简介

1.1 Vue是什么?

Vue是一套用于构建用户界面的渐进式JavaScript框架
  • 构建用户界面:将数据变成用户可以看到的界面
  • 渐进式:是指Vue可以自底向上逐层的应用
    • 对于简单应用,只需要轻量小巧的核心库
    • 对于复杂应用,可以引入各种Vue插件

1.2 Vue的作者以及迭代版本

Vue从入门到精通_第1张图片

1.3 Vue的特点

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

Vue将相近的部分封装成一个模块,一个模块中包含html,css,js代码,模块可以在任何地方复用,若修改模块中的内容不会影响其他模块

Vue从入门到精通_第2张图片

  1. 声明式编码,让编码人员无需直接操作DOM,提高开发效率
    Vue从入门到精通_第3张图片
  2. 使用虚拟DOM + Diff算法,尽可能复用DOM节点

原生js实现数据更新时会覆盖原来的数据,效率较低

Vue从入门到精通_第4张图片

Vue会将数据先变成虚拟DOM,这样如果数据有变换时,使用Diff算法进行比较,如果新的虚拟DOM与旧的虚拟DOM中有相同的DOM,那么直接复用,能够极大的提升效率

Vue从入门到精通_第5张图片

2. 搭建Vue开发环境

2.1 安装Vue的方式

2.1.1 第一种安装方式:直接使用script标签引入

  1. 使用本地文件
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <script src="./vue.js">script>

    
     <script>
         Vue.config.productionTip = false;
     script>
head>
<body>
    
body>
html>
  1. 使用CDN

xxxxxxx

2.1.2 第二种安装方式:使用NPM

XXXX

2.2 Vue小案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./vue.js">script>

head>
<body>
    
    <div id="root">
        <h1>{{ name }}h1>
    div>
     <script>
         Vue.config.productionTip = false;   // 阻止浏览器生成生产提示

        /*  
            创建Vue实例,new的时候只传入一个参数,
            并且这个参数是一个对象,此对象称为配置对象
            配置对象中的key是固定的,value值也是固定的数据类型
        
        */
         const x = new Vue({
            // el是element的简称,它用于指定当前的Vue实例为哪个容器服务,值通常为css选择器字符串
            // 也可用为 el:document.getelementById('root')
            el:"#root",   
            // data中用于存储数据,数据供el所指定的容器使用,其他容器不能使用
            data:{
                name:'玉米'
            }
         })
     script>
body>
html>

2.3 总结

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(){}

你可能感兴趣的:(#,Vue,vue.js,前端)