VUE---2.vue2使用入门

此白非彼白`

已于 2024-07-02 13:55:26 修改

阅读量669

点赞数

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

于 2022-08-22 16:44:33 首次发布

本文链接：https://blog.csdn.net/xi_xi_123456/article/details/126468546

版权

VUE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了Vue2的安装和基本使用方法，包括通过CDN引入Vue，检查Vue引入是否成功，安装Vue Devtools，以及创建Vue实例配置data和el属性进行数据绑定。详细讲解了如何在HTML中使用插值语法{{}}展示数据，并强调了{{}}内部应包含有效的JavaScript表达式。

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

1.有关vue2安装和初步使用：

安装vue或者引入vue=>cdn使用
通过cdn引入vue怎么知道是否引入成功

a.在控制台输入`Vue`，如果可见就说明引入成功

b.下载来引入script src

控制台提示安装检测工具Devtools=>在浏览器的扩展程序中添加

a.下载地址 https://devtools.vuejs.org/guide/installation.html

1. 点击浏览器右上三个点

2. 更多工具

3. 扩展程序

4. 开发者模式打开

5. 加载或者将文件夹拖入其中就行

6. 点击浏览器头部的扩展程序

去除环境提示在文档的script标签里加上`Vue.config.productionTip = false`
使用vue2

1. 通过new调用 Vue(options)

2. 配置options参数 {}

参数

1. data 数据 => 用于驱动页面 => 存储vue数据 => 显示页面的数据

示列: data:{name:"大哥"}

2. el 挂载DOM => 通知vue将数据与对应的标签进行关联

示列: el:".app" el:"#app"

3. 数据写好了, 放在哪里?

标签里面 body里面 html

插值符{{ }}

作用: 将vue中的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>
</head>
<body>
    
   

    <!-- vue模板 -->
    <div id="box">
        {{name}}--{{sex}}---{{age}}-
    </div>
    
    <script src="../vue.js"></script>
    <script>
        // 去除提示
        Vue.config.productionTip = false;

        // 实例化 => 使用vue
        new Vue({
            // 通知vue将数据与对应的标签进行关联
            el:"#box",
            // 数据 => 用于驱动页面 => 存储vue数据 => 显示页面的数据
            data:{
                name:"pxr",
                age:17,
                sex:"女"
            }
        })


    </script>
</body>
</html>

2.vue

1. 通过new调用 Vue(options)

2. 配置options参数 {}

参数

1. data 数据

2. el 挂载DOM

3. 插值符 {{}}

作用: 将vue中的data数据在页面显示 => {{data中的属性名}} => 自动查找

1. {{}} => 可以把它当成一个es6的字符串模板 => `${name}`

注释: 理解成这个是没有问题的

2. {{}} => {{js表达式}} => 里面的写的代码必须是一个js表达式

js表达式 => 里面的代码必须有结果(返回值)

变量

三目 0 ? 1 : 2

函数

运算符

语句不行的

if(){}esle{}

switch(){}

4. 数据驱动页面

1. data数据显示页面

2. data数据发生变化,页面随着也会发生变化

3. data数据在实例化之后,会被放入到_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>
</head>
<body>
    
    

    <!-- vue模板 -->
    <div id="box">
        {{name}}--{{sex}}---{{age + sex}}-

        <p>123123</p>
        <p> 1  </p>
    </div>   


    <div id="wrap">

    </div>
    
    <script src="../vue.js"></script>
    <script>
        // 去除提示
        Vue.config.productionTip = false;

        // 实例化对象   实例化
        let vm =        new Vue({
            el:"#box",
            data:{
                name:"路遥",
                age:18,
                sex:"男"
            }
        })


       
    </script>
</body>
</html>

补充：

vm身上的内容加上$表示程序猿使用的,不存在$那是vue底层在使用

此白非彼白`

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE---2.vue2使用入门

a.下载地址 https://devtools.vuejs.org/guide/installation.html。1. data 数据 => 用于驱动页面 => 存储vue数据 => 显示页面的数据。2. el 挂载DOM => 通知vue将数据与对应的标签进行关联。示列: el:".app" el:"#app"示列: data:{name:"大哥"}{{data中的属性名}}2. 配置options参数 {}4. 开发者模式打开。作用: 将vue中的data数据在页面显示。
复制链接

扫一扫