0926：vue基本概念介绍，入门边角料基础学习

小俊会编码

已于 2022-09-26 20:28:05 修改

阅读量138

点赞数

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

于 2022-09-26 09:10:54 首次发布

本文链接：https://blog.csdn.net/qq_60555957/article/details/127046977

版权

框架专栏收录该内容

29 篇文章 1 订阅

订阅专栏

一.概念：

Vue是一个框架，不是一个库
核心概念：组件化
设计模式：mvvm
- m:model 数据模型
- v:view 视图
- vm:view model 数据和视图的桥梁
可以双向传递：
- m-vm-v
- v-vm-m
v-model
- 提供双向绑定的能力，在input，textarea，select这三个元素上可以用v-model进行双向数据绑定
- v-once
  - 只渲染一次，你在页面上修改时不会改变值或者效果
- v-html
  - 会解析标签再显示出来
- v-text
  - 原样输出不解析，标签会原样显示出来
- v-if.v-else-if,v-else
  - v-show与v-if的区别，show是用样式隐藏的
上面我们给元素进行了数据绑定，那如果我们要给元素的属性绑定数据，那用什么办法？
- 用v-bind:
  - v-bind:属性名=“绑定的数据”
  - v-bind:属性名=“绑定的数据”
- v-model ：我们发现也绑定了属性，因为有限制绑定样式，如果不加单引号或者数组，那么绑定回去data中寻找
- 可以使用三目运算符

没时间整理了，拿同学的笔记

Vue初次体验

v-model提供双向绑定的能力，可以在input,textarea,select这三个元素上可以实现双向绑定

指令介绍

1、v-once:代表数据只被渲染一次

数据

2、v-html与v-text:用来指定引用的数据是html片段还是文本数据

3、v-if、v-else-if、v-else用来对引用的数据进行判断

4、v-show也是用来对引用的数据进行判断，但不同的地方在于一个是直接不显示，一个是隐藏掉

5、v-for遍历数组命令

带索引

6、v-bind给元素属性绑定数据，例如：v-bind:value,一般直接简写为:属性名称

绑定value

绑定样式

绑定定义在样式里面的数据的,加上''则去样式里面找，不加单引号则去data里面去寻找

绑定事件

通过@动作="事件名"绑定触发的事件

@动作全称呼：

绑定事件但是只调用一次：.once

绑定事件但是阻止标签的默认行为 .prevent

.stop嵌套元素中阻止父子(后代)间事件传递,通过.stop,相当于将所有先辈节点传递下来的事件给阻止掉

自定义组件

1、使用组件构造器、组件与构造分开

2、使用组件构造器、组件与构造合在一起

3、使用对象的形式

4、组件定义使用art-template模板

5、使用vue模板

6、局部定义模板

7、自定义组件里面也可以设置data跟methods

8、自定义组件里面写方法让自定义组件里面的数据自增

9、v-if v-else实现组件的切换

10、使用keep-alive来创建组件

使用路由的步骤

1、导入路由js文件

2、定义组件

3、定义路由规则

4、创建路由实例

5、将路由协议绑定到vue实例当中

6、将路由匹配的组件渲染到网页

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <!--1、导入路由-->
    <script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <a href="#/one">界面1</a>
    <a href="#/two">界面2</a>
    <!--将路由匹配的组件渲染到这里-->
    <router-view></router-view>
</div>
<template id="one">
    <div>你好,这是one页面</div>
</template>
<template id="two">
    <div>你好,这是two页面</div>
</template>
<script>
    /*2、定义组件*/
    const one = {
        template: "#one"
    }
    const two = {
        template: "#two"
    }
    /*定义路由规则*/
    const routes = [{path: '/one', component: one},
        {path: '/two', component: two},]
    /*3、创建路由的实例*/
    const router = new VueRouter({
        routes: routes//也可以缩写为routes,若定义的规则与routes名字相同的情况下
    })
    var vue = new Vue({
        el: "#app",
        //4
        router: router,/*将路由对象绑定到vue实例当中*/
        data: {}
    });
</script>
</body>
</html>

标签的使用

这个标签在页面当中其实也是相当于a便签