Vue基础知识总结：基础篇

Posted 2022-03-31 wx5b601151b3c99

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础知识总结：基础篇相关的知识，希望对你有一定的参考价值。

1.Vue.js

1.1Vue.js介绍

1.1.1 Vue.js是什么?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用.
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。

1.1.2 为什么使用Vue?

声明式渲染: 前后端分离是未来趋势
渐进式框架: 适用于各种业务需求
简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

1.2 Vue.js 基础

1.2.1 Vue.js的使用

在html页面使用script引入vue.js的库即可使用。

远程CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>

2. Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形

1.2.2 入门程序

创建一个vuetest目录, 并且在目录下创建 01_vue入门程序.html 文件.
代码编写步骤：
1、定义html，引入vue.js
2、定义app div，此区域作为vue的接管区域
3、定义Vue实例，接管app区域。
4、定义model（数据对象）
5、在app中展示数据

<!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>
    <script src="../js/vue.js" ></script>
</head>
<body>
     <!-- 2. 定义t1 div，此区域作为vue的接管区域 -->
    <div id="t1">
     <!--  双括号是VUE中的插值表达式,将表达式的值输出到HTML页面 -->
        <h2>message</h2>
        <span>school.id:school.name</span>
        <ul>
            <li>teacher[0].id:teacher[0].name</li>
             <li>teacher[1].id:teacher[1].name</li>
        </ul>
    </div>

</body>
  
<script>
    //3. 创建vue实例
  var VM = new Vue(
    var obj = new Vue(
         //定义 Vue实例挂载的元素节点,表示vue接管该div
        el: "#t1",
        //4.定义model模型数据对象
        data: 
            message: "hello",
            school: "id": 1,"name": "希望小学", ,
            teacher: ["id":1 , "name": "张三","id": 2 , "name":"王五" ]
        
    );
    
</script>
</html>

效果展示：

Vue基础知识总结(一)：基础篇_css

:差值表达式

插值表达式的作用：
通常用来获取Vue实例中定义的数据（data）
属性节点中不能够使用插值表达式

el:挂载点
el的作用？

定义Vue实例挂载的元素节点，表示Vue接管该区域

Vue的作用范围？

Vue会管理el选项命中的元素，及其内部元素

el选择挂载点时，是否可以使用其他选择器？

可以，但是建议使用ID选择器

是否可以设置其他的dom元素进行关联？

可以，但是建议选择DIV，不能使用HTML和Body标签

data：数据对象
Vue中用到的数据定义在data中
data中可以写复杂类型
渲染复杂类型数据的时候，遵守js语法

1.2.3 声明式渲染的好处

Vue中声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML

1.2.4 Vue常用指令

根据官网的介绍，指令是带有v-前缀的特殊属性。通过指令来操作DOM元素

1. v-text指令：

作用：获取data数据，设置标签的内容。
注意：默认写法会替换全部内容，使用插值表达式可以替换指定内容。

实例代码：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-text 获取data数据,设置标签内容,会覆盖之前的内容体-->
        <h2 v-text="msg">天天好心情</h2> 
        <!-- 使用插值表达式，不会覆盖 -->
        <h2>阿红:msg</h2>
        <!-- 拼接字符串 -->
        <h2 v-text="msg+1"></h2>
        <h2 v-text="msg+abc "></h2>
    </div>
</body>
<script>
    var obj = new Vue(
        el: "#app",
        data: 
            "msg": "学习vue的第一天！"
        
    );
</script>
</html>

效果展示： Vue基础知识总结(一)：基础篇_router_02

2. v-html指令

作用：设置元素的innerHTML（可以向元素中写入新的标签）
代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=Vue基础知识总结：进阶篇
 Vue 开发实战基础篇 # 6：双向绑定和单向数据流不冲突
 vue入门基础教程之经验总结篇（小白入门必备）|建议收藏
 vue基础教程总结篇，用最短的时间入门vue.js（持续更新...）
 vue基础教程总结篇，用最短的时间入门vue.js（持续更新...）
 vue基础教程总结篇，用最短的时间入门vue.js（持续更新...）