HTML-Vue入门小知识

杨不旧

已于 2022-02-19 16:26:15 修改

阅读量544

点赞数

分类专栏： vue 文章标签： vue.js html 前端

于 2022-02-19 15:14:51 首次发布

本文链接：https://blog.csdn.net/qq_45152044/article/details/123018440

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前言

建议有html、css、js一定的基础后再来学习vue框架，否则不太容易上手入门，对它的原理不能直接了解。本文章是先把vue当作一个库来使用学习，并非直接当成框架来学习。

为什么要学习框架？

为什么要学习框架？
1、以前的传统开发中，不能保证每一个人写的代码性能最高，或者说节约性能。
2、因为每一个人思路不同，代码的写法是不一样的，会出现一个项目/一个功能多个人来写，不好理解别人写的。
3、以前开发项目是面向过程，，对程序员的精力分散较多
4、因为以上原因引入了框架的概念

为什么几个框架中要学vue？
1、使用起来非常简便，要求不高，且上手容易。
2、拥有非常好的生态系统
3、可以是一个库，也可以是一个框架（你可以把它引入到一个页面中，使用里面的某一些功能。也可以直接用它创建一个项目）
4、vue.js文件非常小，一定程度上提升了加载速度
5、超快虚拟DOM
为什么要有虚拟DOM概念？
当需要操作dom，不是直接操作真实的dom，而是操作虚拟dom，当发现用户在一个时间段不操作时候，统一把虚拟dom渲染成真实dom，可以避免频繁修改DOM结构，在一定程度上可以提高性能。
6、是一个mvvm的框架(更多框架介绍，点击跳转)
7、最大限度的减少用户的无效代码，使用户专注于数据

引入了框架的概念就要区分框架和库的区别：
jq我们称为方法库，bootstrap我们称为样式库。

框架
概念：

1、解决整个项目的问题，整个项目都应该按照它约束的方式去写代码，极大约束程序员写代码的规范。
2、简化操作。

好处：

1、约束程序员

2、控制项目优化的下限

3、规范程序员开发的写法

4、现阶段大多数项目都是以项目为核心的

5、利于团队合作

6、常见的问题都有解决思路/方法

库
概念：
1、一堆方法的集合，解决问题的方法。
2、灵活度更高，一会写jq一会写源生js

好处： 程序员可以灵活使用、充分学习后可以自己DIY，创造性强。

简介

以下所有知识点讲解都源自vue官方文档

vue官网：点击跳转

如何下载vue或者通过cdn引入html里面来

下载vue：vue有开发版本、生产版本和最新版本，对开发者来说，最好用开发版本，方便开发时候可以报错，并且可以根据错误信息去修改自己的代码。

补充：
1、什么是生产环境？

项目上线运行的环境（项目是运行在服务器上的）

2、什么是开发环境？

程序员开发项目时候的环境，正如我上面所说的。

引入实例：

注意：本文章是先把vue当作一个库来使用学习，并非直接当成框架来学习。

<script src="./vue.js"></script>    <!-- 需要下载到本地再引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--利用cdn直接引入 -->

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>Document</title>

</head>
<body>
    <div id="app">
        <span>我在#app里面{{a}}</span>
    </div>
    <span>我不在#app里面{{a}}</span>
</body>
</html>
<!-- 利用cdn引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app', 
        /*el:'#app'，容器选择器，只能匹配到第一个满足条件的，相当于document.querySeleceor()，
          可以是#app，对应id名为app，也可以是.app，对象的class名为app，也可以是标签名
          即el:'div'
          注意事项：容器选择器不能选择到body或者html标签，
          且这个new Vue出来的只对容器选择器里的所有内容起作用
        */
        data:{
        	//要用的数据都放在这里
            a:'我是一个span标签！'
        }
    })
</script>

补充

上文代码中的{{}}在这里进行简单介绍，
{{}}可以叫模板引擎，官网的叫法是：“Mustache”语法。
在这里插入图片描述
它有以下几种用法：
1、{{展示数据}}，就像上面代码块的例子。
2、{{简单计算}}
3、{{三元（木）运算}}
4、{{简单的js语句，一句话完成}}
5、{{函数调用}}

看以下例子：

<!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>Document</title>
</head>
<body>
    <div id="app" class=".app">
        <!-- {{}}放数据  模板渲染
             1、直接放数据
             2、计算{{b+c*2}}
             3、简单的逻辑运算（三元（木）运算符）{{c>1?'大于1':'小于1'}}
             4、简单的js处理如{{a.split(' ').join('-')}}
             5、函数的调用{{fn()}}
             6、不能多行写，如声明之类的
        -->
        <h1>模板渲染</h1>
        <h1>{{a}}</h1>
        <h1>计算：{{b+c*2}}</h1>
        <h1>b比较（简单的逻辑运算）：{{b==1?'b=1':'b!=1'}}</h1>
        <h1>数组的处理：{{a.split(' ').join('-')}}</h1>
        <h1>函数调用(打印)：{{fn()}}</h1>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            //放的是所有vue要操作的数据
            a:"Hello World!",
            b:1,
            c:2
        },
        methods:{
            fn:function(){
                return  '返回结果'
            }
        }
    })

    //不是vue里的，不被vue管理，所以要放在new Vue({})里面
    function fn() {
        return '返回的结果'
    }
</script>