Vue基础知识以及快速入门&&Element基本使用

最新推荐文章于 2023-02-08 09:37:27 发布

Lp可乐加冰

最新推荐文章于 2023-02-08 09:37:27 发布

阅读量272

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42478562/article/details/107027347

版权

Vue

Vue是一套构建用户界面的渐进式前端框架
只关注视图层，并且非常容易学习，还可以很方便的与其他库或已有项目整合。
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。

特点：易用、灵活、性能佳

快速入门

Vue核心对象：每一个Vue程序都是从Vue核心对象开始的

let vm=new Vue({

选项列表；

})

1.导包

下载和引入vue.js文件

2.编写入门程序。

视图：负责页面渲染主要由HTML+CSS构成

脚本：负责业务数据模型（model）以及数据的处理逻辑

Vue参数

el：用于接收获取到页面中的元素。（根据常用选择器获取）
data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象

指令介绍

指令：是带有v-前缀的特殊属性，不同指令具有不同含义。例如v-html,v-if

使用指令时，通常编写在标签的属性上，值可以使用JS的表达式

指令	作用
v-html	把文本解析为HTML代码
v-bind	为HTML标签绑定属性值
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的时display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性
v-on	为HTML标签绑定事件
v-model	在表单元素上创建双向数据绑定

文本插值

v-html:把文本解析为HTML代码。

<body>
    <!-- 视图 -->
    <div id="div">
        <div>{{msg}}</div>
        <div v-html="msg"></div>
    </div>
    
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>hello Vue</b>"
        }
    });
</script>

绑定属性

<body>
    <!-- 视图 -->
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls"></div>
    </div>
    
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"www.baidu.com",
            cls:"my"
        }
    });
</script>

条件渲染

<body>
    <div id="div">
        <div v-if="num%3==0">div1</div>
        <div v-else-if="num%3==1">div2</div>
        <div v-else="num%3==2">div3</div>
        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:true
        }
    })
</script>

列表渲染

v-for:列表渲染，遍历容器的元素或者对象的属性

<li v-for="name in names">
                {{name}}
</li>

v- for 在哪个标签下，循环的就是哪个标签。循环获取的值是names

事件绑定

<body>
    <!-- 视图 -->
    <div id="div">
        <div>{{name}}</div>
        
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>
        <button @click="change()">简写改变</button>
    </div>
    
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"黑马程序员"
        },
        methods:{
            change(){
                this.name="传智播客"
            }
        }
    });
</script>

表单绑定

v-model:在表单元素上创建双向数据绑定。

双向数据绑定：更新data数据，页面中的数据也会更新，更新页面数据，data数据也会更新，是指内存中更新，不是直接修改了代码

<body>
    <!-- 视图 -->
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username">
            年龄：<input type="number" name="age" v-model="age">
        </form>
         <button @click="getUsername()">test</button>
    </div>
   
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:24
        },
        methods:{
            getUsername(){
                console.log(this.username+this.age)
            }
        }
    });
</script>

Element 基本使用

element:网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库

使用Element前提必须要有Vue

组件：组成网页的部件，例如超链接、按钮、图片、表格等等

Element快速入门

1.下载Element核心库

2.引入Element样式文件

3.引入Vue核心js文件

4.引入Element核心js文件

<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>

5.编写按钮标签

6.通过Vue核心对象加载元素

在element官网中挑选我们想使用的组件

在这里插入图片描述

点击显示代码

在这里插入图片描述

直接复制粘贴想用的使用即可

  <div id="div">
        <el-button type="success" plain disabled>成功按钮</el-button>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    })
</script>

Lp可乐加冰

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识以及快速入门&&Element基本使用

VueVue是一套构建用户界面的渐进式前端框架只关注视图层，并且非常容易学习，还可以很方便的与其他库或已有项目整合。通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。特点：易用、灵活、性能佳快速入门Vue核心对象：每一个Vue程序都是从Vue核心对象开始的let vm=new Vue({ 选项列表；})1.导包下载和引入vue.js文件2.编写入门程序。视图：负责页面渲染主要由HTML+CSS构成脚本：负责业务数据模型（model）以及数据的处理逻辑
复制链接

扫一扫