VUE基础+ElementUI快速入门

最新推荐文章于 2024-05-14 21:37:06 发布

gongwenxi

最新推荐文章于 2024-05-14 21:37:06 发布

阅读量951

点赞数

本文链接：https://blog.csdn.net/gongwenxi/article/details/107964561

版权

VUE快速入门

Vue 介绍

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

易用：在有 HTML CSS JavaScript 的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

Vue 快速入门使用

下载和引入 vue.js 文件。
编写入门程序。
视图：负责页面渲染，主要由 HTML+CSS 构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。

入门详解

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

let vm = new Vue({
	选项列表;
});

选项列表

el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。

data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。

methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
数据绑定

在视图部分获取脚本部分的数据。

入门案例

<body>
    <!-- 视图部分 -->
    <div id="myDiv">
        {
    {msg}}
    </div>
    
</body>
<script src="vuejs/vue.js"></script>
<script>
    <!--脚本数据部分-->
    new Vue({
      
        el:"#myDiv",
        data:{
      
            msg:"hello body"
        }
    });
</script>

Vue常用指令

指令概述：

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

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

常用指令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X1BP8HXg-1597230465582)(F:\javaee24\typora笔记\vau图片\1593428267859.png)]

文本插值

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

作用：将文本数据中的html标签解析出来

<body>
    <div id="myDiv">
        <div>{
  {msg}}</div>
        <div v-html="msg"></div>
    </div>
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
    
        el:"#myDiv",
        data:{
    
            msg:"<b>一夜暴富</b>"
        }
    });
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UTTIpAtg-1597230465584)(F:\javaee24\typora笔记\vau图片\1593428448527.png)]

绑定属性

v-bind：为 HTML 标签绑定属性值。

作用：为html标签的属性赋值

<body>

    <div id="myDiv">
        <a v-bind:href="cl">百度一下了啦</a>
    </div>
    
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
      
        el:"#myDiv",
        data:{
      
            cl:"www.baidu.com"
        }
    });
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnJYd85s-1597230465586)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593428686080.png)]

条件渲染

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。判定为真时渲染,否则不渲染。
v-else-if：条件性的渲染。判定为真时渲染,否则不渲染。

为false时，页面上根本不会加载这个元素

v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。

页面上一定会有这个元素，为false时，只是display属性为none。

<body>
    <div id="myDiv">
        <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>
</body>
<script src="vuejs/vue.js"></script>
<script>
    new Vue({
        el:"#myDiv",
        data:{
            num:3
        }
    });
</script>

最低0.47元/天解锁文章

gongwenxi

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
VUE基础+ElementUI快速入门

VUE快速入门Vue 介绍Vue 是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。特点易用：在有 HTML CSS JavaScript 的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。Vue 快速入门使用下载和引入 vue.j
复制链接

扫一扫