Vue很难？看完这篇文章你就懂了

拉跨丽
297 阅读4分钟

- ==学习Vue最好的方式：查看官网文档==

- cn.vuejs.org/

1.1-Vue介绍

Vue介绍描述
1.Vue是一个JavaScript框架框架：别人写好的js文件
2.作用 ： 构建用户页面将数据渲染到页面
3.特点：渐进式组件式开发

  • 1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

    • Vue是一个JavaScript框架

      • Vue是一个用于构建用户页面的框架

        • Vue是一个用于构建用户界面得渐进式框架

  • 2.渐进式框架介绍

    • a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的

      • 类似于Nodejs,拆分成很多个小模块

    • b. 在项目中我们用到什么，就导入什么

      • 这样可以保证我们用到的最少

    • c. 说人话：Vue相当于是一个五星级自助餐，我们想要用什么就拿什么，这样可以最大限度避免浪费资源

==知识点验收==

  • (1)Vue是什么？

    • js框架

  • (2)Vue干什么用的?

    • 构建用户页面(数据渲染到页面)

  • (3)有什么特点？

    • 渐进式

1.2-Vue两个重要特点

1-数据驱动

  • 1.数据驱动 ：Vue会根据数据，自动渲染页面

    • 无需DOM操作，修改了对象中的数据，页面会自动渲染

    • Vue的底层使用了一种叫做虚拟DOM的技术，能够实时监听js对象的属性变化从而自动更新页面DOM元素

原始的前端开发Vue.js的前端开发
1.使用HTML+CSS搭建页面1.使用HTML+CSS搭建页面
2.使用异步请求技术向后台请求数据2.使用异步请求技术向后台请求数据
3.使用原生的js或者jQuery操作DOM，渲染数据3.Vue自动渲染数据

2-组件化开发(盒子复用)

  • 2.组件化开发 ： 网页中的某一个部分,可能需要在多个地方被重复使用，就可以定义成一个组件

    • 组件化开发好处

      • a. 一次定义，多处使用

      • b. 便于开发维护

        • 类似于我们之前的函数封装解决代码冗余问题。Vue.js可以把网页的某一个部分(HTML+CSS+JS)封装成一个组件

==知识点验收==

  • 请说出vue框架两个重要特点？

    • 数据驱动 ： 没有dom操作，自动渲染数据
    • 组件开发 ： 元素复用

1.3-Vue基本使用

  • 官方文档传送门：Vue官方文档

  • 第三方框架通用的使用步骤

    • 1.导包
    • 2.写HTML结构
    • 3.js中初始化配置

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>
​
<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        {{ message }}
        <br>
        {{ name }}
        <br>
        {{ age }}
        <br>
        {{ sex }}
    </div>
​
    <script>
        /* 3.初始化配置 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            el: '#app',
            //data: 要渲染的数据
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
            data: {
                message: 'Hello Vue!',
                name:'坤哥',
                age:32,
                sex:'男'
            }
        })
    </script>
</body>
​
</html>

==知识点验收==

  • 问题1：请说出使用vue框架的三个流程
  • 问题2：如果没有设置vue挂载点el，会导致什么后果？
  • 问题3：如果没有设置vue的数据data,会导致什么后果？

1.4-Vue的挂载点介绍

  • el挂载点官方文档传送门：cn.vuejs.org/v2/api/#el

  • 1.挂载点el作用 ： 告诉vue实例，你要将data中的数据渲染到哪一个视图

  • 2.注意点

    • (1)挂载点可以使用 id选择器（vue推荐使用） 类选择器 标签选择器

      • 开发中基本上都是id选择器，保证HTML标签唯一性
      • 如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中

    • (2)如果选择器选中了多个元素，只会选择第一个元素

    • (3)挂载点不能设置为html和body标签 （程序报错）

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>
​
<body>
    <!-- 2.HTML结构 -->
    <div id="hm">
        <div id="app">
            {{ message }}
        </div>
​
        <hr>
        <div id="box" class="container">
            {{ message }}
        </div>
​
        <hr>
        <div class="container">
            {{ message }}
        </div>
    </div>
​
    <script>
        /* 3.初始化配置 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            /* 
            (1)挂载点可以使用  id选择器（vue推荐使用）  类选择器  标签选择器
            (2)如果选择器选中了多个元素，只会选择第一个元素
            (3)挂载点不能设置为html和body标签 （程序报错）
            */
            el: '#hm',
            //data: 要渲染的数据
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
​
</html>

知识点验收

问题1：vue的挂载点el作用是什么？

设置挂载点： 告诉vue，数据渲染到哪个元素上

问题2：vue的挂载点使用什么选择器最好？ 为什么？

id选择器 ： 具有唯一性。 类选择器和标签选择器如果选中多个元素，vue只会渲染第一个

问题3：vue的挂载点el不能给什么标签设置？

body,html

1.5-Vue的插值表达式介绍

  • 插值表达式(模板语法)官网文档传送门：cn.vuejs.org/v2/guide/sy…

    • 插值表达式 有点类似于以前学习的 art-template模板语法，但是不同的框架有自己不同的语法规则

  • 1.Vue会自动将data对象中的数据渲染到视图

  • 2.在视图中,使用插值表达式来告诉vue，你想把数据渲染在什么位置

  • 3.关于插值表达式一些注意点

    • (1) {{ }} : 插值表达式，也叫胡子语法
    • (2) 插值表达式作用：将数据渲染到页面
    • (3) 支持二元运算 {{ age + 1 }}
    • (4) 支持三元运算 {{ age>30?'老男人':'小鲜肉' }}
    • (5) 支持数组与对象的取值语法
    • (6) 不支持分支语法与循环语法
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导包 -->
    <script src="./vue.js"></script>
</head>
​
<body>
    <!-- 2.HTML结构 -->
    <div id="app">
        名字： {{ name }}   <br>
        年龄： {{ age + 1 }} <br>
        介绍： {{ age>30?'大叔':'欧巴' }}  <br>
        女朋友：{{ girlFried[1] }} <br>
        女儿： {{ daughter.name }} <br>
​
    </div>
​
    <script>
        /* 3.初始化配置 */
        /* 
        (1)Vue是导入vue.js之后得到的一个全局构造函数
        (2)调用Vue构造函数 创建一个vue实例对象
        */
        let app = new Vue({
            //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
            /* 
            (1)挂载点可以使用  id选择器（vue推荐使用）  类选择器  标签选择器
            (2)如果选择器选中了多个元素，只会选择第一个元素
            (3)挂载点不能设置为html和body标签 （程序报错）
            */
            el: '#app',
            //data: 要渲染的数据 
            /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作)
            (1)  {{ }} : 插值表达式，也叫胡子语法
            (2)  插值表达式作用：将数据渲染到页面
            (3)  支持二元运算   {{ age + 1 }}
            (4)  支持三元运算   {{ age>30?'老男人':'小鲜肉' }}
            (5)  支持数组与对象的取值语法
            (6)  不支持分支语法与循环语法
            */
            data: {
                message: 'Hello Vue!',
                name: '坤哥',
                age: 32,
                sex: '男',
                girlFried:['代码','学生','咖啡'],
                daughter:{
                    name:'小布丁',
                    age:1
                }
            }
        })
        
    </script>
</body>
​
</html>

\

avatar
文章
阅读
粉丝