Vue入门

最新推荐文章于 2024-07-23 22:15:45 发布

残·影

最新推荐文章于 2024-07-23 22:15:45 发布

阅读量280

点赞数

分类专栏：全栈学习记录 # 前端

原文链接：https://www.kuangstudy.com/bbs/1352615387572842497

版权

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

全栈学习记录

13 篇文章 1 订阅

订阅专栏

Vue基础语法

传送门

VUE基础语法
　在学习vue之前，我们应了解一下什么是vue.js？

一、什么是Vue.js?
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js借鉴了Angular以及React的一些核心思想，综合各自的长处进行了操作以及性能等方面的优化，进而打造出一款性能更优，学习更容易的MVVM框架。

二、学习Vue基本语法
1、v-bind
接触vue的时候，觉着最神奇的地方莫过于vue的数据绑定了，今天要总结的就是vue中常用的属性绑定v-bind。

<div id="demo">
        <!--将这个元素节点的 title 属性和 Vue 实例的message 属性绑定到一起。-->
        <div v-bind:title="message">DOM元素属性绑定</div>
        <div :title="msg">DOM元素属性绑定</div>
    </div>
    <script>
        var demo1 = new Vue({
            el:'#demo',
            data:{
                message:'aaa',
                msg:'bbb',
            }
        })
    </script>

在这里插入图片描述

上面展示的是v-bind的最基本的使用，除了将元素的title属性和vue实例的相关字段进行绑定外，还能将其他的属性字段进行绑定，最常见的是对于样式的绑定，即class和style属性。

2、v-if系列
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。一般和v-else、v-else-i搭配一起使用。

<div id="app01">
    <h1 v-if="type === 'A'">A</h1>
    <h1 v-else-if="type === 'B'">B</h1>
    <h1 v-else>C</h1>
</div>
<script>
    var vue1 = new Vue({
        el: "#app01",
        data: {
            type: 'A'
        }
    });

3、v-for
语法格式

<div id="vue">
<li v-for="item in items">
{{ item.message }}
</li>
</div>
items是被迭代的数组，item是数组元素起的别名。

<div id="app">
    <li v-for="(item, index) in items">
        {{item.message}}------{{index}}
    </li>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            items: [
                {message: 'java'},
                {message: 'python'},
                {message: 'C'}
            ]
        }
    });
</script>

4、v-on
v-on 监听事件：
事件有Vue的事件、和前端页面本身的一些事件！我们这 click 是vue的事件，可以绑定到Vue中的
methods 中的方法事件！

<div id="app">
    <button v-on:click="sayHi">点击</button>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            message: "Java"
        },
        methods: {
             sayHi: function () {
                alert(this.message)
            }
        }
    });
</script>

5、v-model
语法格式

 v-model="vue_instance_attr"
 //value会自动把输入值赋值给vue实例的attr字段。

使用范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入最新的vue稳定版本-->
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<!--input输入框-->
<div id="app">
     <input type="text" v-model="message" placeholder="请输入">
    <p>输入的内容是: {{message}}</p>
</div>
<script>
    var  vue=new Vue({
        el:'#app',
        data:{
           message:''
        }
    });
</script>
</body>
</html>

运行结果：

在这里插入图片描述

如何理解v-model指令
v-model指令的本质是：它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。同时，v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。然后当输入事件发生时，实时更新vue实例中的数据。

版权声明：本文为博主原创文章，转载请附上原文出处链接和本声明，KuangStudy,以学为伴，一生相伴！
本文链接：https://www.kuangstudy.com/bbs/1352615387572842497

Vue+ElementUI

ElementUI后台管理系统主要标签：

el-container: 构建整个页面框架。
el-aside: 构建左侧菜单。
el-menu: 左侧菜单内容，常用属性：
1. :default-openeds: 默认展开的菜单，通过菜单的index值来关联参数为数组
2. ;default-active ：默认选中，通过菜单的index值来关联
el-submenu: 可展开的菜单，常用属性：
1. index:菜单的下标，文本类型，不能是数值类型
template：对应el-submenu的菜单名
i:设置菜单图标
el-menu-item: 菜单的子节点，不可再展开