vue概念

真的想不出名儿

已于 2023-08-12 16:51:41 修改

阅读量58

点赞数

分类专栏： vue基础语法文章标签： vue.js

于 2023-05-24 16:48:08 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/130849929

版权

vue基础语法专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一、什么是vue

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

vue2官网：Vue.js

什么是构建用户界面

基于数据渲染出用户可以看到的界面

什么是渐进式

渐进式就是循序渐进，不一定非得把vue中得所有API都学完才能开发vue，可以学一点开发一点

vue的两种开发方式：

1.vue核心包开发

场景：局部模块改造

2.vue核心包&vue插件&工程化【重点】

场景：整站开发

二、什么是框架

框架:就是一套完整的解决方案

库：类似工具箱，是一堆方法的集合，比如axios,lodash,echarts等

框架:是一套完整的解决方案,实现了大部分功能，我们只需要按照一定的规则去编码即可

框架的特点: 有一套必须让开发者遵守的规则或者约束学习框架就是学习这些规则

传统开发模式下vue基本模板

使用工具：Vscode

新建html文件——> ! + Enter 搭建框架

<!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>
    
</body>
</html>

1. 引入vue.js

在 head 标签中加入下列代码，引入vue.js（以vue2为例）。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 建立容器

在 body 标签中加入以下代码，之后的代码必须写在该标签下。

<div id="app"></div>

3. 创建vue实例

在 body 标签下新建一个 script 标签（里面写 js 代码）。

  var vm = new Vue({
        el: '#app', // 提供一个在页面上已存在的DOM元素作为 vue 实例的挂载目标
        data: {
            // 实例的数据对象
            msg: 'success',
            num: 1,
            string: 'abc',
            arr: [1, 2, 3, 4, 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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app"></div>
</body>

<script>
    var vm = new Vue({
        el: '#app', // 提供一个在页面上已存在的DOM元素作为 vue 实例的挂载目标
        data: { // 实例的数据对象
            msg: 'success',
            num: 1,
            string: 'abc',
            arr: [1, 2, 3, 4, 5]
        }
    })
    console.log(vm)
    console.log(vm.$data)
    console.log(vm.$options)
</script>

</html>

关于 vue 中 $符号的使用

$ 符号是内置的实例方法属性，以便与用户定义的属性区分开来。避免我们自己声明或者添加自定义属性导致覆盖。

$options简单了解一下，

vue实例属性 $options 是一个对象,可以调用 vue 的各个组件下的方法和数据

即 new Vue({})大括号内的东西，统称为 options

-----------------------------------------------------------分割线------------------------------------------------------------

插值表达式

目的：在DOM标签中，直接插入内容

又叫：声明式渲染/文本插值

语法：{{表达式}}

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 插值表达式不能写循环语句，不能写条件语句 -->
        <p>{{num}}</p>
        <p>{{num + 1}}</p>
        <p>{{24}}</p>
        <p>{{flag}}</p>
        <p>{{falg?'成功':'失败'}}</p>
        <p>{{msg}}</p>
        <p>{{msg + 'vue牛牛牛'}}</p>
        <p>{{'hello world!'}}</p>
        <p>{{arr}}</p>
        <p>{{arr.reverse()}}</p>
        <p>{{obj}}</p>
        <p>{{obj.name}}</p>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'success',
            num: 1,
            arr: [1, 2, 3, 4, 5],
            falg: false,
            obj: {
                name: 'abc',
                age: 22,
            }
        }
    })
    console.log(vm)
    console.log(vm.$data)
    console.log(vm.$options)
</script>

</html>