Vue快速入门＞简介＞调试工具安装＞模板语法

最新推荐文章于 2024-02-02 15:45:29 发布

山河远任去来

最新推荐文章于 2024-02-02 15:45:29 发布

阅读量246

点赞数

文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/qq_48823919/article/details/118104151

版权

本文深入浅出地讲解了Vue.js的基本概念，包括其渐进式框架特性、开发模式（MVVM）以及初学者必备的Vue模板语法（插值表达式和指令）和vuedevtools工具的安装。通过实例演示，学习者将掌握如何在Vue项目中创建和使用数据绑定。

摘要由CSDN通过智能技术生成

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

一些概念性的东西，便于了解vue

一、Vue基础

1、概述

作者：尤雨溪
官网：https://cn.vuejs.org
在官网我们可以了解到Vue的介绍渐进式 和javascript框架
Vue.js是一套构建用户界面的渐进式框架。声明式渲染和组件系统是Vue的核心库所包含内容。
- 渐进式：循序渐进，不需要掌握全部的点，学多少用多少
- 框架：半成品的应用（比如说jQuery也是一个框架）
- 特点
  - 声明式渲染：（如同js基础一样，要使用变量则必须先声明变量，这种称之为声明式）
    - Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。
  - 组件化应用构建
    - 组件系统是Vue的另一个重要概念，因为它是一种抽象的允许我们使用小型、独立和通常可复用的“小积木”构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。

在这里插入图片描述

2、Vue的开发模式

M-V-VM
- M：（model）普通的javascript数据对象（其实就是一个对象，对象里放了数据）
- V：（view）前端展示页面（可以理解成html内容）
- VM：（ViewModel）用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例

MVVM 模式将 Presenter 改名为 ViewModel，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。这种模式下，页面输入改变数据，数据改变影响页面数据展示与渲染

vue使用MVVM响应式编程模型，避免直接操作（真实）DOM , 降低DOM操作的复杂性。（虚拟DOM）

二、Vue入门

1、Vue初体验

vuejs文件分为“.min.js”与“.js”文件，区别在于其中带“.min”这个是生产版本（压缩版），不带“.min”的是测试版本（测试时用的，不压缩的）：

生产版本
代码压缩（代码不具备可读性）
不支持vue调试工具

开发版本（vue.js）
代码不压缩（代码具备可读性）
支持vue的调试工具

例子:使用Vue输出hello world

步骤（仅限在vue的非工程化的环境下）

在视图部分定义渲染的容器，正常情况下内容相对固定，最常用的是：
<div id="app"></div>
通过script标签引入下载好的vue.js文件
产生vue实例（js部分，需要去new）
需要给实例传递配置选项（格式是一个对象）
如果可能，会用到一些数据，数据需要在对象中声明（声明式渲染）
如果需要展示数据的话，则需要使用特定的表达式（插值表达式，形式{{表达式}}，在视图部分写，哪里需要值就在哪里写）

代码片段如下：

<body>
    <!-- 1. 定义渲染的容器 -->
    <div id="app">
        {{msg}}
        <div>
            <!-- 只要不出id=app这个容器的界限，不管多少深度，都没问题 -->
            {{msg}}
        </div>
    </div>
    <!-- 2. 引入vue.js文件 -->
    <script src="./js/vue.js"></script>
    <script>
        // 3. 产生vue实例（V是大写的），传递配置选项
        new Vue({
            // el => element，指定vue负责渲染的容器的选择器
            el: "#app",
            // data指定vue实例需要的数据（数据的初始化）
            data: {
                msg: "hello world",
            },
        });
    </script>
</body>

Vue实例细节分析：

Vue参数对象属性
- el：元素挂载的位置，值可以是CSS选择器或DOM元素
- data：模型数据，值是一个对象（仅限于当前）
插值表达式{{msg}}
- 将数据填充到HTML标签中c

总结 :

上述提及的都是前端vue框架的模板语法，当然vue的模板不仅仅是上述这个2个，还有更多的，比如后面要学习的：
- 指令
- 事件
- 流程控制
- …

2、vue devtools工具的安装

通过chrome中的谷歌插件商店安装Vue Devtools工具，此工具帮助我们进行vue数据调试所用，一定要安装。Vue工具在谷歌商店的地址是：https://chrome.google.com/webstore?utm_source=chrome-ntp-icon

1.请注意：打开chrome应用商店，需要科学上网才能访问到，至于怎么科学上网就需要使用各种工具了。

2.当然了也可以使用下载好的扩展程序文件直接安装扩展
链接：https://pan.baidu.com/s/1b_dt01eXjzJkNOcjP4elpg
提取码：goae
这文件长这样 :vue extension_5_3_4_0.crx

然后可以参考我的设置
在谷歌浏览器中右上角点击设置>扩展程序>点击打包扩展程序>把文件拖进去就行了

如下面的窗口 (这里我已经装好了)

安装好之后打开发者工具(按f12)就可以使用了
注: 只有网页用了vue时才有vue调试工具!(在右下角进行调试)
补充：如果自己解决不了科学上网问题，但是又需要用Vue开发工具那该怎么办？

如果实在解决不了科学上网难题，Vue官方也提供了插件源码允许我们自己编译/构建Google Chrom插件，步骤如下（构建插件流程稍微麻烦一些<不要求掌握如何构建>，此处已为同学们构建好，可以直接使用）。

3、Vue模板语法

3.1.插值表达式

插值表达式: 是vue框架提供的一种在HTML模板中绑定数据的方式，使用{{变量名}}方式绑定Vue实例中data中的数据变量，会将绑定的数据实时的在视图中显示出来。
插值表达式的写法支持使用：

变量名
部分JavaScript表达式
- 注：{{ }}括起来的区域，就是一个就是js语法区域，在里面可以写部份的js语法。不能写 var a = 10;分支语句;循环语句
三元运算符
方法调用（方法必须需要先声明）
代码案例体会一下~

<!-- 渲染容器 -->
    <div id="app">
        <!-- 
            1. 在vue视图中插入数据的操作：插值表达式，形式如："{{}}";
            2. 插值表达式支持以下一些操作：
                a. 最基本的可变数据展示，如：{{var}}
                b. 支持部分的js表达式，例如不支持变量声明、循环、判断等
                        支持：算术运算、字符串拼接、三元运算等
                c. 支持函数调用（函数必须先得声明）
         -->
        <div>最直接的使用：{{str}}</div>
        <div>部分js表达式： <div>{{num1 + 33}}</div>
            <div>{{num1 + '33'}}</div>
            <div>{{flag ? '是' : '否'}}</div>
        </div>
        <div>函数调用：{{str.substr(0,5)}}</div>
    </div>
    <!-- 引入vue.js文件 -->
    <script src="./js/vue.js"></script>
    <script>
        // 产生vue实例
        new Vue({
            el: "#app",
            data: {
                age: 19,
                str: "广东昨日新增1例本土确诊病例",
                flag: true,
                num1: 22
            }
        })
    </script>

3.2、指令

什么是指令？

指令的本质就是标签中的vue自定义属性
指令格式以“v-”开始，例如：v-cloak，v-text、v-html等

指令的含义：在vue的html中，以v-开头的自定义属性就是指令。

详见官网对指令的说明：https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

问2：指令有什么作用？

正如插值表达式的效果，插值表达式只能用于标签之间的数据输出；在标签属性上，插值表达式无用武之地，但是有需要在属性中使用可变数据的情况，此时指令就能帮助我们解决这个问题。

语法糖：复杂操作的简化形式

当表达式的值改变时，将其产生的连带影响，响应式地作用于页面（DOM）。（简化操作）

小试牛刀：v-text指令与v-html指令【相当于innertHTML和innerText】

官网
v-text：https://cn.vuejs.org/v2/api/#v-text
v-html：https://cn.vuejs.org/v2/api/#v-html

友情提醒：v-html尽量少用甚至不用，因为可能引发XSS（跨站脚本攻击，XSS）攻击。

上代码更清晰

<!-- 
       指令：以“v-”开头的html标签自定义属性
       （在html中的属性，可能会有属性值，也可能没有属性值）
       以div标签为例，形如：<div v-text="" v-on=""...></div>
       指令不属于html的内容，是vue给我们提供的“语法糖”【简化操作】
       能够帮助我们在数据产生变化的时候连带产生一些影响。

       指令入门：有一些指令可能会没有属性值
       指令1：v-text
           在原生js中，该指令对应的是innerText，给标签绑上纯文本内容
       指令2：v-html
           在原生js中，该指令对应的是innerHTML，给标签绑上html内容
       
       注意点：
           1. 在给指令绑定可变数据的时候请注意，不要写“{{}}”
           2. 插值表达式默认效果等同于v-text，推荐用插值
           3. 其实，插值表达式与指令从某种程度上来讲，都是绑定可变数据的，但是区别在于：
               a. 插值表达式需要“{{}}”，而指令不用
               b. 插值表达式写在标签之间，而指令写在标签之上
           4. 如果某个标签元素既使用了插值也使用指令来绑定数据，那么指令的优先级会高于插值表达式【只针对数据绑定指令：v-text、v-html、v-pre】
           5. v-html一般只用于项目中后台富文本内容的展示，其它地方少用或者不用，容易被xss（跨站脚本攻击）攻击
    -->

    <div id="app">
       <!-- 插值表达式绑定数据，其相当于innerText，不会帮我们解析html内容 -->
       <div>{{str}}</div>
       <!-- 指令v-text绑定数据，相当于innerText，不解析html -->
       <div v-text="str"></div>
       <!-- 指令v-html绑定数据，相当于innerHtml，解析html的 -->
       <div v-html="str"></div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                str: "<a href='https://www.baidu.com' target='_blank'>去百度</a>"
            }
        })
    </script>