初识VUE

最新推荐文章于 2024-07-18 17:37:56 发布

璞砆

最新推荐文章于 2024-07-18 17:37:56 发布

阅读量208

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42136250/article/details/88960267

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、什么是vue

vue是一个渐进式的前端js框架。所谓渐进式框架，其实就是把框架分层。最核心的部分是视图层渲染，然后往外是组件机制，在这个基础上再加入路由机制、状态管理，最外层是构建工具，如图所示：
在这里插入图片描述
所谓分层，就是既可以只用最核心的视图层渲染功能来快速开发一些需求，也可以使用一整套全家桶来开发大型应用。

二、hello vue

1 引入js文件
注意使用双标签引入，注意路径的问题（根据html文件所处位置使用绝对或相对路径）
2 准备vue控制台，即创建一个div
3 在script代码中，创建vue对象，对象内有三个属性：el（根据class、id、div获取控制台对象）、data（控制台中的数据的来源）、methods（vue的方法）
4 vue表达式
① 可以进行加减乘除操作，如果有字符串，加法会变为字符串连接，其他运算正常运行
② 可以进行三母运算
③ 可以调用字符串的所有方法
④ 可以进行对象的操作，获取属性，也可以调用对象的方法

三、vue的常用指令

1、v-text
2、v-html
两者都是对vue中显示数据的指令，区别在于，v-text会覆盖原数据,不会解析标签；v-html也会覆盖原数据，但是会解析标签
3、v-for 通过循环获取值
v in hobby -->v表示hobby中的每一个值
(v,i) in hobby --> v 表示hobby中的每一个值,i表示索引值
(v,k,i) in hobby --> v表示hobby中的每一个值，k表示属性值，i表示下标值
4、v-show 可以显示获取隐藏内容，相当于html语法中的style=“display：none”
5、v-if 条件不满足时，元素不会出现，区别与v-show，v-show只是隐藏，数据还是存在，注意v-else后可以不用再写判断条件
6、v-bind 在标签内绑定数据(idea快键：alt+回车，快速引入表头)
三种写法（推荐使用第二中或第三种）：
7、v-model 实现双向绑定，只能使用在表单元素内（input、select、textarea）
8、v-on 事件绑定，有三种写法：
标准形式：v-on:事件类型=“方法名()”
简写形式:@ 事件类型=“方法名()”

四、vue的组件

1、全局组件：被Vue挂载到的作用域都可以使用

在这里插入图片描述

第一个参数：组件名第二个:模块

注意点：
① 一定要先定义组件,再进行vue的挂载
② 模板中必需有一个根标签
③ 取名的问题
如果使用驼峰命名法 myTag ->

全局组件的模板（三种写法）
方案一：直接写在template属性内
方案二：写在template标签内，然后在组件内通过id获取模板，引入vue的组件内
在这里插入图片描述

方案三：将模板写入script标签内，注意必须添加type="/text/yemplate"属性，然后通过id获取模板，并引入vue的组件内
在这里插入图片描述

2、局部组件

在这里插入图片描述

注意：
局部组件的方法的返回值和自定义组件的方法的返回值，可以在模板中进行展示，注意必须写在模板的根标签内
局部组件的方法的返回值要求data必须是一个函数

五、vue的路由

vue的路由是类似于ajax的局部刷新，vue只有一个页面，相比性能要优于ifream，因为ifream会加载很多js代码，每一个ifream都是一个独立的页面，每个页面都需要重新引入共同的js页面，所以性能较低。

hell 路由
① 引入路由的js文件
② 准备路由链接 --> router-link 其实就是一个a标签
③ 在script挂载vue控制台
④ 定义一个路由
⑤ 准备路由出口，用于展示数据

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <!--① 引入路由的js文件-->
    <script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
    <div id="a">
        <p>
            <!--② 从官网拷贝，路由的hello文件
                    router-link: 路由标签（实则为a标签，起一个连接的作用）
                    to: 连接路径
             -->
            <router-link to="/poetry1">辛弃疾</router-link>
            <router-link to="/poetry2">李清照</router-link>
            <router-link to="/poetry3">李白</router-link>
        </p>
        <!-- ⑥ 定义路由出口，路由匹配的组件将渲染在出口进行展示-->
        <router-view></router-view>
    </div>

    <script type="text/javascript">
        //④ 定义路由对象
        var router = new VueRouter({
            /*⑤ 在路由对象内部写路由的数组，每一个路由对象都映射一个组件   可以直接抽取进行引用，但此处直接写在对象内部*/
            routes:[
                {
                    path: '/poetry1',
                    component: {
                        template:"<h2>会挽雕弓如满月，西北望，射天狼</h2>"
                    }
                },
                {
                    path: '/poetry2',
                    component: {
                        template:"<h2>争渡争渡惊起一滩鸥鹭</h2>"
                    }
                }, {
                    path: '/poetry3',
                    component: {
                        template:"<h2>对酒当歌，人生几何</h2>"
                    }
                }
            ]
        })

        /*③ 绑定vue的控制台*/
        new Vue({
            el:"#a",
            router:router
        })
    </script>
</body>

使用路由的展示效果如下图：
在这里插入图片描述

璞砆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识VUE

一、什么是vuevue是一个渐进式的前端js框架。所谓渐进式框架，其实就是把框架分层。最核心的部分是视图层渲染，然后往外是组件机制，在这个基础上再加入路由机制、状态管理，最外层是构建工具，如图所示：所谓分层，就是既可以只用最核心的视图层渲染功能来快速开发一些需求，也可以使用一整套全家桶来开发大型应用。二、hello vue1 引入js文件注意使用双标签引入，注意路径的问题（根据htm...
复制链接

扫一扫

专栏目录